Cum să adăugați un widget de prognoză live a apusului pe site-ul dvs.

Vizitatorii dvs. nu ar trebui să deschidă o altă aplicație meteo pentru a decide dacă merită să planifice în jurul apusului de diseară. Un widget de prognoză a apusului le oferă răspunsul direct pe site-ul dvs., lângă camera, destinația, webcam-ul sau informațiile despre fotografie pe care le vizualizează deja.

Widget-urile Sunset Predictor transformă o locație fixă într-o prognoză actualizată automat pe care o puteți încorpora fără a construi integrarea meteo proprie. Rezultatul este o caracteristică compactă și utilă pentru editorii de călătorii, hoteluri, restaurante, site-uri de turism, pagini de webcam și fotografi. Site-urile personale pot folosi planul Gratuit; site-urile de afaceri au nevoie de un plan plătit, iar hotelurile pot începe cu un pilot gratuit de 30 de zile.

Vedeți-l înainte de a citi mai departe:

• Deschideți constructorul de widget-uri și schimbați tema, dimensiunea și aspectul într-o previzualizare live — nu este necesar un cont.
• Răsfoiți fiecare dimensiune și temă una lângă alta în vitrina de widget-uri.
• Vedeți widget-ul în site-uri web realiste: un blog de călătorii, o pagina de start a unui hotel, o terasă de restaurant și o pagină de webcam live.

Ce arată widget-ul de prognoză a apusului

Fiecare widget oferă vizitatorilor informațiile de bază necesare dintr-o privire:

• Scorul de calitate a apusului de la 0 la 100
• O evaluare clară: Epic, Bun, Mediocru sau Sărac
• Ora locală a apusului pentru locația selectată
• Numele unei locații sau eticheta de afișare proprie
• O frază opțională care explică prognoza
• Detalii meteo opționale pentru dimensiunea Personalizată

Scorul este prezentat într-un inel colorat, iar fundalul cardului urmează evaluarea, astfel încât vizitatorii să poată înțelege perspectiva înainte de a citi numărul. De exemplu, un hotel din Santorini poate afișa prognoza pentru Oia, în timp ce un operator de webcam în San Francisco poate eticheta același tip de widget „Priveliștea Golden Gate”.

Dimensiunea Personalizată poate afișa, de asemenea, condiții meteo selectate: temperatură, acoperire cu nori, probabilitate de ploaie, umiditate, vânt, vizibilitate, presiune și calitatea aerului. Alegeți ce valori apar și ordinea în care vizitatorii le văd.

Fiecare widget face legătura cu pagina de prognoză Sunset Predictor pentru cel mai apropiat oraș (sau cu pagina principală Sunset Predictor când nu este niciun oraș în apropiere), astfel încât vizitatorii curioși să poată deschide prognoza completă într-o filă nouă fără a părăsi pagina dvs.

Widget-ul de apus vs. un widget meteo obișnuit

Un widget meteo obișnuit arată temperatura, ploaia și vântul. Nu le spune vizitatorilor dacă apusul merită vizionat: depinde de cum se combină acoperirea cu nori la diferite înălțimi, umiditatea, vizibilitatea și calitatea aerului la ora apusului. Widget-ul de apus transformă aceste condiții într-un scor și o evaluare, astfel încât vizitatorii primesc răspunsul fără a citi un tabel de prognoză. Dacă vizitatorii dvs. au nevoie și de vreme generală, dimensiunea Personalizată adaugă o grilă meteo sub scor.

Trei dimensiuni, trei teme

Cea mai rapidă modalitate de a compara opțiunile este vitrină de widget-uri, care arată toate cele nouă combinații cu scoruri de eșantion din fiecare bandă de evaluare.

Dimensiune	Ce arată	Amplasare tipică
Compactă	Un rând: scor, evaluare, oră apus, locație	Benzi de antet sau subsol, bare laterale înguste, lângă un player video
Standard	Inel de scor, evaluare, oră apus, locație, explicație opțională	Bare laterale, casete de rezervare, coloane de articole
Personalizată	Totul în Standard plus o grilă meteo pe care o configurați	Coloane de conținut, ghiduri de fotografie, pagini de condiții

