Как создать автоматический попап в WordPress на основе успешного действия пользователя

Автор: Антон Никитин | Опубликовано: 13.12.2025

Введение в автоматические попапы по событию в WordPress

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

Основные задачи, которые мы решим:

Отслеживание успешного действия пользователя (например, отправка формы).
Запуск попапа с кастомным контентом после этого события.
Использование минимального количества внешних плагинов с возможностью интеграции с популярными плагинами форм.

Выбор плагина для создания попапов: рекомендации и примеры

Для создания попапов в WordPress есть много плагинов, но не все позволяют запускать окно по пользовательскому событию. Рекомендуем обратить внимание на следующие решения:

My Popup — легкий и гибкий плагин с поддержкой триггеров по JS-событиям. Отлично подойдет для кастомных решений. Подробнее — https://wpshop.ru/my-popup/
Popup Maker — популярный бесплатный плагин с расширенными настройками триггеров и интеграцией с контактными формами.
Elementor Pro — если вы используете Elementor, его встроенный попап-редактор позволяет запускать окна после отправки формы без кода.

В этой статье сделаем пример с My Popup, так как он удобен для разработчиков и легко расширяется.

Отслеживание успешной отправки формы Contact Form 7 для запуска попапа

Одна из популярных задач — показать попап после успешной отправки формы Contact Form 7. Для этого нужно:

Создать попап через My Popup и запомнить его ID.
Отслеживать событие JavaScript, которое Contact Form 7 генерирует после успешной отправки — wpcf7mailsent.
Вызвать функцию My Popup для открытия окна.

Пример кода, который нужно добавить в functions.php темы или в отдельный плагин:

function wppuzzle_enqueue_cf7_popup_script() {
    if (function_exists('wpcf7_enqueue_scripts')) {
        wp_enqueue_script('wppuzzle-cf7-popup', get_stylesheet_directory_uri() . '/js/cf7-popup.js', array('jquery'), '1.0', true);
    }
}
add_action('wp_enqueue_scripts', 'wppuzzle_enqueue_cf7_popup_script');

В файле cf7-popup.js пишем:

document.addEventListener('wpcf7mailsent', function(event) {
    // Замените 123 на ID вашего попапа My Popup
    if (typeof MyPopup !== 'undefined') {
        MyPopup.open(123);
    }
}, false);

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

Создание собственного JavaScript-триггера для запуска попапа по любому действию

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

Пример: допустим, у вас есть кнопка с классом .wppuzzle-action-btn. Нужно открыть попап после нажатия и успешного выполнения функции:

jQuery(document).ready(function($) {
    $('.wppuzzle-action-btn').on('click', function(e) {
        e.preventDefault();
        // Имитация успешного действия, например, AJAX запрос
        $.post('/wp-admin/admin-ajax.php', { action: 'wppuzzle_custom_action' }, function(response) {
            if(response.success) {
                if(typeof MyPopup !== 'undefined') {
                    MyPopup.open(123); // ID вашего попапа
                }
            }
        });
    });
});

На стороне PHP нужно создать обработчик AJAX:

function wppuzzle_custom_action_callback() {
    // Логика обработки
    wp_send_json_success();
}
add_action('wp_ajax_wppuzzle_custom_action', 'wppuzzle_custom_action_callback');
add_action('wp_ajax_nopriv_wppuzzle_custom_action', 'wppuzzle_custom_action_callback');

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

Как избежать навязчивости и повысить удобство использования попапов

Автоматические попапы полезны, но при неправильной настройке раздражают пользователей. Несколько советов, как сделать попапы эффективными и ненавязчивыми:

Показывайте попап только один раз за сессию или за определенный период (например, неделю). Для этого используйте cookie или localStorage.
Добавьте кнопку закрытия и возможность закрыть окно кликом вне попапа.
Если пользователь закрыл попап, не показывайте его повторно, чтобы не раздражать.
Оптимизируйте загрузку скриптов, чтобы попапы не замедляли страницу.

Пример кода для установки cookie и проверки перед показом (в JavaScript):

function wppuzzleSetCookie(name, value, days) {
    var expires = '';
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = '; expires=' + date.toUTCString();
    }
    document.cookie = name + '=' + (value || '')  + expires + '; path=/';
}

function wppuzzleGetCookie(name) {
    var nameEQ = name + '=';
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

// Проверяем перед показом
if(!wppuzzleGetCookie('popup_shown')) {
    MyPopup.open(123);
    wppuzzleSetCookie('popup_shown', '1', 7); // не показывать 7 дней
}

Интеграция с плагином WPGPT для динамического контента в попапах

Если вы хотите вывести в попапе динамический контент, например, сгенерированный с помощью WPGPT, можно сделать так:

Создайте попап без конкретного контента, а с плейсхолдером.
По событию запроса сделайте AJAX вызов к вашему серверу, который вернет сгенерированный текст WPGPT.
Подставьте полученный текст в попап перед его открытием.

Пример AJAX-запроса, в котором получаем данные с сервера:

jQuery(document).ready(function($) {
    $('.wppuzzle-gpt-btn').on('click', function(e) {
        e.preventDefault();
        $.post('/wp-admin/admin-ajax.php', { action: 'wppuzzle_get_gpt_text' }, function(response) {
            if(response.success) {
                $('#mypopup-content').html(response.data.text);
                MyPopup.open(123);
            }
        });
    });
});

PHP-обработчик:

function wppuzzle_get_gpt_text_callback() {
    $text = 'Это пример динамического текста, сгенерированного с помощью WPGPT';
    wp_send_json_success(array('text' => $text));
}
add_action('wp_ajax_wppuzzle_get_gpt_text', 'wppuzzle_get_gpt_text_callback');
add_action('wp_ajax_nopriv_wppuzzle_get_gpt_text', 'wppuzzle_get_gpt_text_callback');