Как добавить виджет прогноза заката на ваш сайт

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

Виджеты Sunset Predictor превращают фиксированное местоположение в автоматически обновляемый прогноз, который вы можете встраивать, не создавая собственную интеграцию погоды. Результатом является компактная, полезная функция для издателей туристической тематики, отелей, ресторанов, туристических сайтов, страниц с веб-камерами и фотографов. Личные сайты могут использовать бесплатный план; для бизнес-сайтов нужен платный план, а отели могут начать с бесплатного 30-дневного пробного периода.

Посмотрите это перед тем, как читать дальше:

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

Что показывает виджет прогноза заката

Каждый виджет предоставляет посетителям основную информацию, которую они могут увидеть с первого взгляда:

• Оценка качества заката от 0 до 100
• Четкая оценка: Эпично, Хорошо, Средне или Плохо
• Местное время заката для выбранного местоположения
• Название местоположения или ваша собственная отображаемая метка
• Необязательное предложение, объясняющее прогноз
• Необязательные метеорологические данные в пользовательском размере

Оценка представлена в цветной кольцевой диаграмме, а фон карты меняется в зависимости от оценки, поэтому посетители могут понять прогноз до того, как прочитают число. Например, отель в Санторини может отображать прогноз для Ойи, в то время как оператор веб-камеры в Сан-Франциско может назвать тот же тип виджета «Вид на Золотые Ворота».

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

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

Виджет заката против обычного виджета погоды

Обычный виджет погоды показывает температуру, дождь и ветер. Он не сообщает посетителям, будет ли стоить смотреть закат: это зависит от того, как облачность на разных высотах, влажность, видимость и качество воздуха сочетаются в момент заката. Виджет заката преобразует эти условия в одну оценку и рейтинг, чтобы посетители получили ответ без необходимости читать таблицу прогноза. Если вашим посетителям также нужна общая погода, пользовательский размер добавляет погодную сетку под оценкой.

Три размера, три темы

Самый быстрый способ сравнить варианты — это демонстрационный зал виджетов, который показывает все девять комбинаций с примерами оценок из каждой категории рейтинга.

Размер	Что показывает	Типичное размещение
Компактный	Один ряд: оценка, рейтинг, время заката, местоположение	Заголовки или нижние колонтитулы, узкие боковые панели, рядом с видеоплеером
Стандартный	Кольцо с оценкой, рейтинг, время заката, местоположение, необязательное объяснение	Боковые панели, блоки бронирования, колонки статей
Пользовательский	Все в Стандартном плюс погодная сетка, которую вы настраиваете	Контентные колонки, руководства по фотографии, страницы с условиями

Каждый размер работает с светлой, темной или автоматической темой. Авто следует за настройками системы посетителя, что подходит для сайтов, которые уже меняются между светлым и темным режимами.

Почему стоит добавить виджет заката на ваш сайт?

Виджет наиболее ценен, когда условия заката влияют на то, что ваши посетители планируют делать. Путеводитель по местам назначения может описать, где смотреть закат; виджет отвечает, стоит ли сегодня вечером что-то планировать, не покидая вашу страницу для поиска в другом месте.

Добавьте функцию без поддержки системы прогнозов

Данные о погоде, оценка, метки, форматирование времени и автоматическое обновление обрабатываются за вас. Установка представляет собой короткий фрагмент для встраивания, а не проект с собственным API-интерфейсом, обработкой ошибок и постоянным обслуживанием.

Если вы хотите создать собственный интерфейс, те же прогнозы доступны через API Sunset Predictor.

Впишите виджет в ваш существующий дизайн

Тема, размер, акцентный цвет, ширина и метка, удобная для посетителей, такая как «Западная терраса», позволяют виджету соответствовать вашей странице. Виджет изолирован от стиля вашего сайта. Ваши собственные CSS-правила для ссылок, отступов или шрифтов не могут исказить его, и его стили не могут просочиться на вашу страницу.

Обслуживайте международных посетителей

Виджеты поддерживают 14 языков: английский, французский, немецкий, испанский, русский, португальский, японский, румынский, украинский, арабский, иврит, упрощенный китайский, хинди и итальянский. Виджеты на арабском и иврите автоматически отображаются справа налево. Вы также можете выбрать метрическую или имперскую единицы и 12-часовой или 24-часовой формат времени.

Как создать ваш первый виджет

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

