Всплывающие окно на конструкторе сайтов Битрикс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/


Поделитесь с друзьями:
Оставить комментарий
#12
Я люблю вас!!!
#13
и мы тебя! ^_^
#14
Добрый день, крутая задумка) Жаль так и не получилось запустить. Если в конструкторе выбирать тип ссылки всплывающее окно - открывает в нем дубль сайта, если новое - открывает сайт в новом окне, если в этом окне - тишина.
#15
В настройках кнопки выбираем тип ссылки "Ссылка", "открывать в этом окне", адрес ссылки "#callb" в примере. Сам скрипт Битрикс24 и наш кастомный скрипт в конце страницы html. Только что проверили, все по прежнему работает)
#16
Еще, как вариант, ссылки глючат когда используется шаблон с хеадером и подвалом, но html разместил в основной блок...:) тогда, наверное, либо барабашка либо все-таки кривые ручки.

<script id="bx24_form_button" data-skip-moving="true">
(function(w,d,u,b){w['Bitrix24FormObject']=b;w[b]= w[b]|| function(){arguments[0].ref=u;
(w[b].forms=w[b].forms||[]).push(arguments[0])};
if(w[b]['forms']) return;
var s=d.createElement('script');s.async=1;s.src=u+'?'+(1*new Date());
var h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})(window,document,'https://interimgroup.bitrix24.by/bitrix/js/crm/form_loader.js','b24form');

b24form({"id":"4","lang":"ru","sec":"2cj0e8","type":"button","click":""});
</script><button class="b24-web-form-popup-btn-4"style="display:none">Мы перезвоним вам</button>
<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-4')[0].click()
;});}); </script>
#17
Возможно проблемы с шаблоном или другими скриптами на странице. Проверьте свой скрипт, обратите внимание, отсутствует пробел перед style="display:none". Можете написать название шаблон, мы его тоже проверим)
#18
Спасибо) Сама кнопка как раз отрабатывает, то есть появляется при добавлении кода кнопки и убирается style="display:none" (поправил пробел, но все работало). Сам сайт не из шаблона, формировался с пустого листа. Скриптов больше (кроме tag manager'а для отслеживания конверсий) нет... Вообщем, говорю - барабашка)) Но все равно спасибо!
#19
ВАЖНО: проверил на одностраничном тестовом лендинге - РАБОТАЕТ!
Получается, что если сайт одностраничный - ОТЛ.
Если сайт многостраничный с добавлением общего меню и подвала для всех страниц - нет.
#20
Интересное открытие, у нас в тесте сайт многостраничный без общего меню и общего подвала)
#21
Простите за этот "спам", но я ошибся, проблема не в общем меню и подвале. На всех кнопках РЕШЕНИЕ РАБОТАЕТ. Не работает в случае кликабельной картинки - проверил на нескольких вариантах.
#22
Отлично) Уверен, многим пригодится эта информация! Для картинки можете попробовать поиграть с изменением селектора a[href="#callb"], возможно тоже будет работать.
#23
Здравствуйте! Хотели настроить как описано в статье, но код сейчас другого вида, не подскажите как в таком случае настроить открытие формы в сплывающем окне?

Код:
<script data-b24-form="click/17/uqgv6f" data-skip-moving="true">
(function(w,d,u){
var s=d.createElement('script');s.async=true;s.src=u+'?'+(Date.now()/180000|0);
var h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);
})(window,document,'https://cdn-ru.bitrix24.ru/b16204584/crm/form/loader_17.js');
</script>
#24
В принципе ничего не изменилось, теперь генерируется только код вызова модального окна, а код кнопки вы должны создать самостоятельно ниже, хоть по нашему примеру выше <button> и дать название любого класса class="".

<script data-b24-form="click/7/q43а9p" data-skip-moving="true"> (function(w,d,u){ var s=d.createElement('script');s.async=true;s.src=u+'?'+(Date.now()/180000|0); var h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h); })(window,document,'https://cdn-ru.bitrix24.ru/b1234567/crm/form/loader_11.js'); </script>

<button class="callpopup" style="display: none;">Вызвать модальное окно</button>

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

Проверьте, работает?