Como adicionar o Calendly a um site da Shopify

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.

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>

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​:​//calendl​y.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.