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;
    accentBackgroundColor?: string;
    primaryBorderColor?: string;
    primaryBackgroundColor?: string;
    secondaryBorderColor?: string;
    secondaryBackgroundColor?: string;
    overlay?: Overlay | string;

    // HELPER TEXT COLOR CONFIGURATIONS
    placeholderFontColor?: string;
    helperFontColor?: string;

    // ADDITIONAL COLOR CONFIGURATIONS
    alertColor?: string;
    alertFontColor?: string;
    alertBackgroundColor?: string;
    successColor?: string;
    successFontColor?: string;
    successBackgroundColor?: string;
    errorColor?: string;
    errorFontColor?: string;
    errorBackgroundColor?: string;
    warningColor?: string;
    warningFontColor?: string;
    warningBackgroundColor?: string;
    highlightColor?: string;
    highlightFontColor?: string;
    highlightBackgroundColor?: 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	serif
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 `accentBackgroundColor` as the background.	HEX value	#FFFFFF
accentBackgroundColor	The background color of additional text that will be displayed with the `accentFontColor` as the text color.	HEX value	#3E8791
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
secondaryBorderColor	The color for the outline of areas where additional information is displayed	HEX value	#D9D9D9
secondaryBackgroundColor	The background color for areas where there is secondary information	HEX value	#F1F2F4
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
helperFontColor	The color for accessory text	HEX value	#767676
alertColor	The main color for alert and supplemental messaging and icons	HEX value	#7E7E7E
alertFontColor	The text color that will be displayed with the `alertBackgroundColor` as the background	HEX value	#7E7E7E
alertBackgroundColor	The background color for areas that will display an alert	HEX value	#7E7E7E
successColor	The main color for success messaging and icons	HEX value	#22C55E
successFontColor	The text color that will be displayed with the `successBackgroundColor` as the background	HEX value	#FFFFFF
successBackgroundColor	The background color for areas that will display a success message	HEX value	#22C55E
errorColor	The main color for error messaging and icons	HEX value	#B91C1C
errorFontColor	The text color that will be displayed with the `errorBackgroundColor`	HEX value	#000000
errorBackgroundColor	The background color for error messaging	HEX value	#EF5151
warningColor	The main color for warning messaging and icons	HEX value	#FACC14
warningFontColor	The text color that will be displayed with the `warningBackgroundColor`	HEX value	#000000
warningBackgroundColor	The background color for warning messaging	HEX value	#FACC14
highlightColor	The main color for informative messaging and icons	HEX value	#FFAD75
highlightFontColor	The text color that will be displayed with the `highlightBackgroundColor`	HEX value	#000000
highlightBackgroundColor	The background color for informative messaging	HEX value	#FFAD75
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