Embedding the widget
The widget can be implemented on a page in two different ways. They are largely the same, with one main difference: in
inline
mode the widget will stay in its designated space throughout the booking process; in takeover
mode it will
expand, into a container that you specify, after the user clicks "Search".
Inline
This is the simplest variant to implement. The container needs to be at least 300 pixels wide, and the widget will automatically adjust to the size of the container to make the best use of the space.
Put the widget snippet given to you by your contact at EHI on your page. You might need modify the code depending on where you want to embed the widget. Below you have an example snippet:
<script type="text/javascript">
var pbk = {
settings : {
kicker : '#pbk-widget'
}
};
(function(){var d=document,l=d.createElement('link'),s=d.createElement('script'),u='https://widget-cdn-int.partnerbookingkit.com/bundles/7bf1658d19d8a/widget.';l.href=u+'css';l.rel='stylesheet';d.head.appendChild(l);s.src=u+'js';s.async=true;d.head.appendChild(s)})();
</script>
Notice that your snippet may look different. The kicker
setting must contain a CSS selector for the widget container
element.
Takeover
On this variant the widget is shown in one container for its first step and then, after the user clicks "Search", it expands to a larger container area for the rest of the booking process. Note that the widget will completely replace that container, but its contents can be restored by closing the expanded widget.
To use the takeover variant, set the contentContainer
setting to a CSS selector for the expanded container:
var pbk = {
settings : {
kicker : '#initial-container',
contentContainer: '#expanded-container'
}
};