Como adicionar o Koalendar a um site do Unbounce
Adicione agendamento sem complicações a qualquer página de destino do Unbounce com um simples copiar e colar. Sem integrações adicionais — tudo o que você precisa já está no Koalendar e no Unbounce.
📑 Menu
- 📋 Passo 1 – Copie o código de incorporação
- 📝 Passo 2 – Cole no Unbounce
- 🛠️ Resolução de problemas
- 🤔 Qual estilo de incorporação você deve usar?
📋 Passo 1 – Copie o código de incorporação
- No painel do Koalendar, clique em “Compartilhar” ao lado da página de reservas que você deseja incorporar.
- Selecione “Adicionar ao site”.
- Escolha um estilo de incorporação e clique em “Copiar código”.
| Estilo incorporado | O que faz |
|---|---|
| Inserção direta 🖥️ | Exibe o calendário de reservas diretamente na página inicial. |
| Widget pop-up 📍 | Adiciona um botão flutuante “Reservar agora” que abre uma janela pop-up com o calendário. |
| Janela pop-up ao clicar 🔗 | Transforma qualquer link ou botão em um calendário pop-up. |
💡 Personalize as cores, o texto e a posição antes de copiar, para que fique de acordo com o seu design do Unbounce.
📝 Passo 2 – Cole no Unbounce
Opção A – Inserção direta ou janela pop-up ao clicar 🔧
- No Unbounce Page Builder, arraste um bloco HTML para o local da página onde deseja que o calendário (ou o gatilho do pop-up) apareça.
- Clique duas vezes no bloco para abrir o editor de HTML personalizado.
- Cole o código do Koalendar que você copiou.
- Salve o código e, em seguida, visualize ou publique sua página.
Opção B – Widget pop-up (botão flutuante) 📌
- Abra sua página no Unbounce Page Builder e clique na guia “Javascripts” (canto inferior esquerdo).
- Clique em “Adicionar script” → dê a ele um nome como “Widget do Koalendar”.
- Cole o código do widget Koalendar e defina a opção “Posicionamento” como “Antes da tag de fechamento do corpo”.
- Concluído → Visualizar ou Publicar. O botão flutuante agora aparece em todas as variantes dessa página.
📝 Precisa de um widget para todo o site? Adicione o mesmo script a cada página de destino ou duplique a página assim que o widget estiver instalado.
🛠️ Resolução de problemas
| Tema | Solução rápida |
| O calendário não carrega no Preview | Publique a página — alguns scripts só são executados na URL ativa. |
| O widget desapareceu após a colagem | Certifique-se de que o script esteja localizado antes da tag de fechamento do corpo (e não no cabeçalho). |
| O link pop-up aparece, mas não abre | Verifique se o trecho do link e o script do Koalendar estão na mesma página. |
| O design parece um pouco apertado | Aumente a largura/altura do bloco HTML ou ajuste o preenchimento nas configurações de incorporação do Koalendar. |
🤔 Qual estilo de incorporação você deve usar?
| Objetivo | Melhor estilo |
| Seção exclusiva para reservas | Inserção direta 🖥️ |
| CTA sempre visível | Widget pop-up 📍 |
| Adicionar agendamento a um botão existente | Janela pop-up ao clicar 🔗 |
| Link rápido para fora da página | Link direto ↗️ |