Como adicionar o Calendly a um site WordPress
Resposta rápida
Veja como adicionar seu agendador do Calendly a um site WordPress:
- Obtenha seu código de incorporação — No Calendly, selecione os três pontos ao lado do Tipo de evento ou da Página de destino que você quer compartilhar e selecione Adicionar ao site. Escolha como deseja que ele apareça e, em seguida, selecione Copiar código.
- Abra o painel do WordPress e vá para a página onde você quer que o agendador apareça.
- Adicione um bloco HTML personalizado (ou widget HTML personalizado) e cole o código de incorporação do Calendly.
- Selecione Publicar ou Atualizar, depois visualize a página para confirmar que o agendador é exibido corretamente.
Se o seu plano não suportar incorporações HTML, você pode adicionar um link para sua página de agendamento do Calendly em vez disso.
Use este guia passo a passo para incorporar o Calendly em seu site WordPress. Se você usa o WordPress.com, WordPress.org ou Elementor, encontrará o método certo abaixo. Adicione tipos de eventos ou páginas de agendamento usando incorporações diretas, pop-ups e muito mais.
Antes de começar
Verifique qual versão do WordPress você está usando
Se você não tem certeza se seu site utiliza WordPress.com ou WordPress.org:
- Faça login no seu painel do WordPress.
- Passe o mouse sobre o logotipo do WordPress no canto superior esquerdo.
- Se um menu suspenso aparecer, você está usando o WordPress.org.
- Se nenhum menu aparecer, você está usando o WordPress.com.
Obtenha seu código de incorporação do Calendly
Você precisará copiar seu código de incorporação da sua conta do Calendly. Você pode gerar um código para:
- Um único tipo de evento
- Sua página de reservas
Adicionar o Calendly ao WordPress.org
O WordPress.org oferece acesso total para incorporar o Calendly em uma página ou em todo o seu site.
- Observação: o código de incorporação do Calendly requer JavaScript. Alguns temas do WordPress podem não suportar JavaScript ou podem afetar a aparência da incorporação.
Opção 1 – Adicionar o Calendly a uma única página
- Faça login no WordPress e vá para o seu painel de administrador.
- Selecione Páginas e escolha uma página para editar.
- Selecione o ícone + para adicionar um novo bloco.
- Escolha HTML Customizado nas opções de formatação.
- Cole seu código de incorporação do Calendly.
- Selecione Visualizar para verificar o layout.
- Selecione Atualizar para salvar suas alterações.
Opção 2 – Adicione o widget pop-up a todas as páginas
- No painel de administração, vá para Aparência > Editor.
- Na barra lateral direita, em Arquivos do Tema, encontre Rodapé do Tema.
- Desça até a parte inferior do arquivo e localize a tag
</body>. - Cole seu código de widget pop-up do Calendly imediatamente acima dessa tag.
- Salve e visualize seu site.
Adicionar o Calendly ao WordPress.com
Você pode adicionar o Calendly ao WordPress.com, independentemente de seu plano incluir ou não suporte para extensões.
- Observação: os widgets incorporados do Calendly funcionam apenas com planos do WordPress.com que suportam extensões personalizados ou blocos de HTML. Se o seu plano não suportar isso, você ainda pode adicionar um link clicável à sua página da web.
Opção 1 – Para planos com suporte a extensões
- Vá para a página onde você deseja adicionar o Calendly.
- Selecione o ícone do + Inseridor de Blocos.
- Procure e insira o bloco HTML personalizado.
- Cole seu código de incorporação do Calendly.
- Visualize as alterações e selecione Atualizar para salvar.
Opção 2 – Para planos sem suporte a extensões
Você ainda pode vincular sua página do Calendly a partir de texto ou imagens.
- Ao editar sua página, destaque o texto e selecione o botão Inserir/editar link.
- Cole a URL na sua página de agendamento, um tipo de evento ou uma página de equipe.
- Para vincular uma imagem, selecione a imagem e siga as mesmas etapas.
Adicionar Calendly usando Elementor
Elementor funciona com WordPress.org e WordPress.com. Ele dá mais controle sobre o design da página.
- Abra sua página no editor do Elementor.
- Adicione um widget de Shortcode à tela.
- Na guia Conteúdo, cole seu código de incorporação completo do Calendly.
Para obter um guia visual, assista ao vídeo do Elementor: Como adicionar o Calendly com o Elementor.
Solucionar problemas de rolagem no Elementor
Vimos que o Elementor irá automaticamente adicionar overflow-y:auto como um estilo direto. A adição desse estilo pode criar um elemento de rolagem extra.
Para corrigir isso, certifique-se de que o overflow ou overflow-y esteja configurado como hidden. Por exemplo:
</style>.calendly-inline-widget { overflow-y: hidden ! important; }</style>