Calendly: как встроить всплывающее окно с расписанием или встроенный календарь на свой веб-сайт или сайт WordPress

Виджет календарного планирования

Несколько недель назад я был на сайте и заметил, когда я щелкнул ссылку, чтобы назначить встречу с ними, что меня не привели на целевой сайт, там был виджет, который опубликовал Calendly планировщик прямо во всплывающем окне. Это отличный инструмент ... держать кого-то на своем сайте намного лучше, чем перенаправлять его на внешнюю страницу.

Что такое Calendly?

Calendly интегрируется напрямую с вашим Рабочая область Google или другую систему календаря для создания форм расписания, которые одновременно красивы и просты в использовании. Лучше всего то, что вы даже можете ограничить время, в течение которого вы позволяете кому-то общаться с вами в своем календаре. Например, у меня часто есть только пара часов в определенные дни для внешних встреч.

Использование такого планировщика также намного лучше, чем просто заполнение формы. Для моего консалтинговая фирма по цифровой трансформации, у нас есть групповые мероприятия по продажам, на которых собирается руководство. Мы также интегрируем нашу платформу веб-встреч в Calendly, чтобы приглашения календаря содержали все ссылки на онлайн-встречи.

Calendly запустил скрипт виджета и таблицу стилей, которые отлично справляются с встраиванием формы планирования непосредственно на страницу, открываемую с помощью кнопки или даже с плавающей кнопки в нижнем колонтитуле вашего сайта. Скрипт для Calendly написан хорошо, но документация по его интеграции на ваш сайт совсем не годится. На самом деле, я удивлен, что Calendly еще не опубликовал свои собственные плагины или приложения для разных платформ.

Это невероятно полезно. Независимо от того, работаете ли вы на дому и хотите предоставить своим клиентам возможность назначить встречу, выгуливаете собак, SaaS-компания, которая хочет, чтобы посетители запланировали демонстрацию, или крупную корпорацию с несколькими участниками, вам нужно легко запланировать ... а встроенные виджеты - отличный инструмент для самообслуживания.

Как встроить календарь на свой сайт

Как ни странно, вы найдете направления на этих вставках только в Тип события уровень, а не фактический уровень события в вашей учетной записи Calendly. Вы найдете код в раскрывающемся списке для настроек типа события вверху справа.

календарно вставлять

Как только вы нажмете на нее, вы увидите варианты типов закладных:

вставлять всплывающий текст

Если вы возьмете код и разместите его на своем сайте в любом месте, возникнет несколько проблем.

  • Если вы хотите вызвать несколько разных виджетов на одной странице ... возможно, у вас есть кнопка, запускающая планировщик (всплывающий текст), а также кнопка нижнего колонтитула (всплывающий виджет) ... вы собираетесь добавить таблицу стилей и написать пару сценариев. раз. В этом нет необходимости.
  • Вызов внешнего скрипта и файла таблицы стилей, встроенного в ваш сайт, - не самый оптимальный способ добавления службы на ваш сайт.

Я бы порекомендовал загрузить таблицу стилей и Javascript в ваш заголовок ... а затем использовать другие виджеты там, где они имеют смысл, на вашем сайте.

Как работают виджеты Calendly

Calendly имеет два файла, которые необходимы для встраивания на ваш сайт, таблицу стилей и javascript. Если вы собираетесь вставить их на свой сайт, я бы добавил следующее в раздел заголовка вашего 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>

Однако, если вы работаете в WordPress, лучше всего использовать ваш functions.php файл для вставки скриптов с использованием лучших практик WordPress. Итак, в моей дочерней теме у меня есть следующие строки кода для загрузки таблицы стилей и скрипта:

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' );

Это будет загружать их (и кэшировать) по всему моему сайту. Теперь я могу использовать виджеты там, где они мне нужны.

Кнопка нижнего колонтитула Calendly

Я хочу вызвать конкретное событие, а не тип события на моем сайте, поэтому я загружаю следующий скрипт в нижний колонтитул:

<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>

Вы увидите Calendly сценарий разбивается следующим образом:

  • URL - точное событие, которое я хочу загрузить в свой виджет.
  • Текст - текст, который я хочу, чтобы кнопка была.
  • цвет - цвет фона кнопки.
  • цвет текста - цвет текста.
  • брендинг - удаление бренда Calendly.

Всплывающее окно с текстом Calendly

Я также хочу, чтобы это было доступно на моем сайте с помощью ссылки или кнопки. Для этого вы используете событие onClick в своем Calendly якорный текст. У меня есть дополнительные классы для отображения его в виде кнопки (не показано в примере ниже):

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

Это сообщение можно использовать для размещения нескольких предложений на одной странице. Возможно, у вас есть 3 типа событий, которые вы хотели бы встроить ... просто измените URL-адрес для соответствующего места назначения, и он будет работать.

Встроенное всплывающее окно Calendly

Встроенное встраивание немного отличается тем, что использует div, который специально вызывается по классу и месту назначения.

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

Опять же, это полезно, потому что у вас может быть несколько div с каждым Calendly планировщик на той же странице.

Боковое примечание: я бы хотел, чтобы Calendly изменил способ реализации, чтобы он не был настолько техническим. Было бы здорово, если бы вы могли просто иметь класс, а затем использовать целевой href для загрузки виджета. Это потребует меньше прямого кодирования в системах управления контентом. Но… это отличный инструмент (пока!). Например, плагин WordPress с короткими кодами идеально подходит для среды WordPress. Если вам интересно, Calendly ... Я могу легко построить это для вас!

Начни с календаря

Отказ от ответственности: я являюсь пользователем Calendly, а также являюсь партнером их системы. В этой статье есть партнерские ссылки.