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

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

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

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

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

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

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

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

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

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

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

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

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

   Тип баннера

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

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

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

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

   

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

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

   

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

   

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

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

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

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

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

   Для этого:

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

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

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

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

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

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

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

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

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

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

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

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

   

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

   Для установки встроенного баннера потребуются дополнительные шаги

   4. Откройте нужный баннер и перейдите на шаг Содержимое.
   5. Скопируйте код баннера — он появится после сохранения подшага Настройки показа.
      
      
   6. Вставьте этот код в те блоки страницы, где вы хотите показывать баннер.

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

Важно

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

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

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