Calendly: Cómo incrustar una ventana emergente de programación o un calendario incrustado en su sitio web o sitio de WordPress

Widget de programación de Calendly

Hace unas semanas, estaba en un sitio y noté que cuando hice clic en un enlace para programar una cita con ellos, no me llevaron a un sitio de destino, había un widget que publicaba el Calendario planificador directamente en una ventana emergente. Esta es una gran herramienta ... mantener a alguien en su sitio es una experiencia mucho mejor que reenviarlo a una página externa.

¿Qué es Calendly?

Calendario se integra directamente con su Espacio de trabajo de Google u otro sistema de calendario para crear formularios de programación que sean hermosos y fáciles de usar. Lo mejor de todo es que incluso puede limitar el tiempo que deja que alguien se conecte con usted en su calendario. Como ejemplo, a menudo tengo solo un par de horas disponibles en días específicos para reuniones externas.

Usar un programador como este también es una experiencia mucho mejor que simplemente completar un formulario. Para mi firma consultora de transformación digital, tenemos eventos de ventas grupales donde el equipo de liderazgo está en la reunión. También integramos nuestra plataforma de reuniones web a Calendly para que las invitaciones del calendario incluyan todos los enlaces de reuniones en línea.

Calendly ha lanzado un script de widget y una hoja de estilo que hace un gran trabajo al incrustar el formulario de programación directamente en una página, abierto desde un botón o incluso desde un botón flotante en el pie de página de su sitio. El script de Calendly está bien escrito, pero la documentación para integrarlo en su sitio no es nada bueno. De hecho, me sorprende que Calendly aún no haya publicado sus propios complementos o aplicaciones para diferentes plataformas.

Esto es increíblemente útil. Ya sea que se encuentre en servicios a domicilio y desee proporcionar un medio para que sus clientes programen su cita, un paseador de perros, una empresa de SaaS que desee que los visitantes programen una demostración o una gran corporación con varios miembros que debe programar fácilmente ... Calendly y los widgets integrados son una gran herramienta de autoservicio.

Cómo integrar Calendly en su sitio

Curiosamente, solo encontrará direcciones en estos incrustados en el Tipo de evento nivel y no el nivel de evento real dentro de su cuenta de Calendly. Encontrará el código en el menú desplegable para la configuración del tipo de evento en la parte superior derecha.

calendly incrustar

Una vez que haga clic en eso, verá las opciones para los tipos de incrustaciones:

insertar texto emergente

Si toma el código y lo inserta donde quiera en su sitio, hay algunos problemas.

  • Si desea llamar a un par de widgets diferentes en una sola página ... tal vez tenga un botón que inicie el programador (Texto emergente) así como el botón de pie de página (Widget emergente) ... va a agregar la hoja de estilo y el script un par de veces. Eso es innecesario.
  • Llamar a un archivo de hoja de estilo y script externo en línea en su sitio no es el medio más óptimo para agregar el servicio a su sitio.

Mi recomendación sería cargar la hoja de estilo y Javascript en su encabezado ... luego usar los otros widgets donde tengan sentido en su sitio.

Cómo funcionan los widgets de Calendly

Calendario tiene dos archivos que se necesitan para incrustar en su sitio, una hoja de estilo y javascript. Si va a insertarlos en su sitio, agregaría lo siguiente en la sección del encabezado de su HTML:

<link href="https://calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://calendly.com/assets/external/widget.js" type="text/javascript"></script>

Sin embargo, si está en WordPress, la mejor práctica sería utilizar su functions.php para insertar los scripts utilizando las mejores prácticas de WordPress. Entonces, en mi tema hijo, tengo las siguientes líneas de código para cargar la hoja de estilo y el script:

wp_enqueue_script('calendly-script', '//assets.calendly.com/assets/external/widget.js', array(), null, true);
wp_enqueue_style('calendly-style', '//assets.calendly.com/assets/external/widget.css' );

Eso los cargará (y los almacenará en caché) en todo mi sitio. Ahora puedo usar los widgets donde quiera.

Botón de pie de página de Calendly

Quiero llamar al evento específico en lugar del tipo de evento en mi sitio, así que estoy cargando el siguiente script en mi pie de página:

<script type="text/javascript">window.onload = function() { Calendly.initBadgeWidget({ url: 'https://calendly.com/highbridge-team/sales', text: 'Schedule a Consultation', color: '#0069ff', textColor: '#ffffff', branding: false }); }</script>

Verás el Calendario El guión se desglosa de la siguiente manera:

  • Enlance - el evento exacto que quiero cargar en mi widget.
  • Texto - el texto que quiero que tenga el botón.
  • Color - el color de fondo del botón.
  • color de texto - el color del texto.
  • branding - Eliminación de la marca Calendly.

Ventana emergente de texto de Calendly

También quiero que esté disponible en todo mi sitio mediante un enlace o botón. Para hacer esto, utiliza un evento onClick en su Calendario texto de anclaje. El mío tiene clases adicionales para mostrarlo como un botón (no se ve en el siguiente ejemplo):

<a href="#" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/highbridge-team/sales'});return false;">Schedule time with us</a>

Este mensaje se puede utilizar para tener varias ofertas en una sola página. Quizás tenga 3 tipos de eventos que le gustaría incrustar ... simplemente modifique la URL para el destino apropiado y funcionará.

Ventana emergente insertada en línea de Calendly

La inserción en línea es un poco diferente ya que utiliza un div que se llama específicamente por clase y destino.

<div class="calendly-inline-widget" data-url="https://calendly.com/highbridge-team/sales" style="min-width:320px;height:630px;"></div>

Nuevamente, esto es útil porque puede tener múltiples divs con cada Calendario planificador en la misma página.

Nota al margen: desearía que Calendly modificara la forma en que se implementó para que no tuviera que ser tan técnico. Sería genial si pudieras tener una clase y luego usar el href de destino para cargar el widget. Eso requeriría una codificación menos directa en todos los sistemas de gestión de contenido. Pero ... es una gran herramienta (¡por ahora!). Por ejemplo, un complemento de WordPress con códigos cortos sería ideal para un entorno de WordPress. Si estás interesado, Calendly ... ¡Podría construir esto fácilmente para ti!

Empiece con Calendly

Descargo de responsabilidad: soy un usuario de Calendly y también un afiliado de su sistema. Este artículo tiene enlaces de afiliados en todo el artículo.