Открываем попап с формой связи Битрикс24 по клику и не дублируем код

Типичная ситуация для посадочной страницы: у нас несколько экранов с информацией и несколько кнопок с призывом к действию. И, предположим, нужно по клику на CTA-кнопку не просто прокручивать страницу к экрану с формой, а открывать форму во всплывающем окне.

Рассмотрим 2 варианта:

1. запускаем форму из виджета Битрикс24
2. запускаем отдельную форму Битрикс24

Запускаем форму из виджета Битрикс24 по клику на отдельные кнопки

В этом случае предполагается, что у вас на сайте уже установлен виджет Битрикс24, в котором кроме чата есть ещё и форма связи. В упрощённом виде страница выглядит примерно так:

Решим задачу с помощью JavaScript. Чтобы вам было проще ориентироваться в скрипте, вот структура контента страницы:

<div id="content">
    <section>
        <p>Вы находитесь на нашем сайте уже 0.7 секунды — пора бы что-нибудь и заказать</p>
        <button class="open-sesame">Купить</button>
    </section>
    <section>
        <p>Уже точно пора</p>
        <button class="open-sesame">Купить</button>
    </section>
    <section>
        <p>Сейчас или никогда!</p>
        <button class="open-sesame">Купить</button>
    </section>
</div>

Код JavaScript с комментариями:

//подготовим функцию, которая будет отслеживать клики по кнопкам на странице
let openWidgetForm = () => {
    //#content - это id контейнера, в котором есть несколько кнопок. Мог быть и какой-нибудь класс.
    const content = document.querySelector('#content');
    //отслеживаем клики
    content.onclick = (event) => {
        //тут укажем класс нашей кнопки
        let button = event.target.closest(".open-sesame");
        //клик был не по кнопке? тогда завершим выполнение скрипта
        if (!button) return; 
        //симулируем клик по виджету для запуска формы связи
        document.querySelector('.b24-widget-button-crmform span').click();
    };  
};

//мы никуда не спешим - будем запускать нашу функцию после полной загрузки страницы
window.addEventListener('load', () => {
    //запускаем нашу функцию
    openWidgetForm();
  });

Запускаем отдельную форму Битрикс24

Если по какой-то причине вам не подходит запуск формы из виджета, то можно добавить на страницу отдельную форму Битрикс24.

В инструкции Битрикс24 сказано так: добавить код формы перед кнопкой, по клику на которую и будет появляться модальное окно. Сколько кнопок — столько раз нужно добавить код формы. Можно, конечно, так и сделать, а можно поступить немного элегантнее.

Предположим, у вас в шапке сайта уже есть кнопка «Связаться» с кодом формы Битрикс24. Нет? Тогда добавим в футер. Если она портит дизайн — просто скроем её с помощью атрибута style="display:none;". Главное, что кнопка и код формы где-то есть.

Далее с помощью JavaScript мы действуем по аналогии с примером #1: посетитель кликает на одну из кнопок в нашем контенте, а мы это отслеживаем и симулируем клик на основной кнопке с кодом формы. Как итог: посетитель видит всплывающее окно.

В примере ниже основная кнопка в хедере.

Примерная структура такой страницы:

<header>
    <div class="logo"></div>
    <div class="menu"></div>
    <script data-b24-form="">...Тут скрипт формы из Битрикс24...</script>
    <button>Основная кнопка</button>
</header>

<div id="content">
    <section>
        <p>Вы находитесь на нашем сайте уже 0.7 секунды - пора бы что-нибудь и заказать</p>
        <button class="open-sesame">Купить</button>
    </section>
    <section>
        <p>Уже точно пора</p>
        <button class="open-sesame">Купить</button>
    </section>
    <section>
        <p>Сейчас или никогда!</p>
        <button class="open-sesame">Купить</button>
    </section>
</div>

Код JavaScript:

//подготовим функцию, которая будет отслеживать клики по кнопкам на странице
let openB24Form = () => {
    //#content - это id контейнера, в котором есть несколько кнопок. Мог быть и какой-нибудь класс.
    const content = document.querySelector('#content');
    //отслеживаем клики
    content.onclick = (event) => {
        //тут укажем класс нашей кнопки
        let button = event.target.closest(".open-sesame");
        //клик был не по кнопке? тогда завершим выполнение скрипта
        if (!button) return; 
        //симулируем клик по основной кнопке для запуска формы 
        document.querySelector('header button').click();
    };  
};

//запускаем нашу функцию после полной загрузки страницы
window.addEventListener('load', () => {
    //запускаем нашу функцию
    openB24Form();
  });