Como configurar seu widget no seu site
Passos para instalar o widget no seu site
O widget Aloha permite integrar facilmente o sistema de reservas ao seu site, oferecendo aos clientes uma maneira rápida e simples de reservar suas estadias. Sua instalação é simples e não requer conhecimentos avançados de programação.
Abaixo, explicamos passo a passo como adicioná-lo ao seu site.
Passo 1 - Adicione a folha de estilo
Para garantir que o widget seja exibido corretamente, você precisa incluir a folha de estilo em sua página da web.
📌 Copie e cole o link fornecido dentro da seção <head> do seu site. 📌
<link rel="stylesheet" href="https://booking-widget.aloha.co/aloha-booking-widget.css"/>
Passo 2 - Adicione o contêiner do widget
📌 Este contêiner é onde o widget será exibido no seu site.
Coloque-o antes da tag de fechamento </body> do seu site. 📌
<div id="aloha-widget"></div>
Passo 3 - Atribua um ID exclusivo ao botão para abrir o widget
Para fazer com que o widget abra ao clicar em um botão específico, primeiro você precisa atribuir a ele um ID exclusivo. No Elementor, siga estas etapas:
- Abra o editor Elementor e selecione o botão que deseja usar.
- Na barra lateral esquerda, vá para a seção “Conteúdo”.
- No campo “ID do botão”, atribua um ID exclusivo (por exemplo, btn-widget).
Este ID é essencial para vincular o botão ao script que abrirá o widget de reserva.
Passo 4 - Obtenha a chave secreta da propriedade e adicione o script
A chave secreta da propriedade é necessária para autenticar o widget no seu site. Para obtê-la:
- Acesse Gerenciar Sistema no seu painel de administração.
- Selecione Widget.
Copie a “Chave de identificação da propriedade” exibida ali.
Passo 5 - Adicione o script do widget e configure-o
Depois de definir o ID do botão, adicione o script para carregar e abrir o widget quando clicado.
Insira o script fornecido antes da tag de fechamento </body> do seu site.
Certifique-se de substituir 'YOUR_SECRET_KEY_HERE' pela chave secreta da sua propriedade.
📌 Copie e cole este código na área apropriada:
_<!-- 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 é o ID único atribuído ao botão
// Adicionar um ouvinte de evento ao botão
button.addEventListener('click', function (e) {
e.preventDefault();
// Chamar o método para abrir o widget quando o botão for clicado
alohaObject.open();
});
</script>
Com essa configuração, quando seus hóspedes clicarem no botão com o ID btn-widget, o widget Aloha será aberto corretamente.
Glossary
Certifique-se de substituir “YOUR_SECRET_KEY_HERE” pela chave secreta da sua propriedade que você obteve do sistema.
Actualizado em: 19/11/2025
Obrigado!