Incorporar seu calendário de agendamento diretamente em sites e landing pages elimina fricção no processo de conversão, permitindo que visitantes agendem reuniões sem sair da página. A Marketek oferece diferentes formas de embed para atender a diversos cenários.
Opções de Embed Disponíveis
A Marketek disponibiliza três métodos para incorporar calendários:
| Método | Melhor Para | Personalização |
|---|---|---|
| Iframe | Sites externos, WordPress, Wix | Dimensões e estilo do container |
| Widget inline | Páginas da Marketek | Total — integrado ao editor visual |
| Link direto | E-mails, SMS, redes sociais | Parâmetros na URL |
Embed via Iframe em Sites Externos
📌 Passo 1: Obter o código de embed
Acesse Menu > Calendários, selecione o calendário desejado e clique na aba Compartilhar. Na seção Código de Embed, copie o snippet do iframe.
📌 Passo 2: Inserir no site
Cole o código copiado no HTML da página onde deseja exibir o calendário. O snippet padrão se parece com:
<iframe src="https://seu-dominio.marketek.com.br/widget/booking/SEU-ID" style="width:100%; border:none; overflow:hidden;" scrolling="no" id="marketek-calendar"></iframe>
📌 Passo 3: Ajustar dimensões
Defina a largura como 100% para comportamento responsivo. A altura ideal vária conforme o tipo de calendário, mas valores entre 700px e 900px costumam funcionar bem para a maiória dos layouts.
💡 Dica: Adicione o script de auto-resize fornecido pela Marketek para que a altura do iframe se ajuste automaticamente ao conteúdo exibido.
Embed em Páginas da Marketek
Se você está construindo sua landing page dentro da própria Marketek, o processo é ainda mais simples:
📌 Passo 1: Adicionar elemento de calendário
No editor de páginas, arraste o elemento Calendário da barra de elementos para a posição desejada na página.
📌 Passo 2: Selecionar o calendário
Nas propriedades do elemento, escolha qual calendário será exibido. Todos os calendários da conta estarão disponíveis na lista.
📌 Passo 3: Personalizar aparência
Ajuste cores, espaçamento e estilo diretamente pelo editor visual para que o calendário combine perfeitamente com o design da página.
Comportamento Responsivo
O widget de calendário da Marketek é projetado para se adaptar a diferentes tamanhos de tela. Em dispositivos móveis, a grade de horários muda automaticamente para um layout de lista vertical, facilitando a seleção com o dedo.
⚠️ Importante: Ao incorporar via iframe em sites de terceiros, certifique-se de que o container pai tenha largura suficiente (mínimo de 320px) para garantir boa usabilidade em dispositivos móveis.
Passando Parâmetros UTM
Você pode passar parâmetros UTM e outros dados pela URL do calendário para rastrear a origem dos agendamentos. Adicione os parâmetros à URL do embed:
https://seu-dominio.marketek.com.br/widget/booking/SEU-ID?utm_source=google&utm_medium=cpc&utm_campaign=campanha-verao
Os parâmetros serão capturados automaticamente e associados ao contato que fizer o agendamento, permitindo análise de ROI por canal em Menu > Relatórios.
Personalizando o Visual do Embed
- Cor primária: Defina nas configurações do calendário para que botões e destaques sigam a identidade visual da sua marca.
- Logo: Adicione seu logotipo para reforçar o branding durante o processo de agendamento.
- Mensagem de boas-vindas: Configure um texto introdutório que aparecerá acima dos horários disponíveis.
- Campos do formulário: Escolha quais informações coletar antes de confirmar o agendamento.
🤖 Ficou com alguma dúvida?
Converse com o TekBot, nosso assistente IA especialista em Marketek. Ele pode te ajudar com configurações, dúvidas técnicas e melhores práticas — 24h por dia.