Интеграция с платформами

Поптимайзер работает на любом сайте — достаточно одного скрипта. Но на разных платформах подключение выглядит по-разному. В этой статье — готовые инструкции для WordPress, Tilda, Shopify и других CMS.

WordPress

Базовое подключение

Самый простой способ — добавить скрипт через настройки темы.

Откройте Внешний вид → Редактор тем (или используйте плагин Insert Headers and Footers).
Вставьте скрипт перед закрывающим </body>:

HTML

<script
  defer
  id="pop-script"
  data-key="ВАШ_API_KEY"
  src="https://poptimizer.ru/popup/script.min.js"
></script>

Скриншот — вставка скрипта в WordPress через меню Внешний вид → Редактор темМесто для видео или скриншота

Если вы используете плагин Insert Headers and Footers (WPCode) — вставьте скрипт в секцию "Footer". Это самый безопасный способ, который не пропадёт при обновлении темы.

Персонализация по имени пользователя (PHP)

Если на сайте есть авторизация (WooCommerce, Membership), можно передать имя пользователя прямо в попап:

PHP

<?php
$current_user = wp_get_current_user();
$user_name = esc_attr($current_user->display_name);
$user_email = esc_attr($current_user->user_email);
?>
<script
  defer
  id="pop-script"
  data-key="ВАШ_API_KEY"
  <?php if ($user_name): ?>
    data-context-user-name="<?php echo $user_name; ?>"
    data-context-user-email="<?php echo $user_email; ?>"
  <?php endif; ?>
  src="https://poptimizer.ru/popup/script.min.js"
></script>

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

Код

{{userName}}, у нас для вас персональное предложение!

Авторизованный пользователь увидит своё имя. Неавторизованный — шаблон {{userName}}, поэтому для неавторизованных лучше использовать текст без переменных или настроить условные переходы на разные экраны.

Скриншот — попап с именем пользователя WordPress, подставленным из PHPМесто для видео или скриншота

WooCommerce: сумма корзины

Для интернет-магазинов на WooCommerce можно передать сумму корзины и предложить скидку:

PHP

<?php
$cart_total = 0;
$item_count = 0;
if (function_exists('WC') && WC()->cart) {
    $cart_total = WC()->cart->get_cart_contents_total();
    $item_count = WC()->cart->get_cart_contents_count();
}
?>
<script
  defer
  id="pop-script"
  data-key="ВАШ_API_KEY"
  data-context-cart-total="<?php echo esc_attr($cart_total); ?>"
  data-context-item-count="<?php echo esc_attr($item_count); ?>"
  src="https://poptimizer.ru/popup/script.min.js"
></script>

В попапе:

Код

В вашей корзине {{itemCount}} товаров на сумму {{cartTotal}} руб.
Оформите заказ сейчас и получите бесплатную доставку!

Используйте условные переходы, чтобы показывать разные предложения в зависимости от суммы: при cartTotal > 5000 — экран "Бесплатная доставка", при cartTotal < 1000 — экран "Добавьте ещё товаров".

WordPress: без знания PHP

Если вы не пишете код, есть два простых варианта:

Плагин WPCode — вставьте скрипт без редактирования темы.
UTM-метки — контекстные переменные подхватываются из URL автоматически. Просто добавляйте UTM к ссылкам в рекламе, и попап будет знать, откуда пришёл пользователь.

Tilda

Базовое подключение

Откройте Настройки сайта → Ещё → HTML-код для вставки внутрь HEAD (или Before </BODY>).
Вставьте скрипт:

HTML

<script
  defer
  id="pop-script"
  data-key="ВАШ_API_KEY"
  src="https://poptimizer.ru/popup/script.min.js"
></script>

Скриншот — настройки сайта Tilda, раздел «HTML-код для вставки»Место для видео или скриншота

Рекомендуем вставлять в секцию Before </BODY> — скрипт загрузится после контента страницы и не повлияет на скорость.

Tilda: передача данных через HTML-блок

Если вам нужно передать данные в попап (например, название страницы или тариф), добавьте на страницу блок T123 (Вставка HTML-кода):

HTML

<script>
  // Дождёмся загрузки Poptimizer
  document.addEventListener('DOMContentLoaded', function() {
    var checkPoptimizer = setInterval(function() {
      if (window.Poptimizer) {
        clearInterval(checkPoptimizer);

        window.Poptimizer.setContext({
          pageName: document.title,
          tariff: "Бизнес"
        });
      }
    }, 100);
  });
</script>

В попапе:

Код

Вы смотрите страницу «{{pageName}}».
Тариф «{{tariff}}» — идеальный выбор для вашего бизнеса!

Tilda: привязка к кнопке

Хотите, чтобы попап открывался по клику на кнопку Tilda? Используйте ручной вызов:

В Tilda задайте кнопке CSS-класс (например, open-popup).
В Поптимайзер настройте триггер On Click с селектором .open-popup.

Готово — клик по кнопке Tilda откроет ваш попап.

Скриншот — кнопка на Tilda с CSS-классом, при клике открывается попап ПоптимайзерМесто для видео или скриншота

Shopify

Подключение через theme.liquid