1. Откройте конструктор виджетов

Откройте конструктор виджетов Sunset Predictor и экспериментируйте с публичным предварительным просмотром. Предварительный просмотр обновляется по мере изменения темы, размера, макета, цвета, языка и других настроек отображения. Перетащите ползунок оценки предварительного просмотра, чтобы увидеть, как выглядит каждая категория рейтинга, и переключайте ширину слота (240 пикселей, 320 пикселей, 400 пикселей или полная), чтобы протестировать узкие и широкие расположения.

Совет: вы можете открыть конструктор с уже выбранным вашим городом, добавив его координаты в адрес, например предварительные настройки для Лиссабона.

Когда будете готовы к сохранению, войдите в систему или создайте бесплатную учетную запись. В вашей панели виджетов выберите Создать виджет. Бесплатный план покрывает один виджет на личном, некоммерческом сайте; для бизнес-сайта выберите платный план.

2. Назовите виджет для вашей панели управления

Введите короткое внутреннее название, такое как «Главная страница отеля Лиссабона» или «Веб-камера Брайтона». Посетители видят выбранную метку местоположения, а не это служебное название, поэтому используйте что-то, что поможет вашей команде позже распознать виджет.

3. Найдите местоположение прогноза

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

Вы также можете ввести необязательное название для отображения. Это полезно, когда публичное место имеет более специфическое или знакомое название, чем результат города. Например:

• Используйте «Наш вид с крыши» вместо «Бухарест, Румыния»
• Используйте «Пляж Копакабана» вместо «Рио-де-Жанейро, Бразилия»
• Используйте «Камера Северного берега» вместо ближайшего муниципалитета

Выбирайте внимательно: местоположение прогноза виджета нельзя изменить после создания. Создайте новый виджет, если позже вам понадобится другое место. Название для отображения все еще можно редактировать.

4. Выберите, где будет размещен виджет

Конструктор спросит Где он будет расположен? и предложит четыре предустановки в один клик. Каждая предустановка устанавливает размер, ширину и описание вместе, и вы можете настроить все это позже.

Предустановка	Размер	Ширина	Описание
Боковая панель	Стандартный	фиксированная 300 пикселей	Выкл.
Контентная колонка	Пользовательский	Заполняет колонку, до 800 пикселей	Вкл.
Лента заголовков или нижнего колонтитула	Компактный	Заполняет ленту	Выкл.
Блок бронирования	Стандартный	Заполняет блок	Вкл.

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

Под Ширина, выберите Фиксированная (220–480 пикселей) или Заполнять контейнер с необязательной максимальной шириной и расположите виджет в начале или в центре его пространства. Виджет адаптируется к ширине, которую он фактически получает, а не к размеру экрана:

• Ниже 260 пикселей он переключается на узкий макет с меньшим кольцом.
• От 480 пикселей в ширину объяснение и погодные детали перемещаются рядом с оценкой вместо того, чтобы быть ниже нее.

Виджет с фиксированной шириной все равно сжимается, когда его контейнер уже, так что он не выходит за границы на телефонах.

5. Выберите внешний вид и информацию

Лучшие настройки зависят от того, где появится виджет:

Настройка	Опции	Практическое руководство
Тема	Светлая, темная, авто	Используйте авто, когда хост-сайт уже следует теме системы посетителя.
Размер	Компактный, Стандартный, Пользовательский	Компактный подходит для лент и тесных пространств; Стандартный уравновешивает детали и пространство; Пользовательский добавляет погодную сетку.
Акцентный цвет	Предустановки или пользовательский цвет	Совпадает с цветом бренда, сохраняя достаточный контраст вокруг кольца с оценкой.
Описание	Вкл. или выкл.	Добавьте короткое объяснение, почему прогноз получил свою оценку. Не доступно в компактном размере.
Язык	14 поддерживаемых языков	Совпадает с языком страницы, на которой появится виджет.
Единицы измерения	Метрические или имперские	Выберите формат, которого ждут ваши посетители.
Время	12-часовой или 24-часовой	Соответствует конвенции, использованной в другом месте на вашем сайте.
Обновление	От 15 до 120 минут	Частота доступна в зависимости от плана учетной записи.
Брендинг	Показать или скрыть «Powered by Sunset Predictor» в нижнем колонтитуле	Скрытие доступно на Pro, Business и Enterprise.

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

6. Создайте виджет и скопируйте код для встраивания

