Esta página te enseña a integrar un software para programar citas en systeme.io.

Necesitarás:

• Una cuenta en systeme.io
• La página en un túnel de ventas
• Una cuenta en Calendly, TidyCal o en YouCanBook.me

El siguiente método funciona con Calendly, TidyCal y YouCanBook.me

Usaremos Calendly como ejemplo.

1. En tu cuenta de Calendly: genera y copia el código para insertar tu calendario de citas/eventos.

2. En tu cuenta de systeme.io:

Agrega el elemento código HTML en tu página.

Pega el código generado por tu software de calendario en el elemento código HTML que acabas de agregar, luego guarda la página.

Por último, al previsualizar tu página, verás el calendario de Calendly.

Nota: esta función es muy útil porque te permite agregar el píxel de Facebook a tu página de reservas, lo cual no siempre es posible directamente con algunas plataformas de reservas.

Cómo integrar Calendly a una ventana emergente

Sigue todos los pasos previos, pero agrega un elemento HTML en la ventana donde deseas que aparezca el calendario.

1. En el código personalizado de la ventana emergente

Agrega el atributo id  al elemento div  proporcionado por Calendly. Puedes usar cualquier valor, solo asegúrate de que sea exclusivo para la página.

2. En la página principal del editor

Ve a Configuración, haz clic en Editar código del pie de página.

<script>
  document.addEventListener('open_popup', function() {
    Calendly.initInlineWidget({
      url: 'https://calendly.com/YOUR_CALENDLY_LINK',
      parentElement: document.getElementById('calendly-container')
    })
  })
</script>

Si eliges un nombre de id  distinto a calendly-container  asegúrate de reemplazarlo luego de pegar el código.

Cómo integrar TidyCal en una ventana emergente

Aquí un ejemplo:

1. TidyCal genera un código de inserción similar al de abajo:

<div class="tidycal-embed" data-path="YOUR_DATA_PATH"></div>
<script src="https://asset-tidycal.b-cdn.net/js/embed.js"></script>

2. Primero, agrega un elemento código HTML a tu ventana emergente. Luego, copia la siguiente línea de tu código de TidyCal: <div class="tidycal-embed" data-path="YOUR_DATA_PATH"></div>   y pégala dentro de tu elemento HTML.

3. Luego, ve a la configuración de la página y haz clic en "Editar código del pie de página". Tienes que pegar el resto del código proporcionado por TidyCal <script src="https://asset-tidycal.b-cdn.net/js/embed.js"></script>   e incluir el siguiente fragmento:

<script>
  document.addEventListener('open_popup', function(){
    const embedTarget = document.querySelector('div.tidycal-embed')
    window.TidyCal?.init(embedTarget) 
  })
</script>