Як додати віджет прогнозу заходу сонця на ваш вебсайт

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

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

Побачте це, перш ніж читати далі:

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

Що показує віджет прогнозу заходу сонця

Кожен віджет надає відвідувачам ключову інформацію, яку вони можуть отримати з першого погляду:

• Оцінка якості заходу сонця від 0 до 100
• Ясний рейтинг: Чудовий, Добрий, Задовільний або Поганий
• Місцевий час заходу сонця для обраного місця
• Назва місця або ваш власний відображуваний підпис
• Додаткове речення, що пояснює прогноз
• Додаткові погодні деталі для розміру Custom

Результат представлений у кольоровій кодованій обручці, і фон картки відповідає рейтингу, так що відвідувачі можуть зрозуміти прогноз раніше, ніж прочитати число. Наприклад, готель у Санторіні може показати прогноз для Оіі, тоді як оператор вебкамери в Сан-Франциско може позначити такого ж типу віджет як “Вигляд на Золоті Ворота.”

Розмір Custom також може показати обрані погодні умови: температуру, хмарність, ймовірність дощу, вологість, вітер, видимість, тиск і якість повітря. Ви обираєте, які значення відображаються, і в якому порядку відвідувачі їх бачать.

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

Віджет заходу сонця проти звичайного віджета погоди

Звичайний віджет погоди показує температуру, дощ і вітер. Він не говорить відвідувачам, чи буде вартий перегляду захід сонця: це залежить від того, як хмарність на різних висотах, вологість, видимість і якість повітря поєднуються на час заходу сонця. Віджет заходу сонця перетворює ці умови в єдину оцінку і рейтинг, щоб відвідувачі отримали відповідь без читання таблиці прогнозів. Якщо вашим відвідувачам також потрібні загальні погодні дані, розмір Custom додає решітку погоди під оцінкою.

Три розміри, три теми

Найшвидший спосіб порівняти варіанти — це виставковий зал віджетів, який показує всі дев'ять комбінацій з прикладами оцінок від кожної групи рейтингів.

Розмір	Що показує	Типове розміщення
Компактний	Один ряд: оцінка, рейтинг, час заходу сонця, місце	Заголовки або колонтитули, вузькі бокові панелі, поруч із плеєром
Стандартний	Кільце оцінки, рейтинг, час заходу сонця, місце, додаткове пояснення	Бокові панелі, коробки для бронювання, колонки статей
Користувацький	Усе в Стандартному, плюс погодна решітка, яку ви конфігуруєте	Колонки вмісту, путівники з фотографій, сторінки умов

Кожен розмір працює з світлою, темною, або авто темою. Авто слідує системним налаштуванням відвідувача, що підходить для вебсайтів, які вже переключаються між світлим і темним режимами.

Чому варто додати віджет заходу сонця на ваш вебсайт?

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

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

Дані про погоду, оцінювання, підписи, форматування часу та автоматичні оновлення обробляються за вас. Встановлення займає коротке вбудоване вставлення, а не спеціальний проект API зі своєю інтерфейсом, обробкою помилок і поточним обслуговуванням.

Якщо ви все ж хочете створити свій власний інтерфейс, ті самі прогнозування доступні через API Sunset Predictor.

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

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

Обслуговування міжнародних відвідувачів

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

Як створити свій перший віджет

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

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

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

Порада: ви можете відкрити конструктор з вашим власним містом уже обраним, додавши його координати до адреси, наприклад конструктор, налаштований на Лісабон.

Коли ви готові зберегти, увійдіть або створіть безкоштовний обліковий запис. На інформаційній панелі віджетів оберіть Створити віджет. Безкоштовний план покриває один віджет на особистому, некомерційному вебсайті; для бізнесового вебсайту оберіть платний план.

2. Назвіть віджет для вашої власної інформаційної панелі

Введіть коротке внутрішнє ім’я, наприклад, “Головна сторінка готелю в Лісабоні” або “Вебкамера в Брайтоні.” Відвідувачі бачать вибраний підпис місця, а не це керівне ім’я, тому використовуйте те, що допоможе вашій команді пізнати віджет пізніше.

3. Знайдіть місце прогнозу

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

Ви також можете ввести додаткове відображуване ім'я. Це корисно, коли загальнодоступне місце має більш конкретне або знайоме ім’я, ніж результат міста. Наприклад:

• Використовуйте “Наш Вид на Дах” замість “Бухарест, Румунія”
• Використовуйте “Пляж Копакабана” замість “Ріо-де-Жанейро, Бразилія”
• Використовуйте “Камера Північного Берега” замість найближчого муніципалітету

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

4. Виберіть, де буде розміщено віджет

Конструктор запитує Де це буде? і пропонує чотири налаштування одним кліком. Кожне налаштування встановлює розмір, ширину та опис разом, і ви можете налаштувати все це згодом.

