Cómo añadir Calendly a un sitio de Shopify

Si tu inserción de Calendly no aparece en tu sitio de Shopify, sigue estos pasos para solucionar el problema.

Paso 1: confirma la configuración del código de inserción y del tema

1. En Calendly, copia el código de inserción en línea para el Tipo de evento.
2. En Shopify, ve a Tienda en línea > Temas.
3. Busca el tema activo y selecciona Acciones > Editar código.
4. Elige una de las siguientes opciones:
• Añade un nuevo bloque HTML personalizado o
• Crea un nuevo archivo de fragmento.
5. Si usas un fragmento, dale un nombre sencillo de referenciar después (como calendly).
6. Pega el código de inserción de Calendly en el fragmento o bloque HTML y selecciona Guardar.

Paso 2: haz referencia a la inserción en la plantilla de página

1. Abre la plantilla de página de Shopify en la que deseas mostrar la inserción de Calendly.
2. Añade el siguiente código en la parte inferior del archivo:
   
   
   include 'calendly'
   (Reemplaza 'Calendly' con el nombre que utilizaste si es diferente).
3. Guarda los cambios.

Algunos temas de Shopify ocultan elementos HTML vacíos, lo que puede evitar que se cierre la ventana emergente.

Solución: añade este código HTML después del código de inserción:

<style>
 .calendly-overlay .calendly-popup-close,
 .calendly-overlay .calendly-close-overlay {
  display: block ! importante;
 }
</style>

Si tu calendario parece cortado:

1. Aumenta la altura en el código de inserción:

   <div class="calendly-inline-widget"
   data-url="https​:​//calendl​y.com/YOUR​_EVENT"
   style="min-width:320px;height:1000px;">
   </div>

2. Si eso no lo soluciona, añade este CSS a tu tema de Shopify:
• Ve a Online Store > Edit code > Assets > theme.scss.liquid
• Agrega lo siguiente en la parte inferior:

  iframe {
  altura: 100vh ! importante;
  }

Esto obliga al iframe a utilizar toda la altura de la pantalla.