СОЗДАНИЕ МЕХАНИК ДЛЯ САЙТА:
сториз для сайта с акциями внутри


Сториз для сайта – это небольшие встроенные кружки, при нажатии на которые пользователю показывается детальная информация об товарах, акциях, скидках или другое сообщение.
Логика работы похожа на формат сториз в Instagram.


Логика работы сториз для сайта:
Сториз для сайта – составная форма из нескольких элементов:
1) Контейнер со свернутыми кружками
2) Развернутые сториз внутри кружка

При этом:
- 1 свернутый кружок может содержать до 5 развернутых сториз внутри себя, которые будут переключаться автоматически с заданной скоростью при открытии данного свернутого кружка.
- 1 сториз может содержать в себе картинку с кнопкой, ссылкой или видео.
- Количество свернутых кружков внутри контейнера может быть любым.
- При открытии пользователем первого кружка сначала будут показаны все развернутые сториз 1 кружка, затем автоматически покажутся сториз 2, 3 кружков.
- Вы можете настроить показ контейнера со сториз только на определенных страницах сайта, только части посетителей, только при первом или повторных визитах на сайт, то есть использовать все возможности таргетинга
- Вы можете настроить показ отдельного кружочка только определенному сегменту клиентов, используя возможности таргетинга

Этапы создания и запуска механики:

Шаг 1. Проверьте наличие скрипта сервиса
Для этого войдите в аккаунт клиента или свой
Перейдите на страницу установки скрипта
Там внизу должны быть указаны домены, где установлен скрипт.
В случае их отсутствия обратитесь к клиенту для установки скрипта или к вашим разработчикам.



Какие формы нужно создать, чтобы запустить сториз?
1) Контейнер, в котором хранится внешний вид кружков и расположение свернутого блока с ними.
2) Формы с контентом непосредственно, по количеству кружочков.

Например, вы хотите создать 3 кружочка со сториз внутри, внутри первого 3 картинки, внутри второго и третьего по одной. В таком случае вам нужно создать 4 формы:
1 - форма контейнер, обязательна для запуска механики
и 3 формы для кружочков с их содержимым:

Шаг 2. Настройте внешний вид контейнера для того, чтобы размещать внутри него ваши сториз

Возьмите вот этот шаблон.
Это шаблон контейнера, который будет встраиваться в контент страницы.

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

В шаблоне содержится ТОЛЬКО общий внешний вид, наполнение мы будем настраивать отдельно.

Подберите шрифты для подписей
Во вкладе Общие настройки вы можете выбрать шрифт из предложенных или использовать свой с сайта.
(1) Шрифт формы из списка предложенных, будет сразу отображаться в превью и на сайте.
(2) Если на вашем сайте используется уникальный шрифт и вы бы хотели его же использовать, поставьте галочку "Использовать свой шрифт?"
(3) В поле "Свой шрифт" вы можете ввести шрифт, точно так же, как он прописан на вашем сайте, где будет показываться форма.
Зайдите на свой сайт, нажмите правой кнопкой мыши на текстовом поле – Посмотреть код
Копируйте его полностью в это поле.

Обратите внимание!
Шрифт в форме будет подгружаться с сайта, но в превью может отображаться некорректно, из-за того, что на сайте самого личного кабинета этого уникального шрифта может не быть. Поэтому тестируйте отображение шрифта по тестовой ссылке
Шаг 3. Настройте кому и когда будет показываться блок со сториз

Сохраните форму с контейнером.

Период показа
Задайте нужный для вас период показа всего блока со сториз, если это необходимо. Если сториз будут показыватся постоянно, переходите на следующий шаг:

Таргетинг (Кому показывать)
Задайте, на каких именно страницах сайта должен показываться блок со сториз, каким именно посетителям сайта. Вы можете использовать все существующие настройки таргетинга:

Например, на скриншоте выше блок со сториз будет показан на всех страницах сайта, кроме содержащих "cart", "login", только на десктопных устройствах и только при 1 визите посетителя на сайт.
Шаг 4. Разместите контейнер в нужном месте на сайте

Сохраните форму с контейнером.
На вкладке "Где показывать" вы можете задать место на сайте, где будет показываться блок со свернутыми кружками.
Вы можете дать div-блок для вставки вашим разработчикам или использовать вставку по селектору самостоятельно.
О том, как вставить блок на сайт описано в этой статье

Шаг 5. Проверьте внешний вид и расположение контейнера по тестовой ссылке

Сохраните форму.
Нажмите "Проверить форму на сайте".
Введите или выберите домен, где будет показываться форма.
Сервис автоматически сгенерирует тестовую ссылку, по которой будет показываться форма на вашем сайте только для вас.
Ссылка формата: http://faq.popmechanic.io?pm-test-form=47ea86ccbf3dd61076ae652dc06e5b30df59dffc45ddb176c02075bbfc4d7a17
Скопируйте эту ссылку и проверьте отображение формы на сайте.
Рекомендуем отправить её себе и проверить так же на мобильных устройствах.
Отправьте эту тестовую ссылку клиенту, коллегам для проверки внешнего вида контейнера (пока без содержания)
Шаг 6. Настройка содержания сториз

Возьмите вот этот шаблон для содержания сториз.
Это будет наш первый кружок с содержанием.

В нем справа настройте свернутый кружок в меню
Содержание свернутого кружка сториз:
Тут загрузите картинку (квадратную) для свернутого кружка и подпись к ней.
И порядок относительно других сторис.

В группах меню Story 1: настройки развернутой - Story 5: настройки развернутой вы можете задать содержание, которое будет показано, при клике на данный кружок.

В каждой из сториз вы можете задать:
- тип (картинка или видео)
- само изображение (размеры картинки на фон в пропорциях 360:640, можно использовать gif, но лучше до 1 мб весом)
- текст кнопки внизу видео или изображения
- ссылку с карточки

Обратите внимание!
В данном шаблоне не работает превью, поэтому для проверки внешнего вида нужно запустить форму на одну тестовую страницу сайта.
Шаг 10. Тест и запуск механики
Включите форму с помощью переключателя активности формы:
Если у вас возникли сложности на любом шаге настройки – напишите в нашу поддержку.
Чат с поддержкой есть справа внизу в личном кабинете.

Вам была полезна эта статья?