Quick start

Add the script tag

This can be anywhere on your page, but it is recommended to put it in the head of your document.

<script src="https://embed.travelbase.nl/embed.js"></script>

Add a container for the embed

At the place where you want the embed to show up, create a html element with a unique id/class so you can reference it later.

<div id="root"></div>

Initialize your embed

Initalize the embed with the following code. Replace https://demo.travelbase.nl with the url of the travelbase instance you're using.

<script>
    Travelbase.embed('#root', {
        originUrl: 'https://demo.travelbase.nl',
        type: 'search',
        options: {
            // ...
        },
        callbacks: {
            // ...
        },
    });
</script>

🎉 Done!

You should now see the embed on your page.

The options/callbacks are different for each type of embed, so make sure to check the documentation for the specific embed type you want to use.

The overlay ends up behind my header

Some parts of the embed (the search box popup, the filter/sort modals, the map) expand into a fullscreen overlay. Two things have to be true for that overlay to cover your page.

It has to out-rank your header. The overlay is drawn at z-index: 2147483647, so it wins by default. Pass zIndex if you need it to sit lower:

<script>
    Travelbase.embed('#root', {
        originUrl: 'https://demo.travelbase.nl',
        type: 'searchbox',
        zIndex: 500,
        options: {},
        callbacks: {},
    });
</script>

It has to escape any stacking context around the container. A z-index only orders an element against its siblings within the nearest stacking context, so if the embed container sits inside one - a section wrapper with position: relative; z-index: 4, say - the overlay is stuck in that layer and a header with a higher z-index covers it no matter how large the overlay's own value is. While the overlay is open the embed raises every such ancestor up to <body> for you, and puts them back when it closes, so this case needs no change on your side.

The one situation the embed cannot fix is an ancestor with a transform, perspective, filter, backdrop-filter, contain, or will-change. Those make the ancestor the containing block for position: fixed, so the overlay is sized and positioned against it instead of the viewport. Changing that would break your layout, so the embed logs a console warning naming the element instead - move the embed container out of it, or drop the property.