Theming API

Use the below variables to customize and theme the booking engine for your website.

Each of these variables has a defined default value which you can override by explicitly setting a variable in the style object. This object will be set as the value to the style parameter in the configuration object in the initSkipper function call.

type Style = {
    // FONT CONFIGURATIONS
    primaryFont?: StyleFont | string;
    primaryFontBaseSize?: string;
    primaryFontColor?: string;
    secondaryFont?: StyleFont | string;
    baseFontSize?: string;
    secondaryFontColor?: string;

    // MAIN COLOR CONFIGURATIONS
    primaryColor?: string;
    accentColor?: string;
    accentFontColor?: string;
    primaryBorderColor?: string;
    primaryBackgroundColor?: string;
    secondaryBackgroundColor?: string;
    infoBackgroundColor?: string;
    infoFontColor?: string;
    overlay?: Overlay | string;

    // ADDITIONAL COLOR CONFIGURATIONS
    placeholderFontColor?: string;
    alertBackgroundColor?: string;
    successColor?: string;
    errorColor?: string;
    errorBackgroundColor?: string;
    warningColor?: string;

    // OPACITY
    inactiveOpacity?: number;
    disabledOpacity?: number;
    highlightOpacity?: number;
    stateOpacity?: number;
};

type StyleFont = {
    family: string;
    transform?: "uppercase" | "capitalize" | "lowercase" | "none";
    letterSpacing?: string; // accepts any valid CSS value for the letter-spacing property
};

type Overlay = {
    backgroundColor?: string;
    opacity?: number;
};

Field	Description	Format	Default Value
primaryFont	This is your brand's main header font type and will be applied broadly to header, and CTA text elements. You can either specify a font family as a `string`, or specify a `StyleFont` object if, in addition to the font family, you want transform the text in one of the specified ways. We expect this font family value to be already available in the environment of the website.	OTF, TTF or `StyleFont` object	Helvetica
primaryFontBaseSize	The base font size for your header text. Increase this if your `primaryFont` is small.	absolute size in pixels	16px
primaryFontColor	The color of your `primaryFont` text used for headers.	HEX value	#000000
secondaryFont	This is your brand's main body font type and will be applied broadly to body, link, subheading, and description text elements. You can either specify a font family as a `string`, or specify a `StyleFont` object if, in addition to the font family, you want transform the text in one of the specified ways. We expect this font family value to be already available in the environment of the website.	OTF, TTF or a `StyleFont` object	Helvetica
baseFontSize	The base font size for your main body text. Increase this if your `secondaryFont` is small.	absolute size in pixels	16px
secondaryFontColor	The color of your `secondaryFont` text used for the main body text.	HEX value	#767676
primaryColor	This is your brand's main color and will be used across all CTA types. Additionally, opacity variations of this color will be applied in limited use as visual highlights or to designate inactive elements.	HEX value	#000000
accentColor	This is your brand's secondary color and will be used in limited use for banner & message elements.	HEX value	#3E8791
accentFontColor	The color of additional text that will be displayed with the `accentColor` as the background.	HEX value	#FFFFFF
primaryBorderColor	The color for the calendar outline, form field border and loading placeholder animation	HEX value	#D9D9D9
primaryBackgroundColor	The main background color of the booking engine	HEX value	#FFFFFF
secondaryBackgroundColor	The background color for areas where there is secondary information	HEX value	#F1F2F4
infoBackgroundColor	The background color for the filter/sort-by dropdown.	HEX value	#f3f3f3
infoFontColor	The text color that will be displayed with the `infoBackgroundColor` as the background.	HEX value	#1e293b
overlay	This allows you to configure the widget's overlay background color and opacity.	HEX value or `Overlay` object
placeholderFontColor	The color for placeholder text in form fields	HEX value	#A9A9A9
alertBackgroundColor	The background color for areas that will display an alert	HEX value	#7e7e7e
successColor	The text color for success messaging	HEX value	#22c55e
errorColor	The text color for error messaging	HEX value	#b91c1c
errorBackgroundColor	The background color for error messaging	HEX value	#ef5151
warningColor	The text color for warning messaging	HEX value	#facc15
inactiveOpacity	The opacity for inactive states	HEX value	0.5
disabledOpacity	The opacity for disabled states	HEX value	0.3
stateOpacity	The opacity for focused, highlighted states	HEX value	0.4

Examples

With StyleFont

window.initSkipper({
    target: "skipper-target",
    targetIds: ["main-reserve-button"],
    targetClasses: ["other-reserve-buttons"],
    hotelId: "HOTELID",
    style: {
        primaryColor: "#1B3A5C",
        accentColor: "#7F9580",
        primaryFont: {
            family: "Comic Sans MS",
            transform: "capitalize",
            letterSpacing: "0.5px",
        },
    },
    fallbackUrl: "https://<enter-fallback-CRS-or-PMS-site-here>",
});

Without StyleFont

window.initSkipper({
    target: "skipper-target",
    targetIds: ["main-reserve-button"],
    targetClasses: ["other-reserve-buttons"],
    hotelId: "HOTELID",
    style: {
        primaryColor: "#1B3A5C",
        accentColor: "#7F9580",
        primaryFont: "Comic Sans MS",
    },
    fallbackUrl: "https://<enter-fallback-CRS-or-PMS-site-here>",
});

Theming API

Examples​

Examples