Calendly: como inserir unha ventá emerxente de programación ou un calendario incorporado no seu sitio web ou sitio de WordPress

Widget de programación de Calendly

Hai unhas semanas, estaba nun sitio e notei cando fixen clic nunha ligazón para programar unha cita con eles que non me levaron a un sitio de destino, había un widget que publicaba o Calendario planificador directamente nunha ventá emerxente. Esta é unha excelente ferramenta... manter a alguén no teu sitio é unha experiencia moito mellor que reenvialos a unha páxina externa.

Que é Calendly?

Calendario intégrase directamente co teu Espazo de traballo de Google ou outro sistema de calendario para crear formularios de programación que sexan bonitos e fáciles de usar. O mellor de todo é que incluso podes limitar o tempo que deixas que alguén se conecte contigo no teu calendario. Como exemplo, moitas veces teño só un par de horas dispoñibles en días específicos para reunións externas.

Usar un programador como este tamén é unha experiencia moito mellor que simplemente cubrir un formulario. Para min Consultoría de transformación digital, temos eventos de vendas en grupo onde o equipo de liderado está na reunión. Tamén integramos a nosa plataforma de reunións web en Calendly para que as invitacións do calendario inclúan todas as ligazóns de reunións en liña.

Calendly lanzou un script de widgets e unha folla de estilo que fai un gran traballo para incorporar o formulario de programación directamente nunha páxina, aberto desde un botón ou mesmo desde un botón flotante no pé do seu sitio. O guión de Calendly está ben escrito, pero a documentación para integralo no teu sitio non é boa para nada. De feito, sorpréndeme que Calendly aínda teña que publicar os seus propios complementos ou aplicacións para diferentes plataformas.

Isto é incriblemente útil. Tanto se estás en servizos domésticos e queres ofrecer aos teus clientes un medio para programar a súa cita, un paseador de cans, unha empresa SaaS que quere que os visitantes programen unha demostración ou unha gran corporación con varios membros que debes programar facilmente... Calendly e os widgets de inserción son unha excelente ferramenta de autoservizo.

Como inserir Calendly no teu sitio

Estrañamente, só atoparás indicacións nestas insercións en Tipo de evento nivel e non o nivel de evento real na túa conta de Calendly. Atoparás o código no menú despregable para a configuración do tipo de evento na parte superior dereita.

incrustar calendosamente

Unha vez que faga clic niso, verá as opcións para os tipos de insercións:

incorporar texto emerxente

Se colles o código e o incorporas onde queiras no teu sitio, hai algúns problemas.

  • Se queres chamar a un par de widgets diferentes nunha soa páxina... quizais teñas un botón que inicie o programador (Texto emerxente) así como o botón do pé de páxina (Widxeto emerxente)... engadirás a folla de estilo e un script. dos tempos. Iso é innecesario.
  • Chamar un script externo e un ficheiro de folla de estilo en liña no teu sitio non é o medio máis ideal para engadir o servizo ao teu sitio.

A miña recomendación sería cargar a folla de estilo e Javascript na súa cabeceira... despois use os outros widgets onde teñan sentido no seu sitio.

Como funcionan os widgets de Calendly

Calendario ten dous ficheiros que son necesarios para inserir no teu sitio, unha folla de estilo e javascript. Se vas inserir estes no teu sitio, engadiría o seguinte na sección de cabeceira do teu 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>

Non obstante, se estás en WordPress, a mellor práctica sería usar o teu functions.php para inserir os scripts utilizando as mellores prácticas de WordPress. Entón, no meu tema fillo, teño as seguintes liñas de código para cargar a folla de estilo e o 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' );

Iso vai cargar estes (e almacenalos) en todo o meu sitio. Agora podo usar os widgets onde me gustaría.

Botón de pé de páxina de Calendly

Quero chamar ao evento específico en lugar do tipo de evento no meu sitio, polo que estou cargando o seguinte script no meu pé:

<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 Calendario o guión divídese do seguinte xeito:

  • URL – o evento exacto que quero cargar no meu widget.
  • Texto – o texto que quero que teña o botón.
  • cor - a cor de fondo do botón.
  • cor do texto - a cor do texto.
  • marca – eliminación da marca Calendly.

Menú emerxente de texto de Calendly

Tamén quero que estea dispoñible en todo o meu sitio mediante unha ligazón ou botón. Para iso, utilizas un evento onClick no teu Calendario texto de ancoraxe. O meu ten clases adicionais para mostralo como un botón (non se ve no seguinte exemplo):

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

Esta mensaxe pódese usar para ter varias ofertas nunha única páxina. Quizais teñas 3 tipos de eventos que queres inserir... só tes que modificar o URL para o destino apropiado e funcionará.

Menú emerxente de incrustación en liña de Calendly

A inserción en liña é un pouco diferente xa que utiliza un div que se chama especificamente por clase e destino.

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

De novo, isto é útil porque podes ter varios divs con cada un Calendario planificador na mesma páxina.

Nota lateral: gustaríame que Calendly modificase a forma en que se implementou para que non tivese que ser tan técnico. Sería xenial que só puideses ter unha clase e despois usar o href de destino para cargar o widget. Iso requiriría unha codificación menos directa entre os sistemas de xestión de contidos. Pero... é unha gran ferramenta (por agora!). Por exemplo, un complemento de WordPress con códigos curtos sería ideal para un entorno de WordPress. Se estás interesado, Calendly... Podería crear isto facilmente para ti!

Comeza con Calendly

Descargo de responsabilidade: son usuario de Calendly e tamén afiliado ao seu sistema. Este artigo ten ligazóns de afiliados ao longo do artigo.