Всплывающие окно на конструкторе сайтов Битрикс24

Всплывающие окно на конструкторе сайтов Битрикс24
Дата: 28.04.2020

Скорее всего вы столкнулись с проблемой, что обычным способом не получается вызвать popup-форму при нажатии на кнопку в стандартном блоке Битрикс24.

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

Инструкция:

Первым делом создайте CRM-форму, скопируйте код для «Клика по кнопке или ссылке» и вставьте в любой текстовый редактор

Screenshot_1.png

К данному коду вставьте ниже вот этот скрипт:

<script data-skip-moving="true">
var linkArr = document.querySelectorAll('a[href="#callb"]');
linkArr.forEach(function(link){link.addEventListener('click', function(){
document.getElementsByClassName('b24-web-form-popup-btn-7')[0].click()
;});}); </script>


Теперь важна ваша внимательность:

Screenshot_2.png

Все пункты указаны на скрине выше:

  1. #callb – это значение нужно поставить в поле «ссылка» на любой кнопке стандартного блока (по этой кнопке будет происходить вызов popup).

  2. b24-web-form-popup-btn-7 – значение берется из пункта 4 на скрине (это class кнопки предложен из CRM-формы, при создание новой формы он меняется)

  3. В нашем случае, если вставите код на сайт и опубликуете, но на сайте появится кнопка «Мы перезвоним вам», для того чтобы её убрать нужно вставить в button код style="display:none"

Последним этапом требуется скопировать полностью весь код, вставить в блок html на сайте и опубликовать. Если вы сделали все правильно, то теперь при нажатии на кнопку у вас будет всплывать нужная вам форма.

Наше digital-агентство Webstripe профессионально занимается разработкой сайтов любой сложности. Если у вас возникли трудности на каком-либо этапе или вам просто нужна консультация специалиста, то напишите нам в чат. Мы обязательно поможем вам и дадим все необходимые рекомендации.

Наше портфолио по разработке сайтов: https://www.webstripe.ru/works/development/


Поделитесь с друзьями:
Оставить комментарий