Как открыть чат, обратный звонок или форму Битрикс24 по клику на кнопку

Добавим на сайт простенький код, чтобы виджет Битрикс24 открывался по клику на кнопку или ссылку.

Рубрики
CRM

Задача проста до безумия: на сайте установлен виджет Битрикс24 – нужно при клике на кнопку или ссылку открыть чат, обратный звонок или форму связи. В самом Битрикс24 нет готового решения – воспользуемся небольшим кодом на jQuery. Результат получится такой:

Мы рассматриваем пример с запуском чата, но ниже подскажем, что поменять для запуска формы связи или обратного звонка.

Порядок действий

Добавим кнопке для запуска виджета Битрикс24 отдельный класс, например, open-sesame. Так мы случайно не будем открывать виджет с любой случайной кнопки. Код нашей кнопки будет выглядеть так:

<button class="btn btn_primary open-sesame">Открыть чат</button>

Теперь добавляем на нужную страницу(ы) такой код (подходит и для WordPress, придирчивого к оформлению jQuery):

<script>
(function($) {
$('.open-sesame').on('click', function(){
$('.b24-widget-button-openline_livechat span').trigger('click');
});
})(jQuery);
</script>

У нас в коде указан .b24-widget-button-callback span – при клике на кнопку откроется виджет чата. Для запуска виджета обратного звонка нужно будет указать .b24-widget-button-callback span, а для формы связи .b24-widget-button-crmform span.

Если не хотите использовать jQuery, вот пример на чистом JavaScript (в этот раз открываем форму связи):

<p>
<button class="btn btn_primary open-sesame-form">Открыть форму</button>
</p>
<script>
document.addEventListener("DOMContentLoaded", () => {
    let button = document.querySelector('.open-sesame-form');
    button.onclick = () => {
    document.querySelector('.b24-widget-button-crmform span').click();
  };
});
</script>

Где разместить код

Фактически, скрипт можно разместить сразу ниже кнопки, если он нужен только на одной странице.

Как у нас. Скриншот из редактора WordPress.

Если скрипт нужен на нескольких страницах, лучше добавить его в шаблон сайта. В нашем случае я бы добавил код в файл custom.js дочерней темы WordPress. У вас расположение может быть другим.

Почему код не работает

  1. Убедитесь, что на сайте подключён jQuery: ищите в коде страницы ссылку, которая заканчивается на jquery-NNN.js . Пример:
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  2. Запомните номер строчки с подключением jQuery: в коде он должен быть выше, чем скрипт для запуска виджета Битрик24.
  3. Проверьте, что вы расположили сам код скрипта ниже кнопки. Не обязательно сразу под кнопкой, как в нашем примере, – хоть в разделе <footer>. Главное, не забываем про совет #2.

Напишите нам в чат или оставьте комментарий, если что-то не получилось.

Добавить комментарий