В админке Shopify откройте Online Store → Themes → Edit code.
Найдите файл theme.liquid (или layout/theme.liquid).
Вставьте скрипт перед </body>:

HTML

<script
  defer
  id="pop-script"
  data-key="ВАШ_API_KEY"
  src="https://poptimizer.ru/popup/script.min.js"
></script>

Shopify: данные о покупателе

Shopify предоставляет данные о пользователе через Liquid-шаблоны. Передайте их в попап:

HTML

<script
  defer
  id="pop-script"
  data-key="ВАШ_API_KEY"
  {% if customer %}
    data-context-user-name="{{ customer.first_name | escape }}"
    data-context-orders-count="{{ customer.orders_count }}"
  {% endif %}
  data-context-cart-total="{{ cart.total_price | money_without_currency | remove: ',' }}"
  data-context-item-count="{{ cart.item_count }}"
  src="https://poptimizer.ru/popup/script.min.js"
></script>

В попапе:

Код

{{userName}}, в вашей корзине {{itemCount}} товаров.
Оформите заказ на {{cartTotal}} и получите подарок!

Shopify: обновление корзины в реальном времени

Корзина в Shopify обновляется через AJAX. Чтобы попап всегда показывал актуальную сумму:

HTML

<script>
  // Слушаем события корзины Shopify
  document.addEventListener('cart:updated', function(event) {
    if (window.Poptimizer) {
      window.Poptimizer.setContext({
        cartTotal: event.detail.total_price / 100,
        itemCount: event.detail.item_count
      });
    }
  });
</script>

Любой сайт (HTML)

Если ваш сайт — обычный HTML без CMS, подключение максимально простое.

Статические данные

Добавьте скрипт с нужными атрибутами:

HTML

<script
  defer
  id="pop-script"
  data-key="ВАШ_API_KEY"
  data-context-promo="WINTER2026"
  data-context-discount="15"
  src="https://poptimizer.ru/popup/script.min.js"
></script>

Динамические данные (JavaScript)

Для данных, которые появляются после загрузки страницы:

JavaScript

// После загрузки данных пользователя
fetch('/api/user')
  .then(res => res.json())
  .then(user => {
    window.Poptimizer.setContext({
      userName: user.name,
      userCity: user.city,
      loyaltyPoints: user.points
    });
  });

React / Next.js / Vue

React / Next.js

Добавьте скрипт через компонент <Script>:

JSX

import Script from "next/script";

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script
        id="pop-script"
        src="https://poptimizer.ru/popup/script.min.js"
        data-key="ВАШ_API_KEY"
        strategy="afterInteractive"
      />
    </>
  );
}

Для передачи данных используйте setContext после рендера:

JSX

import { useEffect } from "react";

function CartPopupSync({ cart }) {
  useEffect(() => {
    if (window.Poptimizer) {
      window.Poptimizer.setContext({
        cartTotal: cart.total,
        itemCount: cart.items.length,
      });
    }
  }, [cart]);

  return null;
}

Vue

HTML

<!-- В App.vue или layout -->
<script>
export default {
  mounted() {
    const script = document.createElement('script');
    script.id = 'pop-script';
    script.defer = true;
    script.src = 'https://poptimizer.ru/popup/script.min.js';
    script.dataset.key = 'ВАШ_API_KEY';
    document.body.appendChild(script);
  }
};
</script>

UTM-метки (все платформы)

Независимо от платформы, UTM-параметры из URL подхватываются автоматически. Никакой настройки не нужно.

Если пользователь пришёл по ссылке:

Код

https://ваш-сайт.ru/?utm_source=vk&utm_campaign=newyear

В попапе можно использовать:

Код

Специальное предложение для подписчиков {{utmSource}}!
Акция «{{utmCampaign}}» — только сегодня.

Это работает на WordPress, Tilda, Shopify и любом другом сайте — без единой строчки кода.

Частые вопросы

Скрипт конфликтует с другими скриптами на сайте?

Нет. Поптимайзер работает в изолированном Shadow DOM — его стили и код не влияют на ваш сайт, а стили сайта не влияют на попапы.

Можно ли добавить скрипт через Google Tag Manager?

Да. Создайте тег типа "Пользовательский HTML" и вставьте скрипт. Установите триггер "Все страницы".

Скриншот — настройка тега Поптимайзер в Google Tag ManagerМесто для видео или скриншота

Попап не показывается — что делать?

Откройте консоль браузера (F12 → Console).
Проверьте, загрузился ли скрипт: window.Poptimizer.
Убедитесь, что data-key указан правильно.
Проверьте таргетинг — возможно, попап настроен на другую страницу.

Как проверить, что контекстные переменные передаются?

В консоли браузера выполните:

JavaScript

window.Poptimizer.getContext()

Вы увидите объект со всеми переданными данными. Если какое-то поле отсутствует — проверьте код подключения.

Полезные ссылки

Установка и подключение — базовая настройка скрипта.
Контекстные переменные — подробно о передаче данных в попап.
Многостраничные попапы — условные переходы на основе данных.
Ручной вызов попапа — открытие попапа по клику на кнопку сайта.

Обновлено 1 апреля 2026. Нашли ошибку? Напишите на support@poptimizer.ru.