Настройка виджета сайта

Что такое виджет?

Виджет сайта на Табло включает в себя логотип и нотификаторы о событиях (например, о новых личных сообщениях). Нотификаторы — это необязательный элемент.

Вебмастер может настроить виджет 2 способами:

Примечание. Настроенный виджет можно проверить на странице browser://tablo-widget.

Описание виджета в HTML-коде

В HTML-код каждой страницы сайта в блок <head> необходимо встроить мета-тег следующего вида:

<meta name="yandex-tableau-widget" content="logo=http://sitename.tld/images/logo.png, color=#ffffff, feed=feed.json" />

Описание атрибутов (оба атрибута обязательны):

  1. name — наименование мета-тега yandex-tableau-widget.
  2. content — описание логотипа, цвета виджета и нотификаторов в формате:
    content="logo=logo.png, color=#ffffff, feed=feed.json"

    где:

    • logo — абсолютный путь к файлу логотипа (должен быть закодирован URLencoded);
    • color — цвет фона виджета (в шестнадцатеричном коде HEX);
    • feed — это необязательный атрибут, который обозначает путь к файлу feed.json с описанием нотификаторов. Если не указан, виджет отображается без нотификаторов. Путь должен быть закодирован URLencoded.

Манифест виджета

Ограничение. Размер файла manifest.json не должен превышать 100 КБ.

Другой способ настройки виджета — создать файл манифеста виджета и разместить ссылку на него в HTML-коде каждой страницы внутри тега <head>.

<link rel="yandex-tableau-widget" href="manifest.json" />

где manifest.json — путь, по которому можно загрузить манифест виджета. Он может быть относительным или абсолютным:

  • абсолютный путь — это полный URL файла. Например, http://sitename.tld/... /manifest.json.
  • относительный путь — это путь к манифесту виджета относительно страницы, для которой настраивается виджет. Например, manifests/manifest.json.

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

Манифест представляет собой JSON-файл следующей структуры:

{
    // ОБЯЗАТЕЛЬНАЯ ЧАСТЬ
    "api_version": <номер_версии_API_Табло>,
    "layout": {...},
    
    // ОПЦИОНАЛЬНАЯ ЧАСТЬ
    "feed": <ссылка, по которой находится файл feed.json, закодированная URLencoded>
}

Описание атрибутов:

  1. api_version — номер версии API Табло, с которой должен работать виджет (обязательный атрибут).

    Пример:

    "api_version": 4,

    Примечание. Текущая версия API Табло — 4.
  2. layout — описание логотипа и цвета виджета (обязательный атрибут).
    "layout":
    {   "logo": "<ссылка на файл логотипа, закодированная URLencoded>",
        "color": "<цвет виджета в коде HEX>"
    }
  3. feed — это необязательный атрибут, который обозначает путь к файлу feed.json с описанием нотификаторов. Если не указан, виджет отображается без нотификаторов. Путь должен быть закодирован URLencoded.

Назначение и формат файла feed.json

Ограничение. Размер файла feed.json не должен превышать 50 КБ.

Файл feed.json содержит описание отображаемых на виджете нотификаторов и их текущих значений. Он автоматически загружается с сервера с заданной вебмастером частотой (по умолчанию — раз в 60 минут). Благодаря этому нотификаторы обновляются. Если в процессе загрузки сервер три раза подряд вернул некорректный ответ, значения нотификатора обнуляются.

Ограничение. Ответ на запрос feed.json по указанному в манифесте адресу должен иметь тип Content-Type: application/json.

Feed.json представляет собой JSON-файл следующей структуры:

{
   "notifications": [
     {"<имя значка 1>": <число>}, //описание 1 нотификатора, число — целое или с плавающей запятой (выводится до 2 знака после запятой).
     {"<имя значка 2>": <число>}, //описание 2 нотификатора.
     {"<имя значка 3>": <число>}, //описание 3 нотификатора.
   ],
  "refresh_time" : <частота загрузки файла feed.json, в мин, по умолчанию 60 мин>
 }

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

  • bell — , предупреждения,
  • earth — , записи в ленте новостей,
  • friend — , запросы на добавление в друзья,
  • message — , письма, личные сообщения,
  • photo — , фотографии,
  • chat — , мгновенные сообщения,
  • cart — , покупки в корзине.

а атрибут число — это число непросмотренных сообщений выбранного типа. При создании файла рекомендуем проставить значение 0. В дальнейшем значение атрибута будет обновляться автоматически.

Цвет иконок определяется автоматически: если фон виджета темный, то цвет нотификатора будет светлым, и наоборот.

Ограничение. На виджете отображается не более трех нотификаторов. Если в файле feed указано больше трех нотификаторов, выводятся первые три.

Пример описания виджета с нотификаторами

Манифест виджета
{
    "api_version": 4,
    "layout": {
        "logo": "http://sitename.tld/tableau/image.png",
        "color": "#aabbcc"
    },
    "feed": "http://sitename.tld/tableau/feed.json"
}
Файл feed.json
 {
   "notifications": [
     {"bell": 1}, 
     {"friend": 2}, 
     {"message": 1} 
   ],
  "refresh_time" :  2
}
Значения нотификаторов, которые будут отображены на виджете сайта на Табло Яндекс.Браузера

Требования к оформлению виджетов

Для виджета сайта необходимо определить цвет фона и картинку-логотип.

Совет. В качестве цвета фона имеет смысл выбирать либо главный фирменный цвет компании-владельца, либо основной фоновый цвет сайта.
Требования к логотипам

Картинка-логотип должна отвечать следующим требованиям:

  1. Формат PNG.
  2. Прозрачный фон.
  3. Логотип должен гармонировать с цветом заливки виджета.
  4. Не следует стремиться заполнить логотипом все допустимое пространство на виджете. Основной индикатор — это цвет виджета, логотип служит лишь дополнением.
  5. Ограничения по размеру логотипа:
    • длинные горизонтальные логотипы — ширина до 300 пикселей, высота до 85 пикселей;
    • короткие горизонтальные логотипы — ширина до 250 пикселей, высота до 120 пикселей;
    • квадратные логотипы могут быть до 120 пикселей в высоту;
    • длина логотипа не должна превышать его ширину более, чем в 4,6 раза. На рисунке показано, какую примерно площадь должен занимать логотип на виджете.

  6. Размер файла логотипа — не более 300 КБ.
Пример удачного и неудачного логотипов
  • Неудачный логотип (слишком большой):

  • Удачный логотип:

Примеры оформления виджетов
Сайт vk.com yandex.ru afisha.ru lenta.ru
Цвет заливки #3b5998 #ffffff #ce2125 #efeddf
Фон виджета
Логотип
Результат