Как добавить сторис на сайт: 5 способов для Tilda, WordPress, Bitrix и любого сайта

Сторис на сайте — это лента кружков как в Instagram: клик открывает историю на весь экран с фото или видео, текстом и кнопкой. Формат пришёл из соцсетей, и в этом его сила: людей не нужно учить, что с ним делать. Ниже — пять способов добавить истории на сайт в зависимости от платформы, что в них показывать и какие ошибки убивают формат за месяц.

Зачем сторис сайту

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

5 способов добавить истории на сайт

1. Готовый виджет — на любой сайт

Самый быстрый путь для большинства. Регистрируетесь в сервисе, создаёте истории, копируете код и вставляете в шаблон сайта или в блок HTML-кода конструктора. Дальше всё управляется из панели: порядок, срок показа, ссылки, просмотры. Так работает и наш виджет «Истории».

2. Плагин для WordPress

В каталоге WordPress есть несколько плагинов историй, платных и бесплатных. Установка обычная: «Плагины» → «Добавить» → поиск по слову stories. Истории создаются как записи, лента выводится шорткодом или блоком. Плюс — всё внутри сайта. Минус — плагин нужно обновлять, а тяжёлые плагины замедляют сайт; после установки проверьте скорость.

3. Модуль для 1С-Битрикс

В маркетплейсе Битрикса есть модули историй с разовой оплатой. Ставятся через «Маркетплейс» → «Установленные решения», истории ведутся в инфоблоке, у некоторых есть выгрузка из VK. Обычно нужен разработчик, чтобы встроить компонент в шаблон.

4. Встроенный блок Tilda

У Тильды есть галерея в формате stories — вертикальные слайды внутри страницы. Для разового показа фото проекта достаточно, для обновляемой ленты со ссылками — нет. Разбор способов для Тильды — на странице сторис для Tilda.

5. Свой код

Для самописных сайтов и сервисов: слайдер на Swiper или аналоге, полноэкранный режим, данные из своей админки. Даёт полный контроль, но это разработка — и поддержка на годы. Оправдано, когда истории — часть продукта, а не маркетинговый элемент.

Что показывать: 12 идей на месяц

1. Акция недели с кнопкой на товар или форму.
2. Новинка: три слайда — что это, для кого, цена.
3. Кейс «до и после».
4. Отзыв клиента с фото или скриншотом.
5. Команда: кто отвечает на звонки, кто делает работу.
6. Процесс: как проходит заказ, консультация, монтаж.
7. Ответ на частый вопрос — один вопрос, один ответ.
8. Свободные окна, места, номера на ближайшие дни.
9. Как добраться, парковка, вход.
10. Закулисье: склад, цех, кухня сегодня.
11. Промокод для тех, кто досмотрел.
12. Постоянная история «с чего начать» для новых посетителей.

Ошибки, которые убивают формат

• Мёртвая лента. Три истории полугодовой давности хуже, чем отсутствие ленты. Минимум — одна новая в неделю или пять постоянных.
• Тяжёлые видео. Ролик на 40 МБ на первом экране — минус две секунды загрузки. Сжимать до загрузки, вертикальный формат, до 15 секунд.
• Автозапуск со звуком. Люди закрывают вкладку.
• История без кнопки. Посмотрел — и что? Каждая история ведёт куда-то: товар, форма, страница.
• Нет цели в Метрике. Без неё через месяц непонятно, работают истории или нет.
• Дубль соцсетей один в один. На сайте другой контекст: человек уже здесь и готов к действию — истории должны вести к нему, а не развлекать.

Как измерять

Две цели в Метрике: открытие истории и клик по кнопке. Первая показывает, замечают ли ленту, вторая — приводит ли она к действию. Через месяц смотрите, какие истории открывают чаще, и делаете больше таких. Если открытий много, а кликов нет — проблема в кнопках и предложениях, не в формате. Как настроить цели — в инструкции по Метрике.

Не путать с Google Web Stories

Google Web Stories — это отдельные страницы в формате AMP, которые Google показывает в своей выдаче и в Discover. Это инструмент для медиа и блогов ради трафика из Google, а не лента на сайте бизнеса. Сторис на сайте, о которых эта статья, — элемент интерфейса для ваших посетителей; на поиск он влияет только косвенно, через поведение.

Что выбрать

Магазин или услуги на любой платформе — виджет: быстро, обновляемо, с аналитикой. WordPress с грамотным подрядчиком — можно плагин, но следите за скоростью. Битрикс с разработчиком — модуль. Тильда для разового показа — встроенный блок, для ленты — виджет. Самописный сервис — свой код. И в любом варианте начинать не с установки, а с плана: пять историй, которые будут висеть постоянно, и одна новая в неделю. Скорость сайта после установки проверить обязательно — как это сделать, в статье как ускорить сайт.

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

Как сделать сторис на сайте бесплатно?

На Тильде — встроенный блок галереи в формате stories; на WordPress — бесплатные плагины из каталога; у виджетов историй обычно есть бесплатный тариф с ограничениями. Бесплатные варианты подходят для старта, дальше упираются в отсутствие ссылок, статистики или в скорость.

Влияют ли сторис на SEO?

Напрямую — нет: это элемент для людей, а не для поисковых роботов. Косвенно — да, через поведение: люди дольше остаются и чаще переходят по кнопкам. Обратный эффект тоже возможен: тяжёлый виджет замедляет сайт, и это уже минус.

Можно ли выгружать истории из Instagram или VK на сайт?

Некоторые сервисы и модули умеют подтягивать истории из VK. Из Instagram в России автоматическая выгрузка не работает надёжно — проще загружать те же файлы вручную, это две минуты.

Сколько историй держать в ленте?

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

Что лучше: сторис или всплывающее окно с акцией?

Сторис. Попап перекрывает контент и раздражает, кружки ждут, пока человек сам их откроет. Конверсия в клик у историй обычно выше, а отказов меньше.

Остался вопрос по вашей ситуации? Задайте его в комментариях — отвечаю лично, обычно в течение рабочего дня. — Дмитрий Гугуян, Rekkom