Come aggiungere un widget di previsione del tramonto in diretta al tuo sito web

I tuoi visitatori non dovrebbero dover aprire un'altra app meteo per decidere se stasera vale la pena di pianificare. Un widget di previsione del tramonto mette la risposta direttamente sul tuo sito web, accanto alla stanza, alla destinazione, alla webcam o alle informazioni fotografiche che stanno già visualizzando.

I Sunset Predictor Widgets trasformano un luogo fisso in una previsione aggiornata automaticamente che puoi incorporare senza dover costruire la tua integrazione meteo. Il risultato è una caratteristica compatta e utile per editori di viaggi, hotel, ristoranti, siti web di turismo, pagine webcam e fotografi. I siti web personali possono utilizzare il piano gratuito; i siti web aziendali necessitano di un piano a pagamento e gli hotel possono iniziare con un pilot gratuito di 30 giorni.

Guardalo prima di leggere oltre:

• Apri il costruttore di widget e cambia il tema, la dimensione e il layout in un'anteprima in tempo reale — nessun account richiesto.
• Naviga attraverso ogni dimensione e tema affiancati nella galleria dei widget.
• Vedi il widget all'interno di siti web realistici: un blog di viaggi, una homepage di hotel, una terrazza di ristorante e una pagina webcam in diretta.

Cosa mostra il widget di previsione del tramonto

Ogni widget offre ai visitatori le informazioni principali di cui hanno bisogno a colpo d'occhio:

• Un punteggio di qualità del tramonto da 0 a 100
• Una valutazione chiara: Epico, Buono, Discreto o Scarso
• L'orario locale del tramonto per la località selezionata
• Un nome del luogo o la tua etichetta di visualizzazione
• Una frase opzionale che spiega la previsione
• Dettagli meteo opzionali nella dimensione Personalizzata

Il punteggio è presentato in un anello a codice colore, e lo sfondo della scheda segue la valutazione, così i visitatori possono comprendere le prospettive prima di leggere il numero. Ad esempio, un hotel a Santorini può mostrare la previsione per Oia, mentre un operatore di webcam a San Francisco può etichettare lo stesso tipo di widget "Vista sul Golden Gate".

La dimensione Personalizzata può anche mostrare condizioni meteo selezionate: temperatura, copertura nuvolosa, probabilità di pioggia, umidità, vento, visibilità, pressione e qualità dell'aria. Puoi scegliere quali valori mostrare e l'ordine in cui i visitatori li vedono.

