Интерактивные истории на сайте#

Истории — кружки или карточка на сайте с вертикальными слайдами, как в соцсетях: фото и видео, кнопки, опрос, квиз, таймер, промокод и форма заявки.

Посетитель нажимает на кружок или карточку и листает слайды: отвечает на опрос, копирует промокод, оставляет заявку. Истории создаются в разделе Маркетинг → Попап, рядом с попапами. Заявка из формы в истории вместе с ответами на опросы и квизы попадает в CRM APX Chat, в «Неразобранное», а если подключена amoCRM или Bitrix24 — в неё.

Как создать истории#

1. Нажмите «Создать» → «Истории»

   В разделе Маркетинг → Попап нажмите «Создать» и выберите «Истории». Задайте название — его видите только вы.

2. Выберите шаблон

   «С нуля», «Акция с таймером», «Квиз → заявка», «Новинка + кнопка в чат» или «Промокод». Тексты в шаблонах — примеры, замените их своими.

3. Соберите истории и слайды

   На шаге «Истории», вкладка «Истории и слайды»: добавьте истории (кружки) и слайды, загрузите фото или видео либо выберите цветной фон, расставьте элементы на холсте.

4. Настройте вход в истории и плеер

   На вкладках «Вход в истории» и «Плеер» выберите кружки или карточку, их место на странице, стрелки, звук и поведение в конце. Вкладка «Превью» покажет истории так, как их увидит посетитель.

5. Размещение, копирайт, условия показа и сайты

   Дальше — как у попапа: раскладка плеера для компьютера и телефона, строка «Работает на apx.chat», автопоказ, расписание, приоритет и сайты на шаге «Каналы». Если нужного сайта ещё нет, нажмите там «Создать сайт»: окно покажет код установки виджета, а новый сайт сразу будет отмечен. В конце нажмите «Создать истории».

Сколько можно добавить#

• До 10 историй (кружков), до 20 слайдов в истории и до 60 слайдов всего.
• До 8 элементов на слайде, из них одна форма и один опрос или квиз.
• Подпись под кружком — до 40 символов.

Истории и слайды#

Вверху вкладки «Истории и слайды» — истории в виде кружков, ниже — миниатюры слайдов выбранной истории. И те и другие можно перетаскивать, чтобы поменять порядок. У истории задаются «Подпись под кружком» и «Обложка кружка»: без своей обложки в кружке будет картинка или постер первого слайда. Под заголовком «История 1 из 2» — ID истории с кнопкой копирования: он нужен, чтобы открыть истории из кода сайта сразу с этой истории.

Под миниатюрами — холст слайда 9:16, рядом — настройки слайда или выделенного элемента. У слайда:

• Фото или видео и Как вписать — «Заполнить экран» или «Целиком».
• Фон — цвет или градиент; при фото или видео — фон вокруг них.
• Затемнение — до 80%, помогает читать белый текст на светлом фото.
• Длительность — сколько длится слайд; видео можно показать целиком.
• Звук — у видео со звуком: «Без звука» или «Можно включить».
• После слайда — куда перейти. По умолчанию — следующий слайд, после последнего — следующая непросмотренная история.

Как расставить элементы на холсте#

Элементы добавляются кнопками под холстом: «Текст», «Кнопка», «Опрос», «Квиз», «Форма», «Таймер», «Промокод».

• Общая сетка. Шаблоны и новые элементы стоят на одной сетке: поля 8% по бокам, заголовок сверху, центральный блок — таймер, промокод, опрос или форма — посередине, главная кнопка внизу.
• Свободное место. Новый элемент встаёт туда, где ему место по типу: кнопка — внизу, текст — под последним текстом в верхней части слайда, остальные — в середине. Если свободного места нет, элемент встанет туда, где меньше всего перекрывает соседей.
• Зоны плеера. Затемнённые полосы на холсте — шапка плеера (полоски прогресса, название истории и кнопки) и строка «Работает на apx.chat», если она показывается. Элементы туда не ставьте: в плеере их закроет шапка или строка.
• Перетаскивание. Элементы двигаются мышью или пальцем, ширина меняется ручкой справа. Элемент прилипает к центру холста и к боковым полям сетки — пока его тянете, видна направляющая линия.
• Клавиатура. Стрелки сдвигают выделенный элемент на 1%, с Shift — на 5%. Delete удаляет элемент, Esc снимает выделение. Точное положение — в полях «Положение, % холста», кнопка «По центру» ставит элемент по центру по горизонтали.
• Наложения. Если элементы перекрываются или заходят в зоны плеера, на холсте они обводятся красным пунктиром, а в настройках появляется подсказка, например: «Кнопка «Подробнее» и таймер «До конца акции» перекрываются — сдвиньте один из них». Сохранению это не мешает, но посетитель увидит элементы друг на друге.

