# Синтаксис шаблонов Rich Media ## Структура шаблона Шаблон — это просто .zip-архив, который может содержать HTML, JavaScript, CSS и изображения в качестве ресурсов Rich Media. Архив должен содержать файл **index.html** в своем корне. ## Плейсхолдеры шаблона Вы можете использовать плейсхолдеры в шаблонах Rich Media, которые позволят вам изменять и локализовать значения в контенте Rich Media. Плейсхолдер должен соответствовать следующему формату: ```liquid {{ Placeholder name | Type | Default value }}` ``` Где: * **Placeholder name** — это имя плейсхолдера, которое будет видно в редакторе Rich Media. * **Type** — это тип плейсхолдера. Тип может быть одним из следующих значений: * **color** — поле для ввода цвета * **text** — поле для ввода текста * **html** — текстовая область (многострочный текст) * **Default value** — значение по умолчанию, которое используется, если в редакторе не указано никакого значения. Если значение не установлено, то в качестве значения по умолчанию используется **Placeholder name**. Пример: ```liquid {{Header text|text|Tell Us What You Think}}` ``` ## Добавление pushwoosh.json Вы можете группировать плейсхолдеры, чтобы они были связаны вместе в редакторе Rich Media: Интерфейс редактора Rich Media, показывающий сгруппированные плейсхолдеры, связанные вместе в группах ввода

Интерфейс редактора Rich Media, показывающий сгруппированные плейсхолдеры, связанные вместе в группах ввода

Для этого добавьте файл **pushwoosh.json** в архив с вашим шаблоном Rich Media рядом с файлом **index.html**. Структура файла очень проста и должна быть понятна без дополнительных объяснений: ``` { "input_groups": [ ["Logo image URL", "Logo background color"], ["Topic text", "Topic text color", "Topic background color", "Sub-topic text"], ["Main text", "Text background color"], ["Button text", "Button URL", "Button text color", "Button background color"] ] } ``` ## Пример Пользовательские формы для опросов — это распространенный вариант использования пользовательских шаблонов Rich Media. Эти формы позволяют собирать ценные отзывы пользователей. Готовый шаблон с пользовательской формой опроса доступен в шаблонах по умолчанию. Используйте его в качестве отправной точки для ваших собственных опросов. Пример пользовательского шаблона формы опроса с полями для сбора отзывов пользователей

Пример пользовательского шаблона формы опроса с полями для сбора отзывов пользователей

При создании форм [следуйте некоторым лучшим практикам](#best-practices-for-custom-elements-in-rich-media), чтобы обеспечить совместимость и бесперебойную работу в редакторе Rich Media. Вот еще один пример из одного из шаблонов по умолчанию, доступных в Панели управления. ```txt

``` ## Мониторинг производительности пользовательских Rich Media Вы также можете отслеживать производительность пользовательского контента Rich Media, который вы создаете и загружаете в Pushwoosh в виде ZIP-файла. Вы можете отслеживать, как люди взаимодействуют с вашим Rich Media, по: * Кликам по кнопкам * Кликам по ссылкам * Отправкам форм Чтобы Pushwoosh мог отслеживать эти взаимодействия: 1. Добавьте атрибут `id` к каждому элементу, который вы хотите отслеживать. Например: **Для отслеживания кликов по ссылкам:** ```html … ``` **Для отслеживания отправок форм:** ```html ``` **Для отслеживания кликов по кнопкам:** ```html // type="button" обязателен ``` 2. Добавьте ссылку на JavaScript-файл из CDN в конце тега: ```html ``` ## Лучшие практики для пользовательских элементов в Rich Media ### Тщательно управляйте CSS-стилями Убедитесь, что ваши CSS-стили являются специфичными, чтобы избежать конфликтов со стилями редактора Rich Media. Использование стилей с низкой специфичностью, таких как те, что применяются к именам тегов или общим именам классов, может повлиять на внешний вид редактора Rich Media. Лучше всего держать ваши стили локальными — оберните ваш контент в контейнер с уникальным ID или классом и используйте этот идентификатор в ваших CSS-селекторах для дочерних элементов. ### Включайте внешние библиотеки Вы можете интегрировать библиотеки CSS или JavaScript (такие как Font Awesome, Bootstrap, Tailwind CSS и т.д.), чтобы использовать их методы, иконки, шрифты, анимации и многое другое.

{{Topic text|text|TOPIC TEXT}}