Calendly: como incorporar um pop-up de agendamento ou calendário incorporado em seu site ou site WordPress

Widget de agendamento do Calendly

Algumas semanas atrás, eu estava em um site e percebi quando cliquei em um link para agendar um encontro com eles que não fui levado a um site de destino, havia um widget que publicou o Calendly programador diretamente em uma janela pop-up. Esta é uma grande ferramenta ... mantendo alguém em seu site é uma experiência muito melhor do que encaminhá-los para uma página externa.

O que é o Calendly?

Calendly integra-se diretamente com o seu Espaço de trabalho do Google ou outro sistema de calendário para construir formulários de agendamento bonitos e fáceis de usar. O melhor de tudo é que você pode até limitar o tempo que permite que alguém se conecte com você em sua agenda. Por exemplo, geralmente tenho apenas algumas horas disponíveis em dias específicos para reuniões externas.

Usar um agendador como esse também é uma experiência muito melhor do que apenas preencher um formulário. Para o meu empresa de consultoria em transformação digital, temos eventos de vendas em grupo onde a equipe de liderança está na reunião. Também integramos nossa plataforma de reunião na Web ao Calendly para que os convites do calendário incluam todos os links de reunião online.

O Calendly lançou um script de widget e uma folha de estilo que faz um ótimo trabalho ao incorporar o formulário de programação diretamente em uma página, aberta a partir de um botão ou mesmo de um botão flutuante no rodapé do seu site. O script do Calendly foi bem escrito, mas a documentação para integrá-lo ao seu site não é nada boa. Na verdade, estou surpreso que o Calendly ainda não publicou seus próprios plug-ins ou aplicativos para plataformas diferentes.

Isso é incrivelmente útil. Se você está em serviços domésticos e deseja fornecer um meio para seus clientes agendarem seus compromissos, um passeador de cães, uma empresa de SaaS que deseja que os visitantes agendem uma demonstração ou uma grande empresa com vários membros, você precisa agendar facilmente ... Calendly e os widgets incorporados são uma ótima ferramenta de autoatendimento.

Como incorporar o calendário em seu site

Estranhamente, você só encontrará instruções nesses incorporados no Tipo de evento nível e não o nível real do evento em sua conta do Calendly. Você encontrará o código na lista suspensa para as configurações do tipo de evento no canto superior direito.

incorporar calendariamente

Depois de clicar nele, você verá as opções para os tipos de incorporação:

inserir texto pop-up

Se você pegar o código e incorporá-lo onde quiser em seu site, existem alguns problemas.

  • Se você deseja chamar alguns widgets diferentes em uma única página ... talvez tenha um botão que inicie o agendador (Texto pop-up), bem como o botão de rodapé (widget pop-up) ... você vai adicionar a folha de estilo e criar um script de vezes. Isso é desnecessário.
  • Chamar um script externo e um arquivo de folha de estilo embutido em seu site não é o meio mais ideal de adicionar o serviço ao seu site.

Minha recomendação seria para carregar a folha de estilo e JavaScript no seu cabeçalho ... então usar os outros widgets onde eles fazem sentido em todo o site.

Como funcionam os widgets do Calendly

Calendly tem dois arquivos que são necessários para incorporar em seu site, uma folha de estilo e javascript. Se você for inseri-los em seu site, adicionaria o seguinte na seção head do seu HTML:

<link href="https://calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://calendly.com/assets/external/widget.js" type="text/javascript"></script>

No entanto, se você estiver no WordPress, a prática recomendada seria usar seu functions.php arquivo para inserir os scripts utilizando as melhores práticas do WordPress. Portanto, no meu tema filho, tenho as seguintes linhas de código para carregar a folha de estilo e o script:

wp_enqueue_script('calendly-script', '//assets.calendly.com/assets/external/widget.js', array(), null, true);
wp_enqueue_style('calendly-style', '//assets.calendly.com/assets/external/widget.css' );

Isso vai carregá-los (e armazená-los em cache) em todo o meu site. Agora posso usar os widgets onde quiser.

Botão de rodapé do Calendly

Quero chamar o evento específico em vez do tipo de evento em meu site, então estou carregando o seguinte script em meu rodapé:

<script type="text/javascript">window.onload = function() { Calendly.initBadgeWidget({ url: 'https://calendly.com/highbridge-team/sales', text: 'Schedule a Consultation', color: '#0069ff', textColor: '#ffffff', branding: false }); }</script>

Você verá o Calendly o script se divide da seguinte maneira:

  • URL - o evento exato que desejo carregar em meu widget.
  • Texto - o texto que desejo que o botão tenha.
  • Cor - a cor de fundo do botão.
  • cor do texto - a cor do texto.
  • marca - removendo a marca Calendly.

Texto pop-up do Calendly

Também quero que isso esteja disponível em meu site usando um link ou botão. Para fazer isso, você utiliza um evento onClick em seu Calendly texto âncora. Minas tem classes adicionais para mostrar-lo como um botão (não visto no exemplo abaixo):

<a href="#" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/highbridge-team/sales'});return false;">Schedule time with us</a>

Essa mensagem pode ser usada para ter várias ofertas em uma única página. Talvez você tenha 3 tipos de eventos que gostaria de incorporar ... apenas modifique a URL para o destino apropriado e funcionará.

Pop-up embutido do Calendly

A incorporação inline é um pouco diferente, pois utiliza uma div que é chamada especificamente por classe e destino.

<div class="calendly-inline-widget" data-url="https://calendly.com/highbridge-team/sales" style="min-width:320px;height:630px;"></div>

Novamente, isso é útil porque você pode ter vários divs com cada Calendly agendador na mesma página.

Observação lateral: gostaria que o Calendly modificasse a maneira como isso foi implementado para que não precisasse ser tão técnico. Seria ótimo se você pudesse apenas ter uma classe e, em seguida, usar o href de destino para carregar o widget. Isso exigiria menos codificação direta nos sistemas de gerenciamento de conteúdo. Mas ... é uma ótima ferramenta (por enquanto!). Por exemplo - um plugin WordPress com códigos de acesso seria ideal para um ambiente WordPress. Se você estiver interessado, Calendly ... Eu poderia facilmente construir isso para você!

Comece a usar o Calendly

Isenção de responsabilidade: eu sou um usuário do Calendly e também um afiliado do sistema. Este artigo possui links de afiliados em todo o artigo.