Fiecare dimensiune funcționează cu o temă luminoasă, întunecată sau auto. Auto urmează setarea sistemului vizitatorului, ceea ce se potrivește site-urilor care comută deja între modurile luminos și întunecat.

De ce să adăugați un widget de apus pe site-ul dvs.?

Un widget este cel mai valoros atunci când condițiile de apus influențează ceea ce vizitatorii dvs. planifică să facă. Un ghid de destinații poate descrie unde să priviți apusul; widget-ul răspunde dacă seara aceasta pare promițătoare, fără ca vizitatorii să părăsească pagina dvs. pentru a căuta în altă parte.

Adăugați o caracteristică fără a menține un sistem de prognoză

Datele meteo, scorurile, etichetele, formatarea timpului și actualizările automate sunt gestionate pentru dvs. Instalarea este un fragment scurt de încorporare în locul unui proiect personalizat API cu interfața sa, tratarea erorilor și întreținerea continuă.

Dacă doriți să construiți propria interfață, aceleași previziuni sunt disponibile prin API-ul Sunset Predictor.

Adaptați widget-ul în designul dvs. existent

Tema, dimensiunea, culoarea accentului, lățimea și o etichetă prietenoasă pentru vizitatori, cum ar fi „Terasa de Vest”, permit ca widget-ul să se potrivească paginii dvs. Widget-ul este izolat de foaia de stil a site-ului dvs. Regulile CSS proprii pentru linkuri, margini sau fonturi nu pot distorsiona widget-ul, iar stilurile sale nu se pot infiltra în pagina dvs.

Serviți vizitatorilor internaționali

Widget-urile suportă 14 limbi: engleză, franceză, germană, spaniolă, rusă, portugheză, japoneză, română, ucraineană, arabă, ebraică, chineză simplificată, hindi și italiană. Widget-urile în arabă și ebraică se redau automat de la dreapta la stânga. De asemenea, puteți alege unități metrice sau imperiale și un ceas de 12 ore sau de 24 de ore.

Cum să vă creați primul widget

Puteți încerca constructorul și previzualizarea live înainte de a vă conecta. Este necesar un cont doar atunci când doriți să salvați widget-ul și să primiți codul de încorporare.

1. Deschideți constructorul de widget-uri

Deschideți constructorul de widget-uri Sunset Predictor și experimentați cu previzualizarea publică. Previzualizarea se actualizează pe măsură ce schimbați tema, dimensiunea, aspectul, culoarea, limba și celelalte setări de afișare. Trageți glisorul de scor al previzualizării pentru a vedea cum arată fiecare bandă de evaluare și comutați lățimea slotului (240 px, 320 px, 400 px sau complet) pentru a testa amplasările înguste și largi.

Sfat: puteți deschide constructorul cu propriul oraș deja selectat adăugând coordonatele acestuia la adresă, de exemplu presetul constructorului pentru Lisabona.

Când sunteți gata să salvați, conectați-vă sau creați un cont gratuit. Din tabloul de bord al widget-ului dvs., selectați Creazați Widget. Planul Gratuit acoperă un widget pe un site personal, necomercial; pentru un site de afaceri, alegeți un plan plătit.

2. Denumiți widget-ul pentru tabloul de bord propriu

Introduceți un nume intern scurt, cum ar fi „Pagina principală a hotelului Lisabona” sau „Webcam Brighton”. Vizitatorii văd eticheta locației selectate, nu acest nume de management, așa că folosiți ceva care să ajute echipa dvs. să recunoască widget-ul mai târziu.

3. Căutați locația prognozei

Tastați cel puțin trei caractere și selectați orașul corect din rezultate. Coordonatele alese determină prognoza și ora locală a apusului.

De asemenea, puteți introduce un nume de afișare opțional. Acest lucru este util atunci când locul către public este mai specific sau mai familiar decât rezultatul orașului. De exemplu:

• Folosiți „Vedere noastră de pe Terasă” în loc de „București, România”
• Folosiți „Plaja Copacabana” în loc de „Rio de Janeiro, Brazilia”
• Folosiți „Camera North Shore” în loc de municipiul cel mai apropiat

