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():

widget.create({ appearance });

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.

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.

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.

Setting colorAccent is usually enough: Restoo derives its hover, contrast, and soft variants from it. There are many more variables for fine-tuning, but most installations never need them.

Parameters

style · "rounded" | "sharp" | "pill" · 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".

hasShadowEffect · boolean · default: "false"

Adds a drop shadow around the widget.

hasGlassEffect · boolean · default: "false"

Adds a frosted-glass / blur effect.

fonts · 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.

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.

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

variables · object

Individual colors, typography, and corner radii — see Commonly used variables.

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.

backgroundImageUrl · string

Full-screen background image for the page.

backgroundVideoUrl · 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.

hasBackgroundOverlay · 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.

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.

The two variables for that page’s surface, colorPageBackground and colorPageForeground, 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.

We recommend hex values (e.g. "#c0392b") for all color variables, as used throughout this page’s examples.

Commonly used variables

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

colorAccent · string

Your brand/action color — buttons, links, selected states. Example: "#c0392b".

colorWidgetBackground · 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".

colorWidgetForeground · string

Foreground color of the widget container. In OVERLAY mode, also sets the color of the close button. Example: "#1a1a1a".

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.

fontFamilyBody · string

Font family for body text. Example: "Inter, sans-serif".

fontFamilyHeading · string

Font family for headings. Example: '"Playfair Display", serif' — note the quotes around the font name, needed because it contains a space.

All other variables

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

Typography

fontWeightLight · string

Weight used for light text. Example: "300".

fontWeightNormal · string

Weight used for regular body text. Example: "400".

fontWeightMedium · string

Weight used for mildly emphasized text. Example: "500".

fontWeightSemibold · string

Weight used for headings and buttons. Example: "600".

bodyTextCase · string

Text transform applied to body text. Example: "none".

headingTextCase · string

Text transform applied to headings. Example: "capitalize".

buttonTextCase · string

Text transform applied to button labels. Example: "uppercase".

Base colors

colorDark · string

Dark reference color the widget uses as its darkest base. Example: "#111111".

colorPageBackground · string

Background of the page the widget sits on. Only visible on the page hosted by Restoo. Example: "#ffffff".

colorPageForeground · string

Foreground color used on that page, such as the footer text. Also only on the hosted page. Example: "#1a1a1a".

colorScrollbarThumb · string

Color of the scrollbar thumb. Example: "#c1c1c1".

colorScrollbarTrack · string

Color of the scrollbar track. Example: "#f1f1f1".

subtleOpacity · string

Opacity applied to muted elements, such as secondary text. Also drives the muted text inside the payment form. Example: "0.6".

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.

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.

Widget chrome (header, footer, dialogs)

colorWidgetBorder · string

Border color of the overall widget container. Example: "#e5e5e5".

colorWidgetDialogBorder · string

Border color of dialogs shown inside the widget. Example: "#e5e5e5".

colorWidgetDialogBackground · string

Background color of dialogs. Example: "#ffffff".

colorWidgetDialogForeground · string

Foreground color of dialogs, used by their text and icons. Example: "#1a1a1a".

colorWidgetShadow · string

Shadow color used when hasShadowEffect is enabled. Example: "#00000026" (black at ~15% opacity, via the hex alpha channel).

colorIcon · 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".

colorControlIcon · 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".

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.

colorOverlay · string

Backdrop color behind dialogs shown inside the widget. Example: "#00000080" (black at 50% opacity, via the hex alpha channel).

colorDisabledButtonBackground · string

Background color of a disabled button. Use an opaque color: a translucent one lets the content underneath show through. Example: "#e8e8e8".

colorDisabledButtonForeground · string

Text color of a disabled button. Example: "#9a9a9a".

Inputs & form controls

colorInputBorder · string

Border color of inputs. Example: "#d4d4d4".

colorInputBackground · string

Background color of inputs. Example: "#ffffff".

colorInputBackgroundHover · string

Background color used when an input option is hovered. Example: "#1a1a1a1a".

colorInputForeground · string

Foreground color of inputs, used by the typed value. Example: "#1a1a1a".

colorInputIcon · 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".

colorInputPlaceholder · string

Color of placeholder text. Example: "#a3a3a3".

colorRadioGroupButtonBorder · string

Border color of an unselected radio-style button. Example: "#d4d4d4".

colorRadioGroupButtonBackground · string

Background color of an unselected radio-style button. Example: "#ffffff".

colorRadioGroupButtonForeground · string

Text and icon color of an unselected radio-style button. Example: "#1a1a1a".

colorRadioGroupButtonBorderSelected · string

Border color of the selected radio-style button. Example: "#c0392b".

colorRadioGroupButtonBackgroundSelected · string

Background color of the selected radio-style button. Example: "#c0392b".

colorRadioGroupButtonForegroundSelected · string

Text and icon color of the selected radio-style button. Example: "#ffffff".

colorToggleBackground · string

Track color of a switch that is off. Defaults to colorWidgetForeground at 25%. Example: "#d4d4d4".

colorToggleBackgroundSelected · string

Track color of a switch that is on. Defaults to colorAccent. Example: "#c0392b".

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.

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.

radiusBase · string

Base corner radius cards and surfaces derive from. Example: "8px".

radiusBtnBase · string

Base corner radius buttons derive from. Example: "4px".

radiusInputBase · string

Base corner radius inputs and form controls derive from. Example: "2px".

radiusWidget · string

Corner radius of the outer widget container. Example: "16px".

remSizeBase · 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".

blurGlassEffect · string

Blur intensity used when hasGlassEffect is enabled. Example: "12px".

---

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:

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

Set Up Your Integrations

Enable GA4, Google Ads, Meta, TikTok, ChatGPT Ads, or GTM in your Restoo account.

Consent

Until the visitor’s decision is known, nothing goes out to any platform.