Выберите Создать виджет. На следующем экране отображается сохраненный предварительный просмотр и три вкладки для установки: Тег скрипта, iFrame и WordPress.

Опция встраивания	Лучше всего подходит для	Что нужно знать
Тег скрипта	Большинство сайтов и пользовательских макетов	Загружается асинхронно и отображает виджет непосредственно на странице, изолированный от вашего CSS.
iFrame	Конструкторы сайтов и платформы CMS, которые блокируют сторонние скрипты	Сохраняет виджет в своем собственном документе. Включенный слушатель автоматически настраивает высоту фрейма.
WordPress	Любой сайт WordPress, блоковый или классический редактор	Код iframe с пошаговыми инструкциями для WordPress. Плагин не требуется.

Опция тега скрипта выглядит так, с автоматически вставленным вашим уникальным идентификатором виджета:

<script src="https://sunset-predictor.com/api/widget/embed.js?v=3"
        data-widget-id="wgt_your_widget_id"
        async></script>
<a href="https://sunset-predictor.com/location/your-city/?ref=widget_seo">Sunset forecast for Your City</a>

Скрипт вставляет виджет непосредственно после себя, так что вам не нужен отдельный контейнер для элемента. Маленькая текстовая ссылка ниже него является простой ссылкой на страницу прогноза для вашего местоположения. Она остается читаемой, даже если скрипты заблокированы. Планы корпоративного уровня могут удалить её.

Опция iframe содержит <iframe> плюс короткий скрипт, который изменяет размер фрейма, чтобы он соответствовал виджету:

<iframe id="sunset-widget-wgt_your_widget_id"
        src="https://sunset-predictor.com/widget/wgt_your_widget_id"
        title="Sunset forecast for Your City"
        height="200" frameborder="0" scrolling="no"
        style="display: block; width: 100%; border: none; color-scheme: normal;"></iframe>
<script>
  /* resize listener — included automatically in the copied code */
</script>

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

7. Вставьте фрагмент на ваш сайт

Добавьте код в то место, где вы хотите, чтобы отображался виджет. Точное местоположение зависит от платформы:

• На сайте с пользовательским кодом поместите его в соответствующий шаблон страницы или блок контента.
• В WordPress откройте вкладку WordPress. В блочном редакторе добавьте блок Пользовательский HTML. В классическом редакторе переключитесь на вкладку Текст. Для боковой панели или нижнего колонтитула перейдите в Внешний вид → Виджеты и добавьте виджет пользовательского HTML. Для публикации встроенного HTML требуется роль администратора или редактора (суперадминистратора в сети мультисайта).
• В конструкторе страниц, таком как Wix, Squarespace, Webflow или Elementor, используйте элемент HTML, встраиваемый или кодовый элемент.
• В системе управления контентом с жесткими правилами для скриптов используйте вкладку iFrame.

Опубликуйте или обновите страницу, затем откройте живой URL и проверьте виджет как на настольных, так и на мобильных устройствах. Убедитесь, что местоположение, язык, формат часов, единицы измерения и отступы подходят для окружающей страницы.

Если ваша CMS блокирует код для встраивания или виджет не появляется, обратитесь в поддержку Sunset Predictor за помощью с установкой.

Что происходит после того, как виджет будет активирован?

Виджет автоматически запрашивает свежие данные прогнозов в соответствии с настроенным интервалом обновления. Доступный вам интервал зависит от вашего плана, от каждых 120 минут на Бесплатном до каждых 15 минут на Корпоративном.

Из вашей панели управления вы можете:

• Изменять имя, метку, внешний вид, ширину, язык, единицы измерения, формат времени и интервал обновления без замены кода для встраивания. Изменения появляются на живых страницах в течение нескольких минут.
• Смотреть общее количество показов (отображений виджета) и кликов (посетителей, которые перешли по ссылке виджета)
• Копировать код для встраивания снова
• Приостановить, возобновить или удалить виджет

Какой план подходит для вашего сайта?

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

План	Виджеты	Ежемесячные просмотры	Самое быстрое обновление	Пользовательский размер	Удалить брендинг	Коммерческое использование
Бесплатный	1	2,000	120 минут	Нет	Нет	Нет
Pro	5	25,000	60 минут	Да	Да	Да
Бизнес	25	150,000	30 минут	Да	Да	Да
Корпоративный	Неограниченно	1,000,000	15 минут	Да	Да	Да

