Loading
Esta página ensinará como integrar um software de agendamento de compromissos na systeme.io.
Você precisará de:
- uma conta da systeme.io
- uma página de funil de vendas
- uma conta do Calendly, TidyCal ou YouCanBook.me
O seguinte método pode ser utilizado com Calendly, TidyCal ou YouCanBook.me
Vamos usar o Calendly como exemplo.
1. Em sua conta do Calendly:
Gere e copie o código HTML do seu agendamento
2. Em sua conta da systeme.io:
Adicione o elemento "Código HTML" à sua página
Insira o código fornecido por seu software de calendário no elemento HTML que você adicionou, depois salve o código e sua página.
Finalmente, ao pré-visualizar sua página, você verá o calendário do Calendly.
Observação: este recurso é muito útil porque permite adicionar o pixel do Facebook ao seu agendamento de compromissos, o que nem sempre é possível diretamente com alguns softwares de agendamento de compromissos.
Como integrar o Calendly a um pop-up
Siga todos os passos anterior e, em seguida:
- No código customizado do seu pop-up
Adicione um atributo id ao elemento div fornecido pelo Calendly. Você pode usar qualquer valor, mas certifique-se de que ele seja exclusivo para a página.
- Na página principal do editor
Vá até as Configurações da página, clique em Editar código do cabeçalho e cole o código desta forma:
<script>
document.addEventListener('open_popup', function() {
Calendly.initInlineWidget({
url: 'https://calendly.com/YOUR_CALENDLY_LINK',
parentElement: document.getElementById('calendly-container')
})
})
</script>
Se você escolheu um nome de id diferente de calendly-container, certifique-se de substituí-lo depois de colar o código.
Como integrar o TidyCal em um pop-up
Para maior clareza, vamos ilustrar com um exemplo:
- Um código como o exemplo abaixo foi fornecido pelo TidyCal para integração:
<div class="tidycal-embed" data-path="YOUR_DATA_PATH"></div> <script src="https://asset-tidycal.b-cdn.net/js/embed.js"></script>
- A primeira coisa que você precisa fazer é adicionar um elemento HTML ao pop-up onde deseja adicionar seu calendário, depois copiar esta linha
<div class="tidycal-embed" data-path="YOUR_DATA_PATH"></div>e colar em seu elemento HTML.
- Em seguida, vá até as configurações da página e clique em "editar código de rodapé". Você precisa colar o restante do código fornecido pelo TidyCal
<script src="https://asset-tidycal.b-cdn.net/js/embed.js"></script>, além de adicionar o snippet abaixo:
<script>
document.addEventListener('open_popup', function(){
const embedTarget = document.querySelector('div.tidycal-embed')
window.TidyCal?.init(embedTarget)
})
</script>
