1. Centro de ajuda
  2. Integrações e aplicativos
  3. Opções de incorporação

Como adicionar o Calendly a um site da Shopify

Incorpore o Calendly ao seu site da Shopify para que os visitantes possam agendar horários com você sem sair da sua loja. A Shopify suporta incorporações inline, texto pop-up e widgets pop-up.

Este guia mostra como adicionar cada tipo de incorporação e resolver problemas comuns de exibição.

Antes de começar

Primeiro, gere seu código de incorporação do Calendly. Você pode incorporar:

  • Um tipo de evento específico ou
  • Sua página de reservas

Tipos de incorporação suportados do Shopify

O Shopify suporta três opções de incorporação Calendly:

  • Incorporação direta – Exibe sua agenda diretamente em uma página
  • Texto de pop-up – Um link de texto que abre sua agenda em uma janela pop-up
  • Widget pop-up – Um botão flutuante que abre sua agenda em qualquer página

Adicionar uma incorporação de texto direta ou pop-up

Para incorporar o Calendly em uma página específica da Shopify:

  1. No administrador do Shopify, vá para Loja online > Personalizar
  2. No menu à esquerda, selecione Adicionar seção
  3. Escolha Liquid personalizado
  4. À direita, cole seu código de incorporação do Calendly na caixa de texto
  5. Selecione Salvar

Isso funciona tanto para códigos de incorporação de texto diretos quanto para códigos pop-up.

Exiba um widget pop-up em todo o seu site

Para mostrar um botão flutuante do Calendly em todas as páginas:

  1. No administrador da Shopify, vá para Loja online > Temas
  2. Encontre seu tema e selecione o botão ...
  3. Selecione Editar código
  4. No menu à esquerda, escolha theme.liquid
  5. Encontre a tag <head>
  6. Adicione uma quebra de linha logo depois
  7. Cole seu código de widget pop-up do Calendly
  8. Selecione Salvar

Para verificar se está funcionando, selecione Visualizar loja.

Solucionar problemas de exibição do Shopify

Incorporação do Shopify não está sendo exibida

Se sua incorporação do Calendly não aparecer no seu site do Shopify, siga estas etapas para solucionar o problema.

Etapa 1 – Confirme seu código de incorporação e configurações de tema

  1. No Calendly, copie o código de incorporação direta para o seu tipo de evento.
  2. No Shopify, vá para Loja Online > Temas.
  3. Encontre seu tema ativo e selecione Ações > Editar Código.
  4. Escolha uma das seguintes opções:
    • Adicione um novo bloco HTML personalizado ou
    • Crie um novo arquivo de snippet.
  5. Se usar um snippet, nomeie-o como algo fácil de referenciar depois (como o Calendly).
  6. Cole o código de incorporação do Calendly no trecho ou bloco HTML e selecione Salvar.

Etapa 2 – Faça referência à incorporação no seu modelo de página

  1. Abra o modelo de página do Shopify onde você deseja exibir sua incorporação do Calendly.
  2. Adicione o seguinte código na parte inferior do arquivo:
    {% include 'calendly' %}

    (Substitua 'Calendly' pelo nome que você usou se for diferente.)

  3. Salve suas alterações.
O botão de fechar do pop-up não está funcionando

Alguns temas Shopify escondem elementos HTML vazios, o que pode impedir que o pop-up seja fechado.

Solução: adicione este HTML após o seu código de incorporação:

<style>
 .calendly-overlay .calendly-popup-close,
 .calendly-overlay .calendly-close-overlay {
  display: block ! importante;
 }
</style>
A incorporação direta não mostra altura completa

Se a sua agenda parecer cortada:

  1. Aumente a altura do seu código de incorporação: 
    <div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_EVENT"
style="min-width:320px;height:1000px;">
</div>
  2. Se isso não resolver o problema, adicione este CSS ao seu tema da Shopify:
    • Vá para Loja Virtual > Editar código > Ativos > theme.scss.liquid
    • Adicione o seguinte na parte inferior: 
      iframe {
altura: 100vh ! importante;
}

Isso força o iframe a usar toda a altura da tela.

Esse artigo foi útil?