Добавление виджета Яндекс.Расписание на сайт в ukit

Для реализации данной инструкции на собственном сайте необходимо
приобрести премиум-пакет «Про».

Всего за пару минут вы можете установить на свой сайт или в блог информер с данными о расписании транспорта.

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

Шаг 1: настройка виджета

Вам необходимо перейти на сайт Расписания по ссылке https://rasp.yandex.ru/informers/informer/.

Генератор виджета Яндекс.Расписание

Далее, необходимо выбрать, что именно Вы планируете отображать. Доступно три варианта:

  • Расписание по станции - здесь Вы можете указать станцию, расписание которой необходимо вывести в информере;
  • Табло аэропортов - здесь Вы можете вывести расписание вылетов самолётов с указанного Вами аэропорта;
  • Расписание по направлению - здесь Вы можете указать начальную и конечную точку, а также вид транспорта для которого необходимо видеть расписание.

Если Вы выбрали Расписание по станции, Вам будет предложено выбрать вид транспорта, а затем указать станцию для этого вида транспорта. Расписание с этой станции будет выводиться в информере.

Вид расписания по станции

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

Вид табло аэропортов

Если Вы выбрали Расписание по направлению, Вам будет предложено выбрать вид транспорта, а затем указать начальную и конечную точку прибытия (это может быть станция, город, аэропорт и т.п.).

Вид расписания по направлению

После того, как Вы закончите настраивать вид отображаемых данных в информере, перейдите на вкладку Оформление.

На этой вкладке Вы можете настроить внешний вид отображаемого информера.

Первым делом предлагается выбрать количество строк в информере (чем больше строк, тем больше данных сможет выводить информер). Доступно всего три варианта:

  • 5 строк
  • 15 строк
  • 25 строк

Затем Вы можете указать цвет информера. При выборе одного из восьми вариантов, меняется цвет информера в нижней части экрана. Таким образом, Вы можете видеть как будет отображаться информер на Вашем сайте.

В правой части экрана Вам предлагается выбрать цвет фона для Вашего информера. Это можно сделать как вручную (перетаскивая мышью ползунки), так и указав код нужного цвета.

Выбор цвета информера

Пример отображения информера с выбранной третьей расцветкой и синим фоном:

Пример настроенного виджета

Когда всё будет готово, нажмите в нижней части экрана на кнопку Код для вставки, и скопируйте код в появившемся текстовом поле. Скоро он нам понадобится.

Вид сгенерированного кода для вставки на сайт

Шаг 2: размещение виджета на сайте

Перейдите на свой сайт в режиме редактирования и разместите в нужном месте страницы виджет HTML-код:

Виджет HTML-код

Откройте виджет для редактирования, и вставьте в него скопированный Вами ранее код виджета Яндекс.Расписание.

Можете сохранить и опубликовать сайт.

Понравился материал?
Вы можете воспользоваться услугами автора материала – исполнителя Divly!