Элементы слайда#

• Текст — надпись до 300 символов, можно в несколько строк. Настраиваются цвет, фон, размер, начертание и выравнивание.
• Кнопка — вид «Заливка», «Контур» или «Стекло» и действие: «Открыть ссылку», «Открыть чат с сообщением», «Перейти к слайду», «Следующий слайд», «Закрыть истории», «Открыть другой попап» или «Скопировать промокод».
• Опрос — вопрос и 2–4 варианта; каждый вариант может вести на свой слайд.
• Квиз — вопрос с верным ответом, пояснение и разные слайды после верного и неверного ответа.
• Форма — те же поля, согласия и назначения в CRM, что у попапа-формы, плюс текст после отправки и слайд, на который перейти.
• Таймер — отсчёт до даты или отдельный для каждого посетителя; отдельный длится до 7 дней. По окончании таймер скрывается или показывает текст. Выравнивание по умолчанию — по центру.
• Промокод — код с подписью и иконкой копирования: нажатие копирует код, иконка на мгновение сменяется галочкой.

На сайте форма в истории выглядит как формы виджета: телефон с выбором страны, поля и галочки согласия. Так же она выглядит на холсте и в превью. Ответы на опросы и квизы попадают в заявку вместе с контактом из формы.

Требования к фото и видео#

• Фото — JPG, PNG или WebP до 15 МБ. Слайд с фото показывается 2–30 секунд, по умолчанию 6.
• Видео — MP4, MOV или WebM до 100 МБ и до 30 секунд. Видео можно показать целиком или короче.
• Лучше всего подходят вертикальные файлы 9:16, например 1080×1920.
• Файлы сжимаются автоматически, чтобы сайт не тормозил. Пока файл обрабатывается, на слайде отметка «Обрабатывается…», а в списке попапов — «Медиа обрабатывается». Посетители увидят слайд, когда обработка закончится. Если файл обработать не удалось, появится «Файл не обработан» — замените файл.
• Фото с iPhone в формате HEIC и GIF не принимаются — сохраните картинку как JPG или PNG.
• Картинку можно взять из библиотеки изображений или сгенерировать AI — кнопка «Из библиотеки / AI» у загрузки файла.

Вход в истории#

На вкладке «Вход в истории» выберите, как посетитель откроет истории:

• Кружки — ряд кружков с обложками; цветное кольцо отмечает непросмотренные истории. Настраиваются размер, сколько кружков видно, подписи и цвета кольца.
• Карточка — прямоугольное превью 9:16, можно с подписью. Может показывать короткое видео-превью — 3 секунды видео первого слайда; на медленном интернете вместо него будет обложка.
• Без лаунчера — на странице ничего не видно: истории открываются автопоказом или из кода сайта. После сохранения готовый вызов с кнопкой копирования появится прямо на этой вкладке.

Место на странице задаётся отдельно для компьютера и телефона: над кнопкой чата или в углу экрана (на телефоне — в нижнем), с отступами. Если на сайте выключен чат, лаунчер с положением «Над кнопкой чата» встанет в тот же нижний угол, где была бы кнопка чата. На телефонах лаунчер можно скрыть.

Плеер#

Раскладка плеера выбирается на шаге «Размещение». На компьютере плеер бывает плавающим — открывается на месте кружков или карточки, ширина 240–420 px, — модальным окном или на весь экран. На телефоне — на весь экран, шторкой снизу или плавающим. Раскладка для телефона включается на экранах шириной до 768 px. Плеер всегда целиком помещается в окно: на невысоком экране он уменьшается.

