Configuration API

type AppConfiguration = {
    hotelId: string;
    brandId?: string;
    groupId?: string;
    target?: string;
    targetIds?: string[];
    targetClasses?: string[];
    fallbackUrl: string;
    style: Style;
    renderAs?: "overlay" | "sideRail";
};

Field	Description	Example
hotelId	This is the shortcode representation of a Property in Skipper's database.	TESTHOTELSHORTCODE
target	This is the value of the id attribute of the HTML tag that Skipper's SDK should use as the base for its widget. If a value is not included, Skipper's SDK will search for a `<skipper-booking-engine>` element to use as an insertion point.	skipper-target
targetIds	This is a list of values of id attributes of HTML tags that we want to use as entrance points to the Skipper Widget.	["reserve-main-cta", "reserve-secondary-cta"]
targetClasses	This is a list of values of class values used to designate HTML tags that we want to use as entrance points to the Skipper Widget.	["reserve-ctas", "offer-ctas"]
fallbackUrl	This is the URL to the previous booking engine. This will be used in cases where we want to direct traffic to the previous booking engine instead of our widget.
isDynamic	set this value to `true` if your website is built and rendered dynamically with a framework like React or Vue. It defaults to `false`.
dynamicQueryInterval	if `isDynamic` is set to `true`, then the value of this is used to define how often Skipper will query for dynamically added entrance points. The units for the value are `ms`.	1000
style	This is a configuration object that will be used to white label our widget. This is described in more detail later on in this section.	{ primaryFont: 'Comic Sans MS', brandColor: '#ffffff', accentcolor: '#cccccc' }
renderAs	This allows you to configure the layout of the widget as Desktop `"overlay"` or Side Rail `"sideRail"`. The widget will render in the Side Rail layout by default when left unspecified.	"overlay" or "sideRail"

Marking Skipper Entrance Points

Typically, you will signal to the Skipper Booking Engine what DOM elements you want to use as a Skipper Entrance Point by including either their ids or one of their classes in the targetIds or targetClasses arrays:

<body>
    <!-- ... -->
    <a href="#" id="main-reserve-button">BOOK</a>
    <!-- ... -->
    <button class="other-reserve-buttons some-style-related-class">
        BOOK ANOTHER WAY
    </button>
    <!-- ... -->
    <div id="skipper-target"></div>
    <script>
        if (window.initSkipper) {
            window.initSkipper({
                // ...
                targetIds: ["main-reserve-button"],
                targetClasses: ["other-reserve-buttons"],
                // ...
            });
        }
    </script>
</body>

However, when you either cannot or prefer not to alter the id or the class list of the DOM Element that you wish to make a Skipper Entrance Point (for instance, you are using a theme in your CMS that makes it onerous to directly access the markup for the particular DOM Element), we provide alternate ways of signaling to the Skipper Booking Engine that a DOM Element should be considered a Skipper Entrance Point. These alternate methods follow the pattern of the parameters of our Deep Link API:

sbe_internalLink: include this string in the href attribute of any DOM element. You will typically want to specify href="?sbe_internalLink" instead of href="/?sbe_internalLink". This will ensure that your page's URL will be preserved, and not propagate possible side effects with any dynamic router that you may have on your website.
data-skipper-internal-link: set this as a data-attribute on any DOM element

Adding either of these attributes to any DOM element will signify that element as a Skipper Entrance Point. Use our CTA Link Generator to easily create these values.

<body>
    <!-- ... -->
    <a href="#" id="main-reserve-button">BOOK</a>
    <!-- ... -->
    <button class="other-reserve-buttons some-style-related-class">
        BOOK ANOTHER WAY
    </button>
    <!-- ... -->
    <button class="something-unrelated-to-skipper" data-skipper-internal-link>
        BOOK YET ANOTHER WAY
    </button>
    <!-- ... -->
    <a
        class="a-class-that-doesnt-even-know-of-skippers-existence"
        href="?sbe_internalLink"
    >
        BOOK IN AN ALTERNATIVE FASHION
    </a>
    <!-- ... -->
    <div id="skipper-target"></div>
    <script>
        if (window.initSkipper) {
            window.initSkipper({
                // ...
                targetIds: ["main-reserve-button"],
                targetClasses: ["other-reserve-buttons"],
                // ...
            });
        }
    </script>
</body>

Configuration API

Marking Skipper Entrance Points​

Marking Skipper Entrance Points