Потребительский план Plus имеет те же лимиты виджетов, что и бесплатный. Опции макета — предустановки размещения, фиксированная или полная ширина, и выравнивание — доступны на каждом плане, включая бесплатный.

Если виджет достигнет месячного лимита просмотров, он продолжит работать: дополнительные просмотры перестанут учитываться, и брендинг Sunset Predictor будет отображаться до следующего месяца. Всплеск трафика никогда не превратит вашу страницу в состояние ошибки.

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

Практические способы использования виджета

Самое сильное размещение связывает прогноз с решением, которое уже принимается посетителем. Каждый пример ниже ссылается на живую демонстрацию на странице демонстрации в контексте.

Отели и курорты

Разместите стандартный виджет на странице удобств, баре на крыше или на странице с локальными впечатлениями, или используйте предустановку Блок бронирования рядом с вашей формой бронирования. Используйте публичное название собственности в качестве метки для отображения и сопоставьте акцентный цвет с брендом отеля. Посмотрите виджет на пробной странице отеля, или узнайте как отели используют виджет заката, включая бесплатный 30-дневный пробный период.

Рестораны, бары и террасы

Терраса с видом на море продает больше столиков в вечер хорошего заката. Разместите стандартный виджет с описанием рядом с кнопкой «Забронировать столик», чтобы гости могли выбрать правильное время. Посмотрите виджет на пробной странице террасы ресторана.

Туристические и путеводные сайты

Добавьте виджеты, специфичные для местоположения, в городские или региональные путеводители. Страница о точках просмотра заката в Барселоне может показывать текущий прогноз для Барселоны, в то время как отдельный путеводитель по Тенерифе может использовать свой собственный виджет. Посмотрите виджет внутри пробного поста туристического блога.

Веб-камеры и сайты о серфинге

Разместите компактный виджет рядом с живой камерой или панелью текущих условий. Оценка заката добавляет быстрый контекст, не конкурируя с видеопотоком. Посмотрите компактный виджет на пробной странице веб-камеры.

Руководства по фотографии

Используйте пользовательский размер, чтобы показать облачность, вероятность дождя, видимость и ветер вместе с оценкой. Это дает читателям больше контекста, принимая решение о том, стоит ли изведывать место или упаковывать оборудование.

Страницы мероприятий и мест проведения

Для открытых площадок, где вид является частью впечатления, виджет может помочь посетителям понять прогноз заката для фиксированного местоположения площадки. Оставьте описание включенным, если ваша аудитория выиграет от простого объяснения оценки.

Экраны фойе и панели управления умного дома

Откройте URL-адрес iframe виджета (адрес src в коде iframe) на дисплее в фойе, планшете на ресепшене, киоске или карточке веб-страницы панели управления Home Assistant. Страница сама обновляется согласно интервалу плана, даже когда она остается открытой в течение нескольких дней. Если соединение пропадает, последний прогноз остается на экране вместо страницы ошибки.

Советы для лучшего встраивания

Прежде чем широко опубликовать виджет, сделайте несколько осознанных выборов:

1. Разместите его рядом с относящимся материалом. Прогноз рядом с описанием крыши более полезен, чем в общем нижнем колонтитуле.
2. Используйте конкретную метку для отображения. «Пристань Гавани» дает посетителям больше контекста, чем широкое название города, когда расположение уже очевидно.
3. Поддерживайте соответствующую плотность информации. Компактный подходит для плотных макетов; Пользовательский подходит, когда погодные данные являются частью цели страницы.
4. Не размещайте виджет с «Заполнением контейнера» внутри элемента, который сам по себе определяется своим содержимым, такого как инлайн-блочноая коробка. Вместо этого назначьте фиксированную ширину виджету.
5. Регулярно рассматривайте показы. Они показывают, получает ли размещение трафик и подходит ли вам по-прежнему текущий план.

Заключение

Виджет прогноза заката превращает изменяющиеся данные о погоде в простую, актуальную функцию сайта. Выберите одно значимое местоположение, решите, где оно будет размещено, адаптируйте дизайн под вашу аудиторию, вставьте сгенерированный код для встраивания и управляйте виджетом с одной панели. Сравните размеры в демонстрационном зале, смотрите его на пробных веб-сайтах, затем создайте ваш первый виджет прежде чем решать, где он должен находиться на вашем сайте.