Alegeți cu atenție: locația prognozei unui widget nu poate fi schimbată după creare. Creați un widget nou dacă mai târziu aveți nevoie de un alt loc. Numele de afișare poate fi totuși editat.

4. Alegeți unde va merge widget-ul

Constructorul întreabă Unde va merge? și oferă patru preseturi la un clic. Fiecare preset setează dimensiunea, lățimea și descrierea împreună, iar apoi puteți ajusta totul după aceea.

Preset	Dimensiune	Lățime	Descriere
Bară laterală	Standard	Fix 300 px	Oprită
Coloană de conținut	Personalizat	Umple coloana, până la 800 px	Pornit
Bandă de antet sau subsol	Compact	Umple banda	Oprită
Casetă de rezervări	Standard	Umple caseta	Pornit

Pe planurile fără dimensiunea Personalizată, presetul coloanei de conținut folosește dimensiunea Standard cu descrierea pornită.

Sub Lățime, alegeți Fixă (220-480 px) sau Umple containerul cu o lățime maximă opțională și aliniați widget-ul la începutul sau centrul spațiului său. Widget-ul se adaptează lățimii pe care o primește efectiv, nu dimensiunii ecranului:

• Sub 260 px, se schimbă la un aspect îngust, cu un inel mai mic.
• De la 480 px lățime, explicația și detaliile meteo se mută lângă scor în loc de sub el.

Un widget cu lățime fixă se micșorează în continuare când containerul său este mai îngust, astfel încât să nu depășească pe telefoane.

5. Alegeți apariția și informațiile

Cele mai bune setări depind de unde va apărea widget-ul:

Setare	Opțiuni	Ghid practic
Temă	Luminoasă, întunecată, auto	Folosiți auto când site-ul gazdă respectă deja tema sistemului vizitatorului.
Dimensiune	Compactă, Standard, Personalizată	Compactă se potrivește benzilor și locurilor înguste; Standard echilibrează detaliul și spațiul; Personalizată adaugă o grilă meteo.
Culoare accent	Preseturi sau culoare personalizată	Potriviți o culoare de brand păstrând suficient contrast în jurul inelului de scor.
Descriere	Pornit sau oprit	Adăugați o scurtă explicație a motivului pentru care prognoza a primit scorul. Nu este disponibilă în dimensiunea Compactă.
Limbă	14 limbi suportate	Potriviți limba paginii în care va apărea widget-ul.
Unități	Metrice sau imperiale	Alegeți formatul pe care vizitatorii dvs. îl așteaptă.
Timp	12 ore sau 24 de ore	Potriviți convenția folosită în alte părți ale site-ului dvs.
Refresh	15 până la 120 de minute	Frecvența disponibilă depinde de planul contului.
Marcă	Afișați sau ascundeți subsolul „Powered by Sunset Predictor”	Ascunderea este disponibilă pe Pro, Business și Enterprise.

Pentru dimensiunea Personalizată, selectați și reordonați detaliile meteo care contează pentru publicul dvs. Un fotograf ar putea prioritiza norii, vizibilitatea și probabilitatea de ploaie. Un hotel ar putea prefera temperatura, norii și vântul.

6. Creați widget-ul și copiați codul de încorporare

Selectați Crează Widget. Ecranul următor arată previzualizarea salvată și trei file de instalare: Script Tag, iFrame și WordPress.

Opțiune de încorporare	Cel mai bun pentru	Ce să știți
Script Tag	Majoritatea site-urilor și aspectelor personalizate	Se încarcă asincron și redă widget-ul direct în pagină, izolat de CSS-ul dvs.
iFrame	Construitori de site-uri și platforme CMS care blochează scripturile terțe	Păstrează widget-ul într-un document propriu. Listenerul inclus ajustează automat înălțimea cadrului.
WordPress	Orice site WordPress, editor de blocuri sau editor clasic	Codul iframe cu instrucțiuni pas cu pas pentru WordPress. Nu este necesar plugin.

Opțiunea Script Tag arată astfel, cu ID-ul dvs. unic de widget inserat automat:

<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>

