Você pode integrar o Calendly ao Merlin e marcar uma reunião em poucos passos. Para isso vamos utilizar o componente Código javascript e realizar algumas configurações.

Porém, antes de irmos ao passo a passo da integração, veja como projetamos nosso bot de exemplo para esse tutorial:

Vamos ao passo a passo:

• Crie os componentes que irão receber as informações do seu lead, neste exemplo foram criados 2 componentes Pergunta aberta para coletar as informações de nome e e-mail. Vejam que para cada informação um tipo de campo diferente foi selecionado. A imagem abaixo exemplifica como cada componente foi configurado:

  

• Adicione o componente Código javascript e configure-o da seguinte forma:

  • Nome: Abrir popup Calendly
  • Código:

  Calendly.initPopupWidget({
    url: '<https://calendly.com/link/agenda>',
    prefill: {
      name: "{{{nome}}}",
      email: "{{{email}}}"
    }
  })
  

  Importante: Altere a propriedade url com o seu próprio link de agendamento do Calendly. Utilize as propriedades name e email para já enviar as informações que coletou do seu lead e evitar que ele tenha de preencher novamente para agendar a reunião.

  Veja como ficou o nosso componente configurado:

  

• Configurado o bot, agora precisaremos alterar o formato de exibição do popup de agendamento para aparecer sobre o bot e importar o script do Calendly diretamente no Merlin. Para isso, acesse Configurações no menu superior:

  

  1. Na página de Configurações, clique em Customize o css.
  2. Cole o seguinte código no caixa de código preta:

  .calendly-overlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  
  .calendly-overlay .calendly-popup {
    height: 100%;
  }
  
  .calendly-overlay .calendly-popup .calendly-popup-content {
    height: 100%;
  }
  

  1. Clique em Aplicar para salvar as alterações.
  2. Ainda na página de Configurações, clique em Adicione um código javascript.
  3. Cole o seguinte código na caixa de código preta:

  <script>
  function isCalendlyEventScheduled(e) {
    return e.data.event && e.data.event == 'calendly.event_scheduled';
  }
   
  window.addEventListener(
    'message',
    function(e) {
      if (isCalendlyEventScheduled(e)) {
        setTimeout(function() {
  				Calendly.closePopupWidget();
        }, 3000)
      }
    }
  )
  </script>
  <script type="text/javascript" src="<https://assets.calendly.com/assets/external/widget.js>"></script>
  

  1. Clique em Aplicar para salvar as alterações.

  As configurações deverão estar iguais as imagens abaixo:

  

  

Pronto! Agora é só publicar o seu bot para testar e agendar suas reuniões pelo Merlin.

Referências

https://developer.calendly.com/how-to-display-the-scheduling-page-for-users-of-your-app

https://help.calendly.com/hc/en-us/articles/223147027