Налаштування	Розмір	Ширина	Опис
Бокова панель	Стандартний	Фіксований 300 пікселів	Вимкнено
Колонка вмісту	Користувацький	Заповнює колонку, до 800 пікселів	Включено
Стріп заголовка або підвалу	Компактний	Заповнює стрічку	Вимкнено
Коробка бронювання	Стандартний	Заповнює коробку	Включено

На планах без розміру Custom, налаштування колонки вмісту використовує розмір Standard з описом увімкненим.

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

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

Віджет фіксованої ширини все ще зменшується, коли його контейнер вузький, тому він не буде вилазити за межі на телефонах.

5. Виберіть зовнішній вигляд і інформацію

Найкращі налаштування залежать від того, де віджет з'явиться:

Налаштування	Варіанти	Практичні рекомендації
Тема	Світла, темна, авто	Використовуйте авто, коли вебсайт господаря вже слідує системній темі відвідувача.
Розмір	Компактний, Стандартний, Користувацький	Компактний підходить для стрічок і вузьких просторів; Стандартний балансує деталі і простір; Користувацький додає погодну решітку.
Колір акценту	Налаштування або власний колір	Відповідає кольору бренду, зберігаючи достатню контрастність навколо кілець оцінки.
Опис	Увімкнено або вимкнено	Додайте коротке пояснення, чому прогноз отримав свою оцінку. Недоступно в Компактному розмірі.
Мова	14 підтримуваних мов	Відповідає мові сторінки, де з'явиться віджет.
Одиниці	Метричні або імперські	Виберіть формат, який очікують ваші відвідувачі.
Час	12-годинний або 24-годинний	Відповідає конвенції, що використовується в інших місцях на вашому вебсайті.
Оновлення	Від 15 до 120 хвилин	Доступна частота залежить від плану облікового запису.
Брэндинг	Показати чи приховати підвал “З підтримкою Sunset Predictor”	Приховування доступне на Pro, Business і Enterprise.

Для Користувацького розміру виберіть і змініть порядок погодних деталей, які важливі для вашої аудиторії. Фотограф може віддавати перевагу хмарності, видимості та ймовірності дощу. Готель може віддати перевагу температурі, хмарам і вітру.

6. Створіть віджет і скопіюйте код вбудовування

Виберіть Створити віджет. Наступний екран показує збережене попереднє зображення і три вкладки встановлення: Тег скрипта, iFrame, і WordPress.

Вбудована опція	Найкраще для	Що варто знати
Тег скрипта	Більшість вебсайтів і кастомних макетів	Завантажується асинхронно і відображає віджет безпосередньо на сторінці, ізольовано від вашого CSS.
iFrame	Конструктори вебсайтів і платформи CMS, які блокують сторонні скрипти	Зберігає віджет в своєму власному документі. Включений слухач автоматично налаштовує висоту фрейму.
WordPress	Будь-який сайт WordPress, редактор блоків або класичний редактор	Код фрейма з покроковими інструкціями для 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">Прогноз заходу сонця для Вашого міста</a>

Скрипт вставляє віджет безпосередньо після себе, тому вам не потрібен окремий контейнерний елемент. Малий текстовий лінк під ним є простим атрибуційним посиланням на сторінку прогнозу для вашого місця. Він залишається читабельним навіть якщо скрипти заблоковано. Плани Enterprise можуть видалити його.

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

<iframe id="sunset-widget-wgt_your_widget_id"
        src="https://sunset-predictor.com/widget/wgt_your_widget_id"
        title="Прогноз заходу сонця для Вашого міста"
        height="200" frameborder="0" scrolling="no"
        style="display: block; width: 100%; border: none; color-scheme: normal;"></iframe>
<script>
  /* слухач зміни розміру — автоматично включено в скопійований код */
</script>

Використовуйте кнопку Копіювати код замість редагування згенерованого ідентифікатора вручну.

7. Вставте фрагмент коду на ваш вебсайт

Додайте код там, де ви хочете, щоб віджет з’явився. Точне місце залежить від платформи:

• На власноруч кодованому сайті вставте його в відповідний шаблон сторінки або вмістовий блок.
• У WordPress відкрийте вкладку WordPress. У редакторі блоків додайте блок Кастомне HTML. У класичному редакторі перейдіть на вкладку Текст. Для бокової панелі або нижнього колонтитула перейдіть у Зовнішній вигляд → Віджети і додайте кастомний HTML віджет. Опублікування вбудованого HTML потребує ролі Адміністратора або Редактора (Супер Адміністратор у мультисайтевій мережі).
• У конструкторі сторінок, такому як Wix, Squarespace, Webflow, або Elementor, використовуйте елемент HTML, вбудовування або коду.
• У системі управління контентом зі строгими правилами до скриптів використовуйте вкладку iFrame.

