> ## Documentation Index
> Fetch the complete documentation index at: https://restoo.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Appearance

> Bring your brand into the widget — your fonts, your colors, your style.

The widget already uses the appearance configured for your Restoo account, so **you don't need to set anything here**. This page is for the installation that has to look different from the rest — pass an `appearance` object to `.create()`:

```js theme={null}
widget.create({ appearance });
```

<Note>
  That exception belongs to having it **embedded in your site**. If your guests book on the
  page Restoo hosts for you, the appearance always comes from your account: no
  installation can deviate there, and whatever you configure applies as it is.
</Note>

Declaring it is an **all-or-nothing** choice: it replaces your account's appearance entirely, it does not tweak it. Passing `appearance: { variables: { colorAccent: "#c0392b" } }` gives you that accent and Restoo's defaults for everything else; your account's fonts, radii and background are gone.

<Warning>
  If you only want to change one detail, the place to do it is your Restoo account, so every
  installation gets it. Declare `appearance` here only when this integration is meant to look
  different from the rest, and then set everything it needs.
</Warning>

<Info>
  Setting `colorAccent` is usually enough: Restoo derives its hover, contrast,
  and soft variants from it. There are many more [variables](#variables-reference)
  for fine-tuning, but most installations never need them.
</Info>

**Parameters**

<ParamField body="style" type="&#x22;rounded&#x22; | &#x22;sharp&#x22; | &#x22;pill&#x22;" default="rounded">
  Controls the corner radius of buttons and cards:

  | Value     | Description                           |
  | --------- | ------------------------------------- |
  | `rounded` | Soft, moderate corner rounding.       |
  | `sharp`   | Square corners, no rounding.          |
  | `pill`    | Fully rounded, capsule-style corners. |

  Example: `style: "pill"`.
</ParamField>

<ParamField body="hasShadowEffect" type="boolean" default="false">
  Adds a drop shadow around the widget.
</ParamField>

<ParamField body="hasGlassEffect" type="boolean" default="false">
  Adds a frosted-glass / blur effect.
</ParamField>

<ParamField body="fonts" type="object[]">
  Web fonts to load before applying `variables.fontFamilyBody` /
  `variables.fontFamilyHeading`. Each entry is the address of a font stylesheet — a Google Fonts
  URL, for example. Restoo loads it, and you then use the font's name in `variables`. `cssSrc`
  must be an absolute HTTPS URL.

  <Note>
    If the font name contains spaces, wrap it in quotes inside the CSS value —
    e.g. `'"Playfair Display", serif'` — otherwise the browser won't recognize it
    as a single font name.
  </Note>

  ```js theme={null}
  appearance: {
    fonts: [
      {
        cssSrc:
          "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&display=swap",
      },
    ],
    variables: { fontFamilyHeading: '"Playfair Display", serif' },
  }
  ```
</ParamField>

<ParamField body="variables" type="object">
  Individual colors, typography, and corner radii — see [Commonly used
  variables](#commonly-used-variables).
</ParamField>

```js theme={null}
const appearance = {
  style: "rounded",
  hasShadowEffect: true,
  variables: {
    colorAccent: "#c0392b",
    fontFamilyHeading: '"Playfair Display", serif',
  },
};
```

***

## Background of the hosted page

These three fields dress **the page Restoo hosts for you**, not the widget itself. Embedded in your own site they do nothing: there the widget sits inside an iframe sized to its content, so there is no page around it to dress.

They are configured in your account, like the rest of the appearance.

Both URLs must be absolute and HTTPS. **The widget does not validate them**, so a broken URL warns you nowhere — the background simply does not show.

<ParamField body="backgroundImageUrl" type="string">
  Full-screen background image for the page.
</ParamField>

<ParamField body="backgroundVideoUrl" type="string">
  Full-screen background video for the page, in MP4. It plays on its own, muted
  and looping. While it loads, `backgroundImageUrl` is shown if you have defined
  one, so it is worth declaring both.
</ParamField>

<ParamField body="hasBackgroundOverlay" type="boolean" default="false">
  Extends to desktop the darkening and blur layer that sits over the background.
  With an image or a video, Restoo already applies it **on mobile** so the text
  stays readable; turn this on if desktop needs it too.
</ParamField>

<Note>
  Declaring a background image or video changes three defaults so the widget
  stays legible on top of it: it turns on `hasShadowEffect` and sets
  `colorPageBackground` to white and `colorWidgetShadow` to a translucent black.
  Whatever you declare yourself wins over all three.
</Note>

The two variables for that page's surface, [`colorPageBackground` and `colorPageForeground`](#base-colors), belong with this group: they are part of the hosted page's frame too.

***

## Variables reference

All fields are optional strings. Anything you omit inside `appearance` falls back to the widget's default styling, not to your account's.

<Note>
  We recommend hex values (e.g. `"#c0392b"`) for all color variables, as used
  throughout this page's examples.
</Note>

### Commonly used variables

These cover the vast majority of branding needs — matching your accent color, widget background, and typography:

<ParamField body="colorAccent" type="string">
  Your brand/action color — buttons, links, selected states. Example:
  `"#c0392b"`.
</ParamField>

<ParamField body="colorWidgetBackground" type="string">
  Background color of the widget container. In `OVERLAY` mode, also sets the
  background of the modal panel itself (the chrome around the widget, outside
  the iframe). Example: `"#ffffff"`.
</ParamField>

<ParamField body="colorWidgetForeground" type="string">
  Foreground color of the widget container. In `OVERLAY` mode, also sets the
  color of the close button. Example: `"#1a1a1a"`.
</ParamField>

<Note>
  If you set a dark `colorWidgetBackground`, set `colorWidgetForeground` too —
  the modal panel's contrast isn't computed automatically, same as everywhere
  else in the widget.
</Note>

<ParamField body="fontFamilyBody" type="string">
  Font family for body text. Example: `"Inter, sans-serif"`.
</ParamField>

<ParamField body="fontFamilyHeading" type="string">
  Font family for headings. Example: `'"Playfair Display", serif'` — note the
  quotes around the font name, needed because it contains a space.
</ParamField>

### All other variables

<Note>
  Most installations never need these — they let you fine-tune individual
  colors, radii, and typography details beyond the commonly used variables
  above.
</Note>

<AccordionGroup>
  <Accordion title="Typography">
    <ParamField body="fontWeightLight" type="string">
      Weight used for light text. Example: `"300"`.
    </ParamField>

    <ParamField body="fontWeightNormal" type="string">
      Weight used for regular body text. Example: `"400"`.
    </ParamField>

    <ParamField body="fontWeightMedium" type="string">
      Weight used for mildly emphasized text. Example: `"500"`.
    </ParamField>

    <ParamField body="fontWeightSemibold" type="string">
      Weight used for headings and buttons. Example: `"600"`.
    </ParamField>

    <ParamField body="bodyTextCase" type="string">
      Text transform applied to body text. Example: `"none"`.
    </ParamField>

    <ParamField body="headingTextCase" type="string">
      Text transform applied to headings. Example: `"capitalize"`.
    </ParamField>

    <ParamField body="buttonTextCase" type="string">
      Text transform applied to button labels. Example: `"uppercase"`.
    </ParamField>
  </Accordion>

  <Accordion title="Base colors">
    <ParamField body="colorDark" type="string">
      Dark reference color the widget uses as its darkest base. Example: `"#111111"`.
    </ParamField>

    <ParamField body="colorPageBackground" type="string">
      Background of the page the widget sits on. Only visible on the [page hosted
      by Restoo](#background-of-the-hosted-page). Example: `"#ffffff"`.
    </ParamField>

    <ParamField body="colorPageForeground" type="string">
      Foreground color used on that page, such as the footer text. Also only on
      the hosted page. Example: `"#1a1a1a"`.
    </ParamField>

    <ParamField body="colorScrollbarThumb" type="string">
      Color of the scrollbar thumb. Example: `"#c1c1c1"`.
    </ParamField>

    <ParamField body="colorScrollbarTrack" type="string">
      Color of the scrollbar track. Example: `"#f1f1f1"`.
    </ParamField>

    <ParamField body="subtleOpacity" type="string">
      Opacity applied to muted elements, such as secondary text. Also drives the
      muted text inside the payment form. Example: `"0.6"`.
    </ParamField>
  </Accordion>

  <Accordion title="Semantic colors and generated variants">
    The semantic color roles are `Accent`, `Neutral`, `Success`, `Warning`, and
    `Danger`. Set their base values with `colorAccent`, `colorNeutral`,
    `colorSuccess`, `colorWarning`, and `colorDanger`.

    | Suffix      | Meaning                                        |
    | ----------- | ---------------------------------------------- |
    | No suffix   | Base color for the role.                       |
    | `Hover`     | Base color used in hover states.               |
    | `Soft`      | Subtle background derived from the base color. |
    | `SoftHover` | Subtle background used in hover states.        |

    So the complete accent family is `colorAccent`, `colorAccentHover`,
    `colorAccentSoft` and `colorAccentSoftHover`. Setting the base is normally
    enough — Restoo derives the other three.

    <Note>
      The text color shown on each of these backgrounds isn't a variable. Restoo
      picks black or white against the color you set, so it always meets the
      WCAG AA contrast minimum. If the result isn't what you want, change the
      base color rather than the text on top of it.
    </Note>
  </Accordion>

  <Accordion title="Widget chrome (header, footer, dialogs)">
    <ParamField body="colorWidgetBorder" type="string">
      Border color of the overall widget container. Example: `"#e5e5e5"`.
    </ParamField>

    <ParamField body="colorWidgetDialogBorder" type="string">
      Border color of dialogs shown inside the widget. Example: `"#e5e5e5"`.
    </ParamField>

    <ParamField body="colorWidgetDialogBackground" type="string">
      Background color of dialogs. Example: `"#ffffff"`.
    </ParamField>

    <ParamField body="colorWidgetDialogForeground" type="string">
      Foreground color of dialogs, used by their text and icons. Example: `"#1a1a1a"`.
    </ParamField>

    <ParamField body="colorWidgetShadow" type="string">
      Shadow color used when `hasShadowEffect` is enabled. Example: `"#00000026"`
      (black at \~15% opacity, via the hex alpha channel).
    </ParamField>

    <ParamField body="colorIcon" type="string">
      Color of the glyphs that accompany a value in the summary lines — the
      calendar, clock and party-size icons you see on every booking, experience
      and order summary. This is the widget's main iconography. Defaults to
      `colorAccent`. Example: `"#c0392b"`.
    </ParamField>

    <ParamField body="colorControlIcon" type="string">
      Color of the controls whose whole body is an icon: the menu toggle, the
      back arrow, the carousel arrows and the language suggestion controls.
      Defaults to `colorWidgetForeground`. Example: `"#1a1a1a"`.
    </ParamField>

    <Note>
      Every other icon follows whatever it belongs to, and there is no key for
      it: an icon inside a button takes the button's label color, one next to a
      text takes the text's, one inside a dialog or a radio card follows that
      surface, and status icons follow their semantic color (`colorWarning`,
      `colorDanger`). Icons inside a field are governed by `colorInputIcon`.
    </Note>

    <ParamField body="colorOverlay" type="string">
      Backdrop color behind dialogs shown inside the widget. Example:
      `"#00000080"` (black at 50% opacity, via the hex alpha channel).
    </ParamField>

    <ParamField body="colorDisabledButtonBackground" type="string">
      Background color of a disabled button. Use an opaque color: a translucent
      one lets the content underneath show through. Example: `"#e8e8e8"`.
    </ParamField>

    <ParamField body="colorDisabledButtonForeground" type="string">
      Text color of a disabled button. Example: `"#9a9a9a"`.
    </ParamField>
  </Accordion>

  <Accordion title="Inputs & form controls">
    <ParamField body="colorInputBorder" type="string">
      Border color of inputs. Example: `"#d4d4d4"`.
    </ParamField>

    <ParamField body="colorInputBackground" type="string">
      Background color of inputs. Example: `"#ffffff"`.
    </ParamField>

    <ParamField body="colorInputBackgroundHover" type="string">
      Background color used when an input option is hovered. Example: `"#1a1a1a1a"`.
    </ParamField>

    <ParamField body="colorInputForeground" type="string">
      Foreground color of inputs, used by the typed value. Example: `"#1a1a1a"`.
    </ParamField>

    <ParamField body="colorInputIcon" type="string">
      Color of icons shown inside an input: a field's leading icon, the select
      chevron, the date picker arrows and the number stepper controls. Defaults
      to `colorAccent`. Example: `"#6b7280"`.
    </ParamField>

    <ParamField body="colorInputPlaceholder" type="string">
      Color of placeholder text. Example: `"#a3a3a3"`.
    </ParamField>

    <ParamField body="colorRadioGroupButtonBorder" type="string">
      Border color of an unselected radio-style button. Example: `"#d4d4d4"`.
    </ParamField>

    <ParamField body="colorRadioGroupButtonBackground" type="string">
      Background color of an unselected radio-style button. Example: `"#ffffff"`.
    </ParamField>

    <ParamField body="colorRadioGroupButtonForeground" type="string">
      Text and icon color of an unselected radio-style button. Example: `"#1a1a1a"`.
    </ParamField>

    <ParamField body="colorRadioGroupButtonBorderSelected" type="string">
      Border color of the selected radio-style button. Example: `"#c0392b"`.
    </ParamField>

    <ParamField body="colorRadioGroupButtonBackgroundSelected" type="string">
      Background color of the selected radio-style button. Example: `"#c0392b"`.
    </ParamField>

    <ParamField body="colorRadioGroupButtonForegroundSelected" type="string">
      Text and icon color of the selected radio-style button. Example: `"#ffffff"`.
    </ParamField>

    <ParamField body="colorToggleBackground" type="string">
      Track color of a switch that is off. Defaults to `colorWidgetForeground` at
      25%. Example: `"#d4d4d4"`.
    </ParamField>

    <ParamField body="colorToggleBackgroundSelected" type="string">
      Track color of a switch that is on. Defaults to `colorAccent`. Example:
      `"#c0392b"`.
    </ParamField>

    <Note>
      The switch knob is not configurable: it is derived so that it stays legible
      on its track, and on the "on" track it follows the contrast computed for
      `colorAccent`. If you set `colorToggleBackgroundSelected` to something far
      from your accent, check that the knob still reads well against it.
    </Note>
  </Accordion>

  <Accordion title="Corner radius & effects">
    Each radius scale is set from a single base value, and the widget derives
    the steps from it — so the proportions stay consistent.

    <ParamField body="radiusBase" type="string">
      Base corner radius cards and surfaces derive from. Example: `"8px"`.
    </ParamField>

    <ParamField body="radiusBtnBase" type="string">
      Base corner radius buttons derive from. Example: `"4px"`.
    </ParamField>

    <ParamField body="radiusInputBase" type="string">
      Base corner radius inputs and form controls derive from. Example: `"2px"`.
    </ParamField>

    <ParamField body="radiusWidget" type="string">
      Corner radius of the outer widget container. Example: `"16px"`.
    </ParamField>

    <ParamField body="remSizeBase" type="string">
      Base rem size the widget's type and spacing scales derive from. The widget
      scales it up on very large screens and uses a print-friendly size when the
      page is printed. Example: `"16px"`.
    </ParamField>

    <ParamField body="blurGlassEffect" type="string">
      Blur intensity used when `hasGlassEffect` is enabled. Example: `"12px"`.
    </ParamField>
  </Accordion>
</AccordionGroup>

***

## Full example

A realistic config combining a top-level field, a few commonly used variables, and a couple of
less common ones from different categories — you don't need to set all of them, just the ones
that differ from the widget's defaults:

```js theme={null}
widget.create({
  appearance: {
    style: "pill",
    hasShadowEffect: true,
    fonts: [
      {
        cssSrc:
          "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&display=swap",
      },
    ],
    variables: {
      // Commonly used
      colorAccent: "#c0392b",
      colorWidgetBackground: "#fffaf5",
      fontFamilyBody: "Inter, sans-serif",
      fontFamilyHeading: '"Playfair Display", serif',

      // Less common, from different categories
      colorSuccess: "#16a34a",
      radiusWidget: "24px",
    },
  },
});
```

***

## Next steps

<CardGroup cols={2}>
  <Card title="Set Up Your Integrations" icon="sliders" href="/widget/integrations">
    Enable GA4, Google Ads, Meta, TikTok, ChatGPT Ads, or GTM in your Restoo account.
  </Card>

  <Card title="Consent" icon="shield-check" href="/widget/consent">
    Until the visitor's decision is known, nothing goes out to any platform.
  </Card>
</CardGroup>