> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.aloha.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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"/>

[![](https://storage.crisp.chat/users/helpdesk/website/-/f/e/3/1/fe31fde8c3f09000/c6bd0713-06b8-4918-b5f0-d257d8_10rdl5m.png)](https://downloads.intercomcdn.com/i/o/qn4880pe/1357925265/c8375e9656c2762129a2244787ce/htps+1.png?expires=1752705000&signature=b40d00e5173e80ad39d8035883027858248e0bdde750a2456313f26061dcdfb7&req=dSMiEcB8mINZXPMW1HO4zSjZUCoU6F0JFF1WI2UdPBHi9KxdF1GQXoR30PkU%0AGdSZhAvAsAPD7EDuJqg%3D%0A)

## 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>***

[![](https://storage.crisp.chat/users/helpdesk/website/-/a/f/2/5/af259c8fa259a000/856184fb-f112-435a-b64b-c76246_1ol9fps.png)](https://downloads.intercomcdn.com/i/o/qn4880pe/1357927214/64726ac00901ff24e826e7f7cb52/htms+2.png?expires=1752705000&signature=77e50911b30bbb9042cf81cea48e501db02cffa4f1da655367d9e9e4e30dec58&req=dSMiEcB8moNeXfMW1HO4zV%2FprpmQ%2BqokT6v%2F7XV2oSW27sk4%2BYo%2Fju5Acrli%0ALDXPzpeI1RZaL8yWqQY%3D%0A)

## 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:

1. Abra o editor Elementor e selecione o botão que deseja usar.
2. Na barra lateral esquerda, vá para a seção “Conteúdo”.
3. No campo “ID do botão”, atribua um ID exclusivo (por exemplo, btn-widget).
[![](https://storage.crisp.chat/users/helpdesk/website/-/9/0/c/a/90cad014e4c1000/6a8cb641-41cd-41af-9d16-3e17f0_up5aqp.png)](https://downloads.intercomcdn.com/i/o/qn4880pe/1357927402/598a11c58446d755b8bd4a9e223b/htms+3.png?expires=1752705000&signature=08c0c9c194d9d035cd98a7324f5b9c5ca9c5ea0b8121f253970dbe351744d5a2&req=dSMiEcB8moVfW%2FMW1HO4zfy9Pzucy%2FXybIcpX%2BNrFVVhAnJvyEBUuHXV2W%2FM%0ARPI8AirIJr011rWtqHc%3D%0A)

#### 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:

1. Acesse Gerenciar Sistema no seu painel de administração.
2. Selecione Widget.
Copie a “Chave de identificação da propriedade” exibida ali.

[![](https://storage.crisp.chat/users/helpdesk/website/-/c/e/2/0/ce20e3b5a903a800/1273e613-b72a-4ebd-b574-74287b_93iqso.png)](https://downloads.intercomcdn.com/i/o/qn4880pe/1357930041/19590c1e0f3472bd467e73103e3b/htms+4.png?expires=1752705000&signature=1e9d4858fc50a0cbababef9b67526b84d08e0730f1864a43fce61a06073d141f&req=dSMiEcB9nYFbWPMW1HO4zTjFuadQofZQudgT7kVvC6okR4guWxhv8C7G0jVF%0A7kmK%0A)

## 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



[![](https://storage.crisp.chat/users/helpdesk/website/-/9/1/2/e/912e9e4d323f880/92805452-a364-4d0b-81a1-5b3489_1yml5l9.png)](https://downloads.intercomcdn.com/i/o/qn4880pe/1357933245/2cb5a91bca7eda8d87774d5e90f4/5+correctamente.png?expires=1752705000&signature=1fa819e699e5d170b3dfb03a6bd21f31f63c43e832ab1cf567810609e3528854&req=dSMiEcB9noNbXPMW1HO4zcaEHSEeRFRVH7SKSdNUSYhZ3JrtPDi7TJtbQKhm%0ALJ1XSKgn7vJ%2BqLB0veU%3D%0A)

Certifique-se de substituir “YOUR_SECRET_KEY_HERE” pela chave secreta da sua propriedade que você obteve do sistema.