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

WordPress

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

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

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

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

Персонализация по имени пользователя (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}}, у нас для вас персональное предложение!

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

<?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}} руб.
Оформите заказ сейчас и получите бесплатную доставку!

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

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

Tilda

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

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

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

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

Tilda: передача данных через 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: привязка к кнопке

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

Shopify

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

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

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

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

<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: обновление корзины в реальном времени

<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)

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

<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)

// После загрузки данных пользователя
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

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"
      />
    </>
  );
}

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

<!-- В 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-метки (все платформы)

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

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

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

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

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

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

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

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

window.Poptimizer.getContext()

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

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