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:

1. 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.

2. 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:

1. 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>

2. 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.

3. 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>

Atualizado em: 23/05/2025