Динамические кнопки
С помощью технологии DynamicButton можно создавать для вашего приложения виджеты, внешний вид которых управляется с вашего сайта с помощью простого конфигурационного файла. Такие виджеты могут состоять из одной кнопки или набора нескольких кнопок и могут содержать попапы - окна с контентом вашего сайта, всплывающие по клику на ваши кнопки.
Пример набора кнопок:
Для отображения вашей кнопки или набора кнопок в приложении добавьте в конструкторе виджет "Динамическая кнопка" и укажите в параметре "URL конфигурации" ссылку на конфигурационный файл виджета на вашем сайте.
Приложение будет периодически запрашивать обновление конфигурации и отображать придуманные вами кнопки в соответствии с ней.
Формат конфигурации
Внешний вид динамической кнопки описывается в формате JSON.
| Параметр | Тип | Описание |
| version | int | версия JSON. Используйте версию, указанную в этом описании |
| update_interval | int | время в секундах, по истечении которого приложение запросит следующее обновление конфигурации с вашего сервера. Значение по умолчанию – 300. |
| update_urls | Array of strings | список URL при заходе на которые конфигурация будет запрашиваться моментально, полезно для быстрого обновления виджета в случае авторизации или выхода пользователя из своего аккаунта на сайте. Необязательный параметр. |
| update_url_regexps | Array of strings | Список регулярных выражений URL, при совпадении текущего URL с этим регулярным выражением конфигурация немедленно обновится (то же самое по смыслу, что и параметр update_urls, но имеет большую гибкость). Необязательный параметр. |
| buttons | Array | массив описаний кнопок. В одном конфигурационном файле могут передаваться описания нескольких кнопок одновременно |
| id | string | уникальный идентификатор кнопки, необходим для корректного обновления счетчика |
| appearance | Object | описание внешнего вида кнопки |
| badge | Object | описание счетчика, показываемого рядом с кнопкой. Необязательный параметр |
| onclick | Object | описание действия, производимого при клике на виджет |
AppearanceObject
Описывает отображение кнопки в тулбаре. Поддерживаются два вида отображения:
1. Комбинированная кнопка с иконкой и/или текстовым лейблом
| Параметр | Тип | Описание |
| type | string | тип кнопки |
| icon | string | ссылка на иконку кнопки в формате PNG размером 16x16 px. При несоответствии формата иконка не будет отображена в тулбаре. Необязательный параметр |
| label | string | текст на кнопке. Выбирайте для кнопок короткие и емкие названия - это позволит сэкономить место в тулбаре. Необязательный параметр, но стоит использовать либо icon, либо label, иначе в тулбаре нечего будет показывать |
 | Формат иконок Для иконок с прозрачным фоном стоит использовать формат png, иначе они будут некорректно отображаться в Internet Explorer |
2. Кнопка в виде картинки
| Параметр | Тип | Описание |
| type | string | тип кнопки |
| url | string | URL картинки |
BadgeObject
Описывает необязательный беджик, показываемый рядом с кнопкой. Беджик может служить в качестве нотификатора о новых событиях и призывать пользователя кликнуть на кнопку.
| Параметр | Тип | Описание |
| value | int или string | значение счетчика. Может быть int или string |
| onclick | string | поведение при клике на виджет. remove_highlight — будет убрана подсветка беджика. remove_badge — будет убран бедж целиком. Необязательный параметр, значение по-умолчанию remove_badge |
| highlight | HighlightObject | инструкция, контроллирующая появление оранжевой подложки под счетчиком |
HighlightObject
Описывает подсветку беджика и логику ее появления.
| Параметр | Тип | Описание |
| enable | string | обязательный параметр, описывает логику появления подсветки. always — подсветка будет показана при получении конфигурации. if_greater — подсветка будет показана, только если badge.value передается в виде int, в случае, если текущее передаваемое значение больше предыдущего. on_change — подсветка будет показана в случае изменения значения badge.value |
| color | string | (будет поддержано в следующей версии) необязательный параметр, цвет подсветки |
OnclickObject
Описывает реакции кнопки на клик, поддерживается два вида действий:
1. Переход по ссылке (будет открыта в новой закладке)
| Параметр | Тип | Описание |
|---|---|---|
| url | string | ссылка на страницу |
| target | string | где открывать ссылку: current_tab — ссылка откроется в текущей вкладке new_tab — ссылка откроется в новой вкладке new_window — ссылка откроется в новом окне Необязательный параметр. По умолчанию ссылки открываются в новой вкладке ПРИМЕЧАНИЕ: Доступно начиная с версии 1.4.2.0 |
2. Открытие попапа (ознакомьтесь с особенностями разработки попапов)
Поддержка авторизации пользователей
При запросе конфигурационного файла с вашего сервера тулбар передает те же заголовки, что и браузер при обычном запросе страниц вашего сайта. Это дает возможность отдавать различные ответы для авторизованных и неавторизованных пользователей.
Вы можете проверять авторизацию пользователя в момент запроса. В случае, если кнопки и счетчики актуальны у вас лишь для авторизованного пользователя, можно отдавать неавторизованным ответ в виде:
Особенности разработки попапов
OnclickObject позволяет открывать при клике на кнопку попап с вашим собственным контентом. HTML, используемый внутри попапа, должен точно соответствовать размерам, задаваемым вами в секции params OnclickObject'а. Если занимаемые HTML'ем размеры окажутся больше, то у попапа появятся полосы прокрутки.
| Стили для тега body Для корректного появления полос прокрутки необходимо внутри body, сделать контейнер DIV и задать ему стиль overflow:auto и высоту контейнера, а для тега body стиль overflow:hidden вашего попапа: |
Управление открытием ссылок
По умолчанию ссылки внутри попапа открываются внутри самого попапа. Но бывают ситуации, в которых ссылки хочется открывать в новых вкладках или окнах. Мы позволяем управлять открытием ссылок через специальный якорь, добавляемый к ссылке.
Например, чтобы открыть находящуюся внутри попапа ссылку http://metabar.ru/ в текущей закладке — измените её на http://metabar.ru/#target=current_tab.
Всего поддерживается три способа открывать ссылки:
| Якорь | Действие |
| #target=current_tab | ссылка откроется в текущей вкладке |
| #target=new_tab | ссылка откроется в новой вкладке |
| #target=new_window | ссылка откроется в новом окне |