Пример элемента JavaScript OnClick для вызова произвольных скриптов

Кроме примеров JS в панели на этой странице содержимое элементов (иконка и название) расположены в строчку. Это делается через Расширенные настройки у элемента.

Открытие чата

Для примера мы возьмем JivoSite. У элемента вы выбираете тип JavaScript OnClick и в действие прописываете wpbar:open-chat.

А на страницу добавляете код, либо в блоке Произвольный HTML, либо в дочерней теме, либо через Clearfy Pro, подойдет любой вариант. Код нужно разместить в любом месте сайта до </body>.

<script>
(function () {
  // Открытие Jivo
  document.addEventListener('wpbar:open-chat', function () {
    if (typeof jivo_api !== 'undefined') {
      jivo_api.open();
    } else {
      console.warn('Jivo API не загружен');
      alert('Чат пока не загружен. Проверьте подключение Jivo.');
    }
  });
})();
</script>

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

Открыть всплывающее окно

В данном случае мы создали свой пример модального окна, но это может быть любое окно из любого плагина, главное, чтобы в нем была возможность открывать попап через JS.

Если вы используете My Popup, то в нем открытие попап делается через задание Дополнителного класса для элемента по инструкции.

Для элемента укажите тип JavaScript OnClick и укажите действие wpbar:demo-modal. И добавьте на страницу код.

p.s. В примере мы намеренно оставили минимальный функционал самого попап, вам он не нужен, если вы используете уже готовые всплывающие окна, оставьте только нижнюю часть в коде, которая начинается с document.addEventListener.

<script>
(function () {
  // Пример минимального всплывающего окна
  function ensureDemoModal() {
    var existing = document.getElementById('wpbar-demo-modal');
    if (existing) return existing;

    var modal = document.createElement('div');
    modal.id = 'wpbar-demo-modal';
    modal.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;z-index:99999;';
    modal.innerHTML =
      '<div style="max-width:24rem;margin:10vh auto;background:#fff;border-radius:.75rem;padding:1rem 1rem 1.25rem;">' +
        '<div style="font-weight:700;margin-bottom:.5rem;font-size: 1.3rem;">Демо-окно WPBar</div>' +
        '<div style="margin:1rem 0;">Это пример действия JavaScript onClick.</div>' +
        '<button type="button" id="wpbar-demo-modal-close" class="btn">Закрыть</button>' +
      '</div>';

    document.body.appendChild(modal);

    modal.addEventListener('click', function (e) {
      if (e.target === modal) modal.style.display = 'none';
    });
    modal.querySelector('#wpbar-demo-modal-close').addEventListener('click', function () {
      modal.style.display = 'none';
    });

    return modal;
  }
  // Конец примера минимального всплывающего окна


  // Вызов попап
  document.addEventListener('wpbar:demo-modal', function () {
  	// Тут замените вызов на свой
    ensureDemoModal().style.display = 'block';
  });

})();
</script>


<script>
(function () {
})();
</script>

Прокрутка до блока и подсветка

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

Создайте элемент JavaScript OnClick с действием wpbar:scroll-to-contacts. И добавьте на страницу скрипт:

<script>
(function () {
  // Скролл к блоку + подсветка
  document.addEventListener('wpbar:scroll-to-contacts', function () {
    var target = document.querySelector('#contacts');
    if (!target) {
      alert('Блок #contacts не найден');
      return;
    }
    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
    target.style.transition = 'box-shadow .25s ease';
    target.style.boxShadow = '0 0 0 .25rem rgba(34,84,255,.25)';
    setTimeout(function () { target.style.boxShadow = ''; }, 1400);
  });
})();
</script>

Контакты

Свяжитесь с нами удобным способом:

© 2026 WPBar