Steps to Install the Widget on Your Website
The Aloha widget allows you to easily integrate the booking system into your website, providing customers with a quick and simple way to book their stays. Its installation is simple and does not require advanced programming knowledge.
Below, we explain step by step how to add it to your website.
Step 1 - Add the Stylesheet
To ensure the widget displays correctly, you need to include the stylesheet in your webpage.
📌 Copy and paste the provided link inside the <head> section of your site. 📌
<link rel="stylesheet" href="https://booking-widget.aloha.co/aloha-booking-widget.css"/>
Step 2 - Add the Widget Container
📌 This container is where the widget will be displayed on your website.
Place it before the closing </body> tag of your site. 📌
<div id="aloha-widget"></div>
Step 3 - Assign a Unique ID to the Button to Open the Widget
To make the widget open when clicking on a specific button, you first need to assign it a unique ID. In Elementor, follow these steps:
Open the Elementor editor and select the button you want to use.
In the left sidebar, go to the “Content” section.
In the "Button ID" field, assign a unique ID (e.g.,
btn-widget).
This ID is essential for linking the button to the script that will open the booking widget.
Step 4 - Get the Property Secret Key and Add the Script
The property secret key is necessary to authenticate the widget on your site. To obtain it:
Go to Manage System in your admin panel.
Select Widget.
Copy the "Property Identification Key" shown there.
Step 5 - Add the Widget Script and Configure It
Once the button ID is set, add the script to load and open the widget when clicked.
Insert the provided script before the closing </body> tag of your website.
Make sure to replace 'YOUR_SECRET_KEY_HERE' with the secret key of your property.
📌 Copy and paste this code into the appropriate area:
<!-- Widget Aloha no tocar -->
<script type="text/javascript" src="https://booking-widget.aloha.co/aloha-booking-widget.umd.js"></script>
<script>
var alohaObject = new AlohaBookingWidget({
key:'YOUR_SECRET_KEY_HERE'
});
var button = document.getElementById('btn-widget'); // Este es el ID único asignado al botón
// Agregar un event listener al botón
button.addEventListener('click', function (e) {
e.preventDefault();
// Llamar al método para abrir el widget cuando se hace clic en el botón
alohaObject.open();
});
</script>
With this setup, when your guests click the button with the ID btn-widget, the Aloha widget will open correctly.
Make sure to replace 'YOUR_SECRET_KEY_HERE' with the secret key of your property that you obtained from the system.