Scriptul inserează widget-ul direct după sine, astfel încât nu aveți nevoie de un element container separat. Textul mic de link de sub el este un link simplu de atribuire către pagina de prognoză pentru locul dvs. Rămâne lizibil chiar și dacă scripturile sunt blocate. Planurile Enterprise îl pot elimina.

Opțiunea iframe conține un <iframe> plus un scurt script care redimensionează cadrul pentru a se potrivi cu widget-ul:

<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>

Folosiți butonul Copiați Codul în loc să editați ID-ul generat manual.

7. Lipiți fragmentul pe site-ul dvs.

Adăugați codul unde doriți să apară widget-ul. Locația exactă depinde de platformă:

• Pe un site cu cod personalizat, plasați-l în șablonul de pagină relevant sau blocul de conținut.
• În WordPress, deschideți fila WordPress. În editorul de blocuri, adăugați un bloc HTML personalizat. În editorul clasic, schimbați la fila Text. Pentru o bară laterală sau subsol, mergeți la Apariție → Widget-uri și adăugați un widget HTML personalizat. Publicarea HTML încorporat necesită rolul de Administrator sau Editor (Super Admin într-o rețea Multisite).
• Într-un constructor de pagină, cum ar fi Wix, Squarespace, Webflow sau Elementor, folosiți un element HTML, de încorporare sau de cod.
• Într-un CMS cu reguli stricte de scripturi, folosiți fila iFrame.

Publicați sau actualizați pagina, apoi deschideți URL-ul live și verificați widget-ul pe desktop și mobil. Confirmați că locația, limba, formatul ceasului, unitățile și spațierea se potrivesc paginii din jurul său.

Dacă CMS-ul dvs. blochează codul de încorporare sau widget-ul nu apare, contactați suportul Sunset Predictor pentru ajutorul cu instalarea.

Ce se întâmplă după ce widget-ul este live?

Widget-ul solicită automat date de prognoză proaspete conform intervalului de refresh configurat. Intervalul disponibil pentru dvs. depinde de planul dvs., de la fiecare 120 de minute pe Gratuiț până la fiecare 15 minute pe Enterprise.

Din tabloul de bord puteți:

• Editați numele, eticheta, apariția, lățimea, limba, unitățile, formatul timpului și intervalul de refresh fără a înlocui codul de încorporare. Modificările apar pe paginile live în câteva minute.
• Vedeți totalul impresiilor (redări de widget) și clicurile (vizitatori care au urmat linkul widget-ului)
• Copiați codul de încorporare din nou
• Puneți pe pauză, reluați sau ștergeți un widget

Ce plan se potrivește site-ului dvs.?

Puteți crea un widget de marcă pe planul Gratuit. Planurile plătite suportă utilizarea comercială, mai multe widget-uri, limite lunare mai mari pentru vizualizări, refresh-uri mai rapide, dimensiunea Personalizată și eliminarea opțională a mărcii. Puteți compara planurile și prețurile curente înainte de a alege un nivel.

Plan	Widget-uri	Vizualizări lunare	Cel mai rapid refresh	Dimensiunea Personalizată	Eliminarea mărcii	Utilizare comercială
Gratuit	1	2,000	120 de minute	Nu	Nu	Nu
Pro	5	25,000	60 de minute	Da	Da	Da
Business	25	150,000	30 de minute	Da	Da	Da
Enterprise	Nelimitat	1,000,000	15 de minute	Da	Da	Da

Planul consumer Plus are aceleași limite de widget-uri ca și Gratuit. Opțiunile de layout — preseturi de amplasare, lățime fixă sau completă și aliniere — sunt disponibile pe fiecare plan, inclusiv Gratuit.

Dacă un widget atinge alocația sa lunară de vizualizări, continuă să funcționeze: vizualizările suplimentare se opresc din contorizare, iar branding-ul Sunset Predictor este afișat până în luna următoare. Un vârf de trafic nu transformă niciodată pagina dvs. într-o stare de eroare.

Amintiți-vă că widget-urile active și pauzate contează amândouă pentru numărul de widget-uri permis de planul dvs. Ștergeți un widget dacă nu mai aveți nevoie de el și doriți să eliberați acel loc.

Modalități practice de a folosi widget-ul

