Como incorporar o Koalendar no Webflow
Adicione reservas instantâneas a qualquer projeto do Webflow — basta copiar o código de incorporação do Koalendar → colá-lo no Webflow → publicar. Sem plugins, sem chaves de API.
📑 Menu
- Passo 1 – Copie o seu código do Koalendar
- Passo 2 – Cole no Webflow
- Resolução de problemas
- Que estilo devo escolher?
📋 Passo 1 – Copie seu código do Koalendar
- 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 os visitantes veem |
|---|---|
| Inserção direta 🖥️ | Calendário completo exibido diretamente na página. |
| Widget pop-up 📍 | Botão flutuante que abre o seu calendário em uma janela pop-up. |
| Texto/Botão do pop-up 🔗 | Qualquer link ou botão na sua página abre o calendário em uma janela pop-up. |
➕ Quer apenas um link normal? Ignore a opção de incorporação, copie a URL de compartilhamento do Koalendar e crie um hiperlink em qualquer texto, imagem ou botão para abrir seu agendador em uma nova aba.
🎨 Dica de design: personalize as cores, o texto e o posicionamento no Koalendar antes de copiar, para que tudo combine com o estilo do seu Webflow.
📝 Passo 2 – Cole no Webflow
A. Texto/botão incorporado no texto ou em janela pop-up (elemento incorporado)
- No Webflow Designer, abra a página onde você deseja inserir o calendário ou o gatilho.
- Arraste um elemento“Inserir código ” de + Adicionar → Elementos até o local desejado.
- Clique em “Editar código personalizado ” e cole o seu código do Koalendar.
- Salvar e fechar → Publicar seu site.
B. Widget pop-up (botão flutuante em todo o site)
- Vá para Configurações do projeto → Código personalizado → Código do rodapé.
- Cole o script do widget Koalendar.
- Salvar alterações → Publicar.
⏳ Atenção: o código personalizado só é executado no site publicado — não na visualização do Designer.
🛠️ Resolução de problemas
| Problema | Solução rápida |
| O calendário ou o widget não aparece no Designer | Publique o site e visualize a URL ativa — os scripts não são executados na tela do Designer. |
| O widget pop-up não está sendo exibido | Verifique se o script está no código do rodapé (ou em um elemento de incorporação) e publique novamente. |
| O texto do pop-up ou o link do botão aparece, mas não abre | Certifique-se de que tanto o snippet de acionamento quanto o script do Koalendar estejam na mesma página. |
| A altura do calendário embutido parece estar errada | Redimensione o elemento incorporado ou defina uma altura fixa no Koalendar antes de copiar. |
🤔 Que estilo devo escolher?
| Objetivo | Melhor estilo |
| Seção exclusiva para reservas | Inserção direta 🖥️ |
| Chamada à ação em todo o site | Widget pop-up 📍 |
| Adicionar agendamento a um CTA existente | Texto/Botão do pop-up 🔗 |
| Link rápido para fora da página | Um simples link para a URL do seu Koalendar |