Bouton du site Web existant – identifiant #book-now-bt

getElementById - L'ID du bouton « Cliquez ici »
				
					<script>

      document.getElementById('book-now-bt')
   
</script>
				
			
				
					<script>
(function() {
  document.addEventListener('DOMContentLoaded', function() {
    // CHANGE: Add your book now button selectors here
    var buttons = [
      document.getElementById('book-now-bt'),// CHANGE: Main book now button ID
      //document.querySelector('.book-now-button-footer')  // CHANGE: if using class 
    ];
    buttons.forEach(function(btn) {
      if (!btn) return;
      btn.addEventListener('click', function(e) {
        e.preventDefault();
        var fallbackUrl = this.href;
        var timeout = 2000;  // Wait up to 2 seconds for controller to load
        var start = Date.now();
        
        (function checkAndOpen() {
          if (synxisControllerInstance?.openOverlay) {
            try {
              synxisControllerInstance.openOverlay({ route: '/' });
            } catch (err) {
              console.error('Overlay error:', err);
              window.location.href = fallbackUrl;
            }
          } else if (Date.now() - start < timeout) {
            setTimeout(checkAndOpen, 100);
          } else {
            window.location.href = fallbackUrl;
          }
        })();
      });
    });
  });
})();
</script>
				
			

Composant contextuel – peut être placé n'importe où sur la page

Il s'agit du moteur de réservation qui apparaîtra sous forme de superposition lorsqu'il sera déclenché.

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

Composant panier

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

Réserver maintenant

 

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

Réservez dès maintenant avec le code promotionnel et le CSS supplémentaire (s'applique uniquement au composant)

				
					<shs-sbem-book-now
 promo="BREAKFAST"
   css=".bg-primary-button:hover{background-color:#f5f1e8!important;color:#000!important;}
 :host {--font-sans: 'Open Sans', sans-serif;}">
</shs-sbem-book-now>
				
			

Meilleur prix filtré pour une nuit en chambre double standard

				
					<shs-sbem-best-price
    room="DBL"
    length-of-stay="1"
    ></shs-sbem-best-price>	
				
			

Composant barre de recherche

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

Composant calendrier

				
					<shs-sbem-calendar
number-of-months="1"
hide-legend="true"
css=" :host {--color-primary: oklch(0 0 0)}"
    ></shs-sbem-calendar>