• Шапка — полоски прогресса, название истории, кнопка звука у видео со звуком и крестик.
• Стрелки «назад» и «вперёд» — только на компьютере, если включён переключатель «Стрелки на компьютере». У плавающего плеера они в шапке, рядом со звуком и крестиком, у модального окна и полного экрана — снаружи кадра.
• Строка «Работает на apx.chat» — внизу кадра. Без подписки White-label она видна всегда, с подпиской её можно скрыть на шаге «Копирайт». У кружков и карточки такой строки нет.

Посетитель листает слайды касанием: левая треть слайда — назад, остальное — вперёд. Удержание ставит паузу, свайп вбок открывает соседнюю историю, свайп вниз закрывает плеер. На компьютере работают стрелки клавиатуры, пробел — пауза, Esc — закрыть. Нажатие на полоску прогресса переносит на нужный слайд.

На вкладке «Плеер» включаются «Звук у видео», «Повторять историю», «Кнопка «Смотреть снова»» и «Закрывать после последней истории», а «Акцентный цвет» задаёт цвет кнопок без своего цвета и кнопки формы. Видео всегда стартует без звука. Кнопка звука появляется, если включён «Звук у видео», а у слайда выбрано «Можно включить».

Превью#

Вкладка «Превью» и шаг «Размещение» показывают уменьшенную копию плеера на экране посетителя: ту же шапку, стрелки, форму и строку «Работает на apx.chat». Переключатель «Телефон» и «Компьютер» меняет экран, кнопка «Открыть истории» запускает показ. Ссылки и чат в превью не открываются.

Автопоказ#

На шаге «Условия показа» включите «Открывать истории автоматически» и выберите, с какой истории начинать. Если выбрано «С первой истории», флажок «Начинать с того, что посетитель ещё не видел» откроет первую непросмотренную историю. Условия и расписание управляют и видимостью кружков, и автопоказом, а «Когда открывать истории» и частота — только автопоказом. По умолчанию истории открываются сами не чаще раза за визит.

Открыть истории из кода сайта#

Истории можно открыть своей кнопкой или скриптом на сайте — при любом входе в истории, с автопоказом и без него: window.apxChat.stories.open('ID историй'). Выбирать «Вручную (через JS API)» для этого не нужно. Готовый вызов с кнопкой копирования есть у сохранённых историй на шаге «Условия показа», в блоке «Открыть истории из кода сайта», а при входе «Без лаунчера» — ещё и на вкладке «Вход в истории».

Чтобы начать показ с определённой истории, передайте вторым аргументом её ID — он указан под заголовком истории на вкладке «Истории и слайды»: window.apxChat.stories.open('ID историй', 'ID истории').

Вызов можно сделать сразу при загрузке страницы, после window.apxChat.init(...): если виджет ещё загружается, истории откроются, как только он будет готов. Частота, условия и расписание на такой вызов не действуют, учитываются только сроки публикации. Подробнее — в разделе Методы виджета.

Заявки из историй#

Форма в истории создаёт сделку «Заявка из истории: имя посетителя» с его контактом и ответами на опросы и квизы, которые он дал до отправки формы. Она попадает туда же, куда заявки из попапов: в подключённую amoCRM или Bitrix24, а без внешней CRM — в CRM APX Chat, в «Неразобранное», с источником «Попап». Подробнее — в статье Попапы на сайт.

Статистика историй#

В списке попапов у историй есть кнопка «Статистика»:

• итоги за период — «Показы лаунчера», «Открытия историй», «Досмотры», «Клики по кнопкам» и «Заявки»;
• «Воронка по слайдам» каждой истории — просмотры, досмотры, уходы и клики;
• «Опросы и квизы» — ответы на каждый вариант, для квиза — сколько ответили верно и неверно.

По умолчанию показаны последние 30 дней, период — до 366 дней. Дни считаются по московскому времени, свежие события появляются в течение нескольких минут.