Es posible integrar un software programador de citas como Calendly, TidyCal o Youcanbookme

En esta página aprenderás cómo integrar un software para programar citas en systeme.io.

Necesitarás:

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

El siguiente método puede ser aplicado con Calendly, TidyCal y YouCanBook.me

Utilizaremos Calendly como ejemplo.

1. En tu cuenta de Calendly:

Genera y copiar el código HTML de tu calendario de citas. 

2. En tu cuenta de systeme.io:

Agrega el elemento "Código HTML" en tu página:


Inserta el código suministrado por tu software de calendario en el código HTML que hayas añadido, luego guarda el código y los cambios de tu página.

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


Nota: esta función es muy útil porque te permite añadir el píxel de Facebook a tu calendario de citas, lo cual no siempre es posible hacer directamente con algunos software de calendarios de citas.

Cómo integrar Calendly en una ventana emergente

Sigue todos los pasos previos y luego de eso

  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 que sea exclusivo para la página.

  1. En la página principal del editor

Dirígete a la sección Configuración , haz clic en Editar código del pie de página y pega este código:

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

Si decides usar tu propio valor id , insértalo en este código, en lugar de calendly-container .

Cómo integrar TidyCal en una ventana emergente

Para clarificar, lo ilustraremos con un ejemplo:

1. Un código como el siguiente será proporcionado por TidyCal para la integración :

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

2. Lo primero que debes hacer es agregar un elemento HTML en la ventana emergente en donde deseas agregar tu calendario, luego copiar esta línea <div class="tidycal-embed" data-path="YOUR_DATA_PATH"></div> y pegarla en tu elemento HTML.

  1. Luego, dirígete 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> así como agregar el siguiente fragmento.
<script>
  document.addEventListener('open_popup', function(){
    const embedTarget = document.querySelector('div.tidycal-embed')
    window.TidyCal?.init(embedTarget) 
  })
</script>