Перейти к основному содержимому
Опубликовано: 

Баннеры для сайта

Баннер — это статический HTML+CSS-блок, который показывается посетителям сайта в виде поп-апа или встроенного элемента. С помощью баннеров можно анонсировать акцию, показать новость или привлечь внимание к нужному разделу сайта.

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

Типы баннеров​

Баннеры бывают четырёх типов:

  • всплывающее окно — появляется поверх контента сайта;
  • вызываемое окно — появляется в свёрнутом виде в углу страницы, не мешая просмотру контента. По клику раскрывается поверх страницы;
  • полоса — появляется выше или ниже контента сайта, не мешая просмотру;
  • встроенный баннер — размещается на сайте как часть страницы.

    Type of banners

Как создать баннер​

  1. Чтобы создать баннер, перейдите в раздел Сайт → Баннеры и нажмите «Создать баннер».

    How to make a banner

  2. На шаге Содержимое пройдите четыре подшага:

    Источник баннера

    Выберите, как будете создавать баннер:

    • в Конструкторе баннеров — блочный редактор с готовыми элементами;
    • в HTML-редакторе — сверстайте баннер с нуля или вставьте готовый код;
    • загрузите готовый HTML-файл с оформленным баннером.

      Source of banner

      Важно

      С источником баннера лучше определиться заранее: при смене источника содержимое теряется.

    Тип баннера

    Выберите один из четырёх типов баннера — всплывающее окно, вызываемое окно, полоса или встроенный баннер.

    Содержимое и оформление

    Настройте оформление баннера: положение на странице, фон, текст, анимацию появления, оверлей, ширину, скругление углов и отступы.

    Чтобы отредактировать сам баннер, откройте редактор, который вы выбрали на предыдущем шаге.

    Content and designe

    Настройки показа

    Укажите, когда начать показывать баннер, как часто показывать его одному посетителю и когда прекратить показ.

    Display settings

  3. На шаге Правила показа баннера настройте, кому и как будет показываться баннер — автоматически или по вызову через JavaScript.

    Display rules

    Автоматический показ

    Чтобы баннер показывался только нужным посетителям, задайте одно или несколько условий — так же, как в сегментном редакторе. Выберите, должны выполняться все условия или любое из них.

    Как работает каждое условие показа

    Ручной показ (JavaScript-вызов)

    Вы можете вызвать баннер на странице с помощью JavaScript при выполнении действия пользователя или события.

    Для этого:

    1. Скопируйте код из блока Ручной показ.
    2. Добавьте его на страницу, где нужно вызывать форму.

    JavaScript-вызов работает независимо от настроек автоматического показа, если баннер активирован на сайте.

  4. На шаге Действия перед показом при необходимости добавьте JavaScript-код, который выполнится перед показом баннера. Этот шаг можно пропустить.

  5. На шаге Активация скопируйте скрипт и установите его на сайт, если не сделали этого раньше, после чего активируйте баннер.

Как настроить баннер в редакторе​

Набор инструментов для настройки зависит от выбранного источника баннера:

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

Block editor

В HTML-редакторе можно написать код баннера с нуля или вставить готовую вёрстку — вместе с HTML, CSS.

HTML editor

Если загрузили готовый HTML-файл, редактор недоступен — баннер отображается таким, каким пришёл в файле.

Как установить баннер на сайт​

  1. Перейдите в раздел Баннеры.

  2. Скопируйте скрипт установки баннеров — он отображается в верхней части страницы.

    Banners script

  3. Добавьте этот скрипт между тегами <head>...</head> — он отвечает за работу всех баннеров на сайте. Этот шаг можно пропустить, если на сайте уже установлены другие баннеры или формы CDP Sendsay.

    Для установки встроенного баннера потребуются дополнительные шаги
    1. Откройте нужный баннер и перейдите на шаг Содержимое.
    2. Скопируйте код баннера — он появится после сохранения подшага Настройки показа.

      Banners code
    3. Вставьте этот код в те блоки страницы, где вы хотите показывать баннер.

На странице баннера в CDP Sendsay нажмите на синюю кнопку «Активировать», чтобы баннер стал отображаться на сайте. Любые изменения в баннере после установки будут автоматически подтягиваться на сайт.

Важно

Чтобы баннер корректно отображался, перейдите в настройки сайта, найдите заголовок Content-Security-Policy и проверьте, что в директиву connect-src добавлены значения:

  • https://image.sendsay.ru
  • https://sendsay.ru

Читайте также:
Правила показа форм и баннеров
Формы сбора подписчиков