Como integrar o Calendly no meu site WordPress com Elementor

Antes de mais nada queremos te explicar o que é o Calendly. É uma plataforma de agendamento de reuniões/eventos aberta para as pessoas poderem solicitar determinado horário e dia para falar com você. É uma ferramenta que se conecta de forma fácil a outras ferramentas como Zoom e Google Agenda.

Diferente de um Google Agenda, com o Calendly a pessoa só irá ver os horário disponíveis da sua agenda para solicitar uma reunião, sem que você precise abrir sua agenda em si. Por exemplo, que as 14 horas você tem dentista, apenas não irá aparecer este horário disponível.

Assim para essa integração mais simple, você poderá fazer com o plano gratuito. Mas se sentir necessidade de maiores customizações na sua conta poderá contratar um dos planos pagos.

Passo a passo configurar o Calendly

Primeiramente você já deve ter sua conta criada, para depois disponibilizar no seu site. No processo de criar a conta ele já irá oferecer opções para conecta ao Google Agenda e outras opções também.

Caso você queira começar apenas integrando a o Google Agenda, tudo bem, você poderá incluir depois outras integrações, é só clicar em Integrations no menu principal do seu painel.

integrações

Depois você deve fazer as devidas configurações, você irá definir o tempo para cada reunião/momento da sua agenda que irá disponibilizar. Por padrão ele sugere agenda de 15 minutos, 30 minutos ou 60 minutos. Porém, você tem a opção de criar um novo tipo de evento clicando em New Event Type.

visão geral

Agora você irá clicar em uma das opções para configurar todas as informações.

Uma muito importante é a língua que seu visitante irá ver a agenda, pois como você já deve ter notado a ferramenta é em inglês, mas é possível escolher a língua em que será disponibilizado ao visitante.

Para isso, você irá clicar no cartão que irá usar e já no topo aparecerá Invitee language, ali você irá selecionar a língua.

escolha da língua do visitante

Agora defina também um nome específico para a agenda, seja mentoria, agenda aberta ou outra nomenclatura importante para você.

nome

Por padrão você irá receber sempre notificações após alguém marcar uma reunião e como você já terá sincronizado com a sua ferramenta de agenda pessoal – Google Agenda, por exemplo – automaticamente irá aparecer na sua agenda pessoal. Então não há mais muitas configurações necessárias.

Lembre-se sempre de salvar depois de ter feito uma alteração.

Como inserir no seu site

Lembre-se de já estar com painel administrativo do seu site aberto!

Agora você irá voltar ao painel principal e irá clicar no botão Share do card referente a agenda que você quer colocar no site.

share

Depois irá aparecer três opções de compartilhamento: Share a link (link compartilhável), Add times to email (para conecta ao e-mail) e Add to website (adicionar ao site), que é o que você irá escolher para colocar no seu site.

Então terá novamente três opções, cada uma delas é para um visualização diferente no seu site.

A Embed inline é para aparecer em formato de calendário no seu site, a Widget popup é para aparecer um popup flutuante e por último o Text popup é um texto que irá abrir depois um popup direcionando a outra página para o agendamento.

Você deve selecionar o que melhor se encaixa na sua estratégia, você irá selecionar e depois clicar em Continue.

embed inline

Assim, para este exemplo, iremos lhe mostrar no formato Embed inline.

Após ter selecionado o Embed inline e clicado em continue você irá editar o visual do calendário no seu site. Recomendamos que tente utilizar as cores que já são utilizada no seu site para que não fique tão descontado ao visual.

Em Background Color você irá escolher a cor de fundo do calendário, em Text Color você irá escolher a cor do texto e em Button & Link Color será a cor referente a botões e área com link.

Então, como todas as opções selecionadas é só clicar em Copy Code.

configurações

Agora você irá ao painel administrativo do seu site, na página que quer inserir o calendário e clicar para editar com Elementor.

painel administrativo

Agora você irá abrir um nova seção – confira aqui caso você não sabia criar uma nova seção – e inserir um campo de shortcode. Ai neste campo de texto você irá inserir o código que você copiou no Calendly.

OBS: é importante que o campo seja de shortcode, se for em outro formato não irá reproduzir o calendário como na imagem abaixo.

shortcode no elementor para inserir o calendly

Por fim é só clicar em atualizar e sua agenda estará disponível corretamente para agendamentos.

Aproveite e confira os outros tutoriais da categorias Integrações, aqui.