				
					
<script>
 var synxisControllerInstance = null;
 
 function initSynxisController() {
  SynxisUIController.init({
    apiKey: 'MDAxMjF+dVNKZlBxNkNpazBlb2Q5SkEwL0xmVi9XTlJqbkh4V2t6ZjRONjllRDdKajlhYmtsYSt1RkFucUhwZXZDakJ5aklLNFlBQ3o0YW8zdXpVczBqaENhZ2c9PQ==',  
 locale: 'en-US',
 chainId: '31635',
 hotelId: '99563',
 environment: 'p1',
 bookingEngineMode: 'in-context',
sbeLinkAdapter: true,
currency: 'EUR',
 components: ['book-now', 'in-context', 'search-bar', 'best-price', 'cart', 'calendar']
  }).then(function(controller) {
   synxisControllerInstance = controller;
  }).catch(function(error) {
   console.error('Synxis initialization error:', 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 room code and additional CSS (applies to component only)

				
					<shs-sbem-book-now
 room="SUP"
 css="
 button{
 background:#164301;
 color:#f0edde;
 }
 ">
</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