Cel mai puternic amplasament conectează prognoza la o decizie pe care vizitatorul o ia deja. Fiecare exemplu de mai jos face legătura cu o simulare live pe pagina demo contextuală.

Hoteluri și stațiuni

Plasați un widget Standard pe o pagina de facilități, la un bar pe acoperiș sau la o jurisdicție de experiențe locale, sau folosiți presetul Casetă de rezervări lângă formularul dvs. de rezervare. Utilizați numele public al proprietății ca etichetă de afișare și potriviți culoarea accentului cu marca hotelului. Vedeți widget-ul pe o pagina de start a unui hotel de exemplu sau citiți cum folosesc hotelurile widget-ul de apus, inclusiv pilotul gratuit de 30 de zile.

Restaurante, baruri și terase

O terasă cu vedere la mare vinde mai multe mese pe o seară cu apus bun. Puneți un widget Standard cu descrierea lângă butonul „Rezerva o masă”, astfel încât oaspeții să poată alege intervalul de timp potrivit. Vedeți widget-ul pe o pagina de terasă a unui restaurant de exemplu.

Site-uri de turism și destinații

Adăugați widget-uri specifice locației pentru ghiduri de orașe sau regionale. O pagină despre punctele de vedere ale apusului din Barcelona poate arăta prognoza actuală a Barcelonei, în timp ce un ghid pentru Tenerife poate folosi propriul widget. Vedeți widget-ul într-o postare exemplu de blog de călătorie.

Site-uri de webcam și surf

Poziționați un widget Compact lângă o cameră de live sau panoul de condiții curente. Scorul apusului adaugă un context rapid fără a concura cu fluxul video. Vedeți widget-ul Compact pe o pagina de webcam de exemplu.

Ghiduri de fotografie

Folosiți dimensiunea Personalizată pentru a afișa norii, probabilitatea de ploaie, vizibilitatea și vântul alături de scor. Acest lucru oferă cititorilor mai mult context atunci când decid dacă să exploreze o locație sau să ia echipamentul.

Pagini de evenimente și locații

Pentru locațiile în aer liber unde priveliștea face parte din experiență, un widget poate ajuta vizitatorii să înțeleagă perspectiva apusului pentru locația fixă a locației. Țineți descrierea activată dacă publicul dvs. beneficiază de o explicație simplă, în limbaj comun, a scorului.

Ecrane de hol și panouri de deschidere smart-home

Deschideți URL-ul iframe-ului widget-ului (adresa src în codul iframe) pe un display de hol, tabletă de recepție, kiosk sau card de pagină Home Assistant. Pagina se reîmprospătează singură la intervalul planului, chiar și când rămâne deschisă zile întregi. Dacă conexiunea se pierde, ultima prognoză rămâne pe ecran în locul unei pagini de eroare.

Sfaturi pentru o încorporare mai bună

Înainte de a publica widget-ul pe scară largă, faceți câteva alegeri deliberate:

1. Puneți-l aproape de conținutul asociat. O prognoză lângă o descriere de acoperiș este mai utilă decât una ascunsă într-un subsol generic.
2. Folosiți o etichetă de afișare specifică. „Terasa Harbor” oferă vizitatorilor mai mult context decât un nume larg de oraș când locația este deja evidentă.
3. Mențineți densitatea informațională adecvată. Compact funcționează pentru layout-urile înguste; Personalizat funcționează atunci când detaliul meteo este parte din scopul paginii.
4. Nu plasați un widget „Umple containerul” într-un element care își dimensionează în funcție de conținutul său, cum ar fi o casetă inline-block. Dați widget-ului o lățime fixă acolo, în schimb.
5. Revizuiți periodic impresiile. Ele arată dacă amplasamentul primește trafic și dacă planul dvs. actual mai se potrivește.

Concluzie

Un widget de prognoză a apusului transformă datele meteo în schimbare într-o caracteristică simplă și relevantă pentru site. Alegeți o locație semnificativă, decideți unde merge, personalizați designul pentru publicul dvs., lipiți codul de încorporare generat și gestionați widget-ul dintr-un singur tablou de bord. Comparați dimensiunile în vitrină, vedeți-l pe site-uri web exemplu și apoi creați-vă primul widget înainte de a decide unde aparține pe site-ul dvs.