				
					<script>
var synxisControllerInstance = null;
function initSynxisController() {
SynxisUIController.init({
environment: 'p1',
apiKey: 'MDAxMjF+dVNKZlBxNkNpazBlb2Q5SkEwL0xmVi9XTlJqbkh4V2t6ZjRONjllRDdKajlhYmtsYSt1RkFucUhwZXZDakJ5aklLNFlBQ3o0YW8zdXpVczBqaENhZ2c9PQ==',
 locale: 'en-US',
 chainId: '31635',
 hotelId: '99563',
 currency: 'EUR',
bookingEngineMode: 'in-context',
sbeLinkAdapter: true,
components: ['book-now', 'search-bar', 'in-context', 'cart','best-price', 'calendar']
}).then(function(controller) {
synxisControllerInstance = controller;
console.log('SynXis UI Controller initializedsuccessfully');
}).catch(function(error) {
console.error('Failed to initialize controller:', error);
});
}
</script>
 
<script src="https://be.synxis.com/sbem/web/ui-controller/1.x/shs-sbem-ui-controller.umd.js" onload="initSynxisController()"></script>

In-context component – can be placed anywhere on the page

This is the booking engine and will appear as an overlay when triggered

				
					<shs-sbem-in-context></shs-sbem-in-context>

Cart component

				
					<shs-sbem-cart></shs-sbem-cart>

Book now component

				
					<shs-sbem-book-now></shs-sbem-book-now>

Book now component with promo code and additional CSS (applies to component only)

				
					<shs-sbem-book-now
 promo="MEMBER"
 css="
 :host {
--font-sans: lato, sans-serif;
    --font-serif: lato, sans-serif;
 }
 ">
</shs-sbem-book-now>

Book now component filtered by room

				
					<shs-sbem-book-now
 room="GLA2">
</shs-sbem-book-now>

Search bar component

				
					 <shs-sbem-search-bar
 sections='["dates", "occupancy", "codes", "submit"]'
	 >
 </shs-sbem-search-bar>

Calendar component

				
					<shs-sbem-calendar
number-of-months="1"
hide-legend="true"
    ></shs-sbem-calendar>

In-Context BE Hotel Blanca P1