Опублікуйте або оновите сторінку, потім відкрийте живий URL-адрес і перевірте віджет як на робочому столі, так і на мобільному. Переконайтеся, що місце розташування, мова, формат годинника, одиниці і форматування підходять сторінці навколо нього.

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

Що відбувається після того, як віджет став живим?

Віджет автоматично запитує нові дані прогнозу згідно з налаштованим інтервалом оновлення. Інтервал, який вам доступний, залежить від вашого плану, від кожних 120 хвилин на Безкоштовному до кожних 15 хвилин на Ентерпрайз.

З вашої панелі управління ви можете:

• Змінювати ім'я, підпис, вигляд, ширину, мову, одиниці, формат часу і інтервал оновлення без заміни коду вбудовування. Зміни відображуються на живих сторінках протягом декількох хвилин.
• Дивитися загальну кількість показів (покази віджета) і кліки (відвідувачі, які слідували посиланню віджета)
• Копіювати код вбудовування знову
• Призупиняти, відновлювати або видаляти віджет

Який план підходить для вашого вебсайту?

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

План	Віджети	Щомісячні перегляди	Найшвидше оновлення	Розмір Custom	Видалення брендингу	Комерційне використання
Безкоштовний	1	2,000	120 хвилин	Ні	Ні	Ні
Pro	5	25,000	60 хвилин	Так	Так	Так
Business	25	150,000	30 хвилин	Так	Так	Так
Enterprise	Необмежено	1,000,000	15 хвилин	Так	Так	Так

Споживачевий план Plus має ті ж ліміти на віджети, що і Безкоштовний. Варіанти макету — налаштування розміщення, фіксована або повна ширина, і вирівнювання — доступні на всіх планах, включаючи Безкоштовний.

Якщо віджет досягає свого місячного ліміту переглядів, він продовжує працювати: додаткові перегляди перестають враховуватися, і брендинг Sunset Predictor показується до наступного місяця. Пікове навантаження ніколи не перетворює вашу сторінку в стан помилки.

Запам'ятайте, що активні та призупинені віджети обидва враховуються до кількості віджетів, дозволених вашим планом. Видаліть віджет, якщо він більше не потрібний і ви хочете звільнити цьому місце.

Практичні способи використання віджета

Найсильніше розміщення пов'язує прогноз з рішенням, яке відвідувач вже приймає. Кожен приклад нижче посилається на живу макетну сторінку на сторінці демонстрації в контексті.

Готелі та курорти

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

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

Тераса з видом на море продає більше столів в гарний вечір заходу сонця. Розмістіть Стандартний віджет з описом поруч із вашою кнопкою “Замовити столик”, щоб гості могли вибрати правильний час. Дивіться віджет на зразковій сторінці тераси ресторану.

Туристичні та направлені вебсайти

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

Вебкамера і серфінг вебсайти

Розмістіть Компактний віджет поруч із живою камерою або панеллю поточних умов. Оцінка заходу сонця додає швидкий контекст, не конкуруючи з відеопотоком. Дивіться Компактний віджет на зразковій сторінці вебкамери.

Путівники з фотографії

Використовуйте розмір Custom, щоб показати хмари, ймовірність дощу, видимість і вітер разом з оцінкою. Це надає читачам більше контексту, коли вони вирішують, чи варто розвідати місце або пакувати обладнання.

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

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

Екрани лобі та панелі розумного будинку

Відкрийте URL-адресу iframe віджета (адресу src у коді iframe) на дисплеї в лобі, планшеті на ресепшені, кіосці або картці вебсторінки домашнього асистента. Сторінка сама оновлюється за інтервалом плану, навіть якщо вона залишається відкритою протягом днів. Якщо з'єднання обривається, останній прогноз залишається на екрані замість сторінки з помилкою.

Поради для кращого вбудовування

Перед тим, як широко опублікувати віджет, зробіть кілька свідомих виборів:

1. Розмістіть його біля пов’язаного вмісту. Прогноз поруч із описом даху є більш корисним, ніж той, що схований у загальному підвалі.
2. Використовуйте специфічний відображуваний підпис. “Тераса Гавані” дає більше контексту, ніж широке ім’я міста, коли місцезнаходження вже очевидне.
3. Тримайте щільність інформації відповідною. Компактний підходить для щільних макетів; Користувацький підходить, коли деталі погоди є частиною мети сторінки.
4. Не розміщуйте віджет “Заповнити контейнер” всередині елемента, який самогодується своїм вмістом, такого як коробка inline-block. Дайте віджету фіксовану ширину там замість цього.
5. Регулярно перевіряйте покази. Вони показують, чи отримує розміщення трафік і чи підходить ваш поточний план.

Висновок

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