Ogni widget si collega alla pagina delle previsioni di Sunset Predictor per la città più vicina (o alla homepage di Sunset Predictor quando non c'è nessuna città nelle vicinanze), quindi i visitatori curiosi possono aprire la previsione completa in una nuova scheda senza abbandonare la tua pagina.

Widget del tramonto vs. un normale widget meteo

Un normale widget meteo mostra temperatura, pioggia e vento. Non dice ai visitatori se vale la pena guardare il tramonto: ciò dipende da come si combinano la copertura nuvolosa a diverse altezze, l'umidità, la visibilità e la qualità dell'aria al momento del tramonto. Il widget del tramonto trasforma quelle condizioni in un punteggio e una valutazione, così i visitatori ottengono la risposta senza leggere una tabella di previsioni. Se ai tuoi visitatori servono anche le informazioni meteo generali, la dimensione Personalizzata aggiunge una griglia meteo sotto il punteggio.

Tre dimensioni, tre temi

Il modo più veloce per confrontare le opzioni è la galleria dei widget, che mostra tutte le nove combinazioni con punteggi campione da ogni fascia di valutazione.

Dimensione	Cosa mostra	Posizionamento tipico
Compatto	Un'unica riga: punteggio, valutazione, orario del tramonto, posizione	Strisce di intestazione o piè di pagina, barre laterali strette, accanto a un lettore video
Standard	Anello del punteggio, valutazione, orario del tramonto, posizione, spiegazione opzionale	Barre laterali, box di prenotazione, colonne di articoli
Personalizzato	Tutto in Standard più una griglia meteo che configuri	Colonne di contenuto, guide fotografiche, pagine di condizioni

Ogni dimensione funziona con un tema chiaro, scuro o auto. Auto segue l'impostazione del sistema del visitatore, che si adatta ai siti web che già commutano tra modalità chiara e scura.

Perché aggiungere un widget del tramonto al tuo sito web?

Un widget è più prezioso quando le condizioni del tramonto influenzano ciò che i tuoi visitatori pianificano di fare. Una guida delle destinazioni può descrivere dove guardare il tramonto; il widget risponde se stasera sembra promettente, senza che i visitatori debbano lasciare la tua pagina per cercare altrove.

Aggiungi una funzione senza mantenere un sistema di previsioni

Dati meteo, punteggi, etichette, formattazione dell'ora e aggiornamenti automatici sono gestiti per te. L'installazione è un breve snippet incorporato anziché un progetto API personalizzato con la propria interfaccia, gestione degli errori e manutenzione continua.

Se vuoi costruire la tua interfaccia, le stesse previsioni sono disponibili tramite l'API di Sunset Predictor.

Adatta il widget al design esistente

Tema, dimensione, colore di accento, larghezza e un'etichetta amichevole per i visitatori come "Terrazza Ovest" permettono di abbinare il widget alla tua pagina. Il widget è isolato dal foglio di stile del tuo sito. Le tue regole CSS per link, padding o font non lo distorceranno, e i suoi stili non si diffonderanno nella tua pagina.

Servi i visitatori internazionali

I widget supportano 14 lingue: inglese, francese, tedesco, spagnolo, russo, portoghese, giapponese, rumeno, ucraino, arabo, ebraico, cinese semplificato, hindi e italiano. I widget in arabo ed ebraico si rendono automaticamente da destra a sinistra. Puoi anche scegliere unità metriche o imperiali e un orologio a 12 o 24 ore.

Come creare il tuo primo widget

Puoi provare il costruttore e l'anteprima dal vivo prima di fare il login. È necessario un account solo quando desideri salvare il widget e ricevere il suo codice di incorporamento.

1. Apri il costruttore di widget

Apri il costruttore di widget di Sunset Predictor e sperimenta con l'anteprima pubblica. L'anteprima si aggiorna mentre cambi tema, dimensione, layout, colore, lingua e altre impostazioni di visualizzazione. Trascina il cursore del punteggio di anteprima per vedere come appare ogni fascia di valutazione, e modifica la larghezza dello slot (240 px, 320 px, 400 px o pieno) per testare posizionamenti stretti e larghi.

Suggerimento: puoi aprire il costruttore con la tua città già selezionata aggiungendo le sue coordinate all'indirizzo, ad esempio il preset del costruttore per Lisbona.

Quando sei pronto per salvare, effettua il login o crea un account gratuito. Dal tuo dashboard dei widget, seleziona Crea Widget. Il piano gratuito copre un widget su un sito web personale e non commerciale; per un sito web aziendale, scegli un piano a pagamento.

2. Nomina il widget per il tuo dashboard

Inserisci un breve nome interno come "Homepage Hotel Lisbona" o "Webcam Brighton". I visitatori vedono l'etichetta del luogo selezionato, non questo nome di gestione, quindi usa qualcosa che aiuti il tuo team a riconoscere il widget più tardi.

3. Cerca la località della previsione

Digita almeno tre caratteri e seleziona la città corretta dai risultati. Le coordinate scelte determinano la previsione e l'orario locale del tramonto.

Puoi anche inserire un nome di visualizzazione opzionale. Questo è utile quando il luogo di fronte al pubblico ha un nome più specifico o familiare rispetto al risultato della città. Ad esempio:

• Usa "Vista dal nostro tetto" invece di "Bucarest, Romania"
• Usa "Spiaggia di Copacabana" invece di "Rio de Janeiro, Brasile"
• Usa "Fotocamera North Shore" invece del comune più vicino

Scegli con attenzione: la località di previsione di un widget non può essere cambiata dopo la creazione. Crea un nuovo widget se in seguito hai bisogno di un luogo diverso. Il nome di visualizzazione può ancora essere modificato.

4. Scegli dove andrà il widget

Il costruttore chiede Dove andrà? e offre quattro preset con un solo click. Ogni preset imposta dimensione, larghezza e descrizione insieme, e puoi affinare tutto successivamente.

Preset	Dimensione	Larghezza	Descrizione
Sidebar	Standard	Fisso 300 px	Disattivato
Colonna di contenuto	Personalizzato	Riempie la colonna, fino a 800 px	Attivato
Striscia di intestazione o piè di pagina	Compatto	Riempie la striscia	Disattivato
Scatola di prenotazione	Standard	Riempie la scatola	Attivato

Nei piani senza la dimensione Personalizzata, il preset di colonna di contenuto utilizza la dimensione Standard con la descrizione attivata.

Sotto Larghezza, scegli Fisso (220–480 px) o Riempi contenitore con una larghezza massima opzionale, e allinea il widget all'inizio o al centro del suo spazio. Il widget si adatta alla larghezza che davvero riceve, non alla dimensione dello schermo:

• Sotto i 260 px, passa a un layout stretto con un anello più piccolo.
• Da 480 px di larghezza, la spiegazione e i dettagli meteo si spostano accanto al punteggio invece di sotto di esso.

Un widget a larghezza fissa si riduce comunque quando il suo contenitore è più stretto, quindi non straborda sui telefoni.

5. Scegli l'aspetto e le informazioni

Le migliori impostazioni dipendono da dove apparirà il widget:

Impostazione	Opzioni	Guida pratica
Tema	Chiaro, scuro, auto	Usa auto quando il sito host segue già il tema del sistema del visitatore.
Dimensione	Compatto, Standard, Personalizzato	Compatto si adatta a strisce e spazi stretti; Standard bilancia dettaglio e spazio; Personalizzato aggiunge una griglia meteo.
Colore di accento	Preset o colore personalizzato	Abbinare un colore di marca mantenendo abbastanza contrasto attorno all'anello del punteggio.
Descrizione	Attivato o disattivato	Aggiungi una breve spiegazione del motivo per cui la previsione ha ricevuto il suo punteggio. Non disponibile nella dimensione Compatta.
Lingua	14 lingue supportate	Abbinare la lingua della pagina dove apparirà il widget.
Unità	Metrico o imperiale	Scegli il formato che i tuoi visitatori si aspettano.
Tempo	12 ore o 24 ore	Abbina la convenzione usata altrove sul tuo sito web.
Aggiornamento	15 a 120 minuti	La frequenza disponibile dipende dal piano dell'account.
Branding	Mostra o nascondi il footer "Powered by Sunset Predictor"	Nasconderlo è disponibile su Pro, Business e Enterprise.

Per la dimensione Personalizzata, seleziona e riordina i dettagli meteo che contano per il tuo pubblico. Un fotografo potrebbe dare priorità alle nuvole, alla visibilità e alla probabilità di pioggia. Un hotel potrebbe preferire temperatura, nuvole e vento.

6. Crea il widget e copia il codice di incorporamento

Seleziona Crea Widget. La schermata successiva mostra l'anteprima salvata e tre tab di installazione: Tag Script, iFrame e WordPress.

Opzione di incorporamento	Miglior uso	Cosa sapere
Tag Script	La maggior parte dei siti web e layout personalizzati	Carica in asincronia e visualizza il widget direttamente nella pagina, isolato dal tuo CSS.
iFrame	Costruttori di siti web e piattaforme CMS che bloccano script di terze parti	Mantiene il widget nel suo documento. Il listener incluso regola automaticamente l'altezza del frame.
WordPress	Qualsiasi sito WordPress, editore di blocchi o editore classico	Codice iframe con istruzioni passo-passo per WordPress. Nessun plugin richiesto.

L'opzione Tag Script appare così, con il tuo ID widget unico inserito automaticamente:

<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">Previsione del tramonto per la tua città</a>

Lo script inserisce il widget direttamente dopo se stesso, quindi non serve un elemento contenitore separato. Il piccolo link di testo sotto è un link di attribuzione alla pagina di previsione per la tua località. Rimane leggibile anche se gli script sono bloccati. I piani Enterprise possono rimuoverlo.

L'opzione iframe contiene un <iframe> più un breve script che ridimensiona il frame per adattarlo al widget:

<iframe id="sunset-widget-wgt_your_widget_id"
        src="https://sunset-predictor.com/widget/wgt_your_widget_id"
        title="Previsione del tramonto per la tua città"
        height="200" frameborder="0" scrolling="no"
        style="display: block; width: 100%; border: none; color-scheme: normal;"></iframe>
<script>
  /* listener per il ridimensionamento — incluso automaticamente nel codice copiato */
</script>

Usa il pulsante Copia Codice anziché modificare manualmente l'ID generato.

7. Incolla lo snippet nel tuo sito web

Aggiungi il codice dove vuoi che appaia il widget. La posizione esatta dipende dalla piattaforma:

• Su un sito codificato su misura, posizionalo nel modello di pagina rilevante o nel blocco di contenuto.
• In WordPress, apri il tab WordPress. Nell'editor di blocchi, aggiungi un blocco HTML personalizzato. Nell'editor classico, passa al tab Testo. Per una barra laterale o un piede di pagina, vai su Aspetto → Widget e aggiungi un widget HTML personalizzato. La pubblicazione di HTML incorporato richiede il ruolo di Amministratore o Editor (Super Admin su una rete Multisite).
• In un page builder come Wix, Squarespace, Webflow o Elementor, usa un elemento HTML, di incorporamento o di codice.
• In un CMS con regole severe sugli script, usa il tab iFrame.

Pubblica o aggiorna la pagina, quindi apri l'URL in diretta e controlla il widget sia su desktop che su mobile. Conferma che la posizione, la lingua, il formato dell'orologio, le unità e gli spazi si adattino alla pagina circostante.

Se il tuo CMS blocca il codice di incorporamento o il widget non appare, contatta l'assistenza di Sunset Predictor per aiuto con l'installazione.

Cosa succede dopo che il widget è attivo?

Il widget richiede automaticamente dati di previsione freschi secondo l'intervallo di aggiornamento configurato. L'intervallo disponibile dipende dal tuo piano, da ogni 120 minuti nel piano Free a ogni 15 minuti nel piano Enterprise.

Dal tuo dashboard puoi:

• Modificare il nome, l'etichetta, l'aspetto, la larghezza, la lingua, le unità, il formato dell'orologio e l'intervallo di aggiornamento senza sostituire il codice di incorporamento. Le modifiche appaiono sulle pagine in diretta entro pochi minuti.
• Vedere le impressioni totali (rendimenti del widget) e i clic (visitatori che hanno seguito il link del widget)
• Copiare di nuovo il codice di incorporamento
• Mettere in pausa, riprendere o eliminare un widget

Quale piano si adatta al tuo sito web?

Puoi creare un widget con marchio sul piano gratuito. I piani a pagamento supportano l'uso commerciale, più widget, limiti di visualizzazione mensili più alti, aggiornamenti più rapidi, la dimensione Personalizzata e la rimozione opzionale del marchio. Puoi confrontare i piani e i prezzi attuali prima di scegliere un livello.

Piano	Widget	Visualizzazioni mensili	Aggiornamento più veloce	Dimensione personalizzata	Rimozione del marchio	Uso commerciale
Gratuito	1	2.000	120 minuti	No	No	No
Pro	5	25.000	60 minuti	Sì	Sì	Sì
Business	25	150.000	30 minuti	Sì	Sì	Sì
Enterprise	Illimitati	1.000.000	15 minuti	Sì	Sì	Sì

Il piano consumer Plus ha gli stessi limiti di widget del piano Gratuito. Le opzioni di layout — preset di posizionamento, larghezza fissa o piena e allineamento — sono disponibili su ogni piano, incluso quello Free.

Se un widget raggiunge la sua quota mensile di visualizzazioni, continua a funzionare: le visualizzazioni extra smettono di essere conteggiate e il marchio di Sunset Predictor viene mostrato fino al mese successivo. Un picco di traffico non trasforma mai la tua pagina in uno stato di errore.

Ricorda che i widget attivi e quelli in pausa contano entrambi verso il numero di widget consentiti dal tuo piano. Elimina un widget se non ti serve più e vuoi liberare quel posto.

Modi pratici per usare il widget

Il posizionamento più efficace connette la previsione a una decisione che il visitatore sta già prendendo. Ogni esempio di seguito collega a un mockup dal vivo nella pagina demo contestuale.

Hotel e resort

Posiziona un widget Standard su una pagina di servizi, bar sul tetto o esperienze locali, o usa il preset Scatola di prenotazione accanto al tuo modulo di prenotazione. Usa il nome orientato al pubblico della proprietà come etichetta di visualizzazione e abbina il colore di accento al marchio dell'hotel. Vedi il widget su una homepage di hotel di esempio, o leggi come gli hotel utilizzano il widget del tramonto, incluso il pilot gratuito di 30 giorni.

Ristoranti, bar e terrazze

Una terrazza con vista sul mare vende più tavoli in una bella serata di tramonto. Posiziona un widget Standard con la descrizione accanto al pulsante “Prenota un tavolo”, così gli ospiti possono scegliere il momento giusto. Vedi il widget su una pagina di terrazza di ristorante di esempio.

Siti web di turismo e destinazioni

Aggiungi widget specifici per la località a guide della città o regionali. Una pagina sui punti panoramici del tramonto a Barcellona può mostrare la previsione attuale di Barcellona, mentre una guida separata di Tenerife può utilizzare il suo widget. Vedi il widget all'interno di un post di blog di viaggi di esempio.

Siti web di webcam e surf

Posiziona un widget Compat accanto a una telecamera in diretta o a un pannello delle condizioni attuali. Il punteggio del tramonto aggiunge un contesto rapido senza competere con il feed video. Vedi il widget Compat su una pagina webcam di esempio.

Guide fotografiche

Usa la dimensione Personalizzata per mostrare nuvole, probabilità di pioggia, visibilità e vento accanto al punteggio. Questo offre ai lettori più contesto quando decidono se esplorare una location o portare l'attrezzatura.

Pagine di eventi e sedi

Per le sedi all'aperto in cui il panorama è parte dell'esperienza, un widget può aiutare i visitatori a comprendere le previsioni del tramonto per la posizione fissa della sede. Mantieni la descrizione abilitata se il tuo pubblico trae vantaggio da una spiegazione in linguaggio semplice del punteggio.

Schermi di hall e cruscotti smart-home

Apri l'URL dell'iframe del widget (l'indirizzo src nel codice dell'iframe) su un display della hall, un tablet della reception, un chiosco o una scheda della pagina web di Home Assistant. La pagina si aggiorna da sola all'intervallo del piano, anche quando rimane aperta per giorni. Se la connessione cade, l'ultima previsione rimane sullo schermo invece di una pagina di errore.

Suggerimenti per un miglior incorporamento

Prima di pubblicare ampiamente il widget, fai alcune scelte deliberate:

1. Mettilo vicino a contenuti correlati. Una previsione accanto a una descrizione del tetto è più utile di una nascosta in un generico footer.
2. Usa un'etichetta di visualizzazione specifica. "Terrazza del porto" offre ai visitatori più contesto di un nome di città generico quando la posizione è già ovvia.
3. Mantieni la densità delle informazioni appropriata. Compatto funziona per layout stretti; Personalizzato funziona quando il dettaglio meteo è parte dello scopo della pagina.
4. Non posizionare un widget "Riempi contenitore" all'interno di un elemento che si dimensiona in base al suo contenuto, come una scatola inline-block. Dai al widget una larghezza fissa in quel caso.
5. Revisione periodica delle impressioni. Mostrano se il posizionamento riceve traffic e se il tuo piano attuale è ancora adatto.

Conclusione

Un widget di previsione del tramonto trasforma i dati meteo in cambiamento in una caratteristica del sito web semplice e pertinente. Scegli un luogo significativo, scegli dove va, adatta il design al tuo pubblico, incolla il codice di incorporamento generato e gestisci il widget da un unico dashboard. Confronta le dimensioni nella galleria, vedilo su siti web di esempio, quindi crea il tuo primo widget prima di decidere dove appartiene sul tuo sito.