Lo sapevi? Nel 2025, il 62% degli americani dichiarava di possedere azioni — una quota stabile dal 2023, secondo Gallup. È un pubblico vasto che tiene d’occhio dove si muovono i mercati.
Vuoi dati di mercato in tempo reale sul tuo sito — una watchlist su un blog finanziario, prezzi delle Cripto su una pagina di progetto, alcuni ticker in primo piano nell’header — e le soluzioni comuni non bastano. Gli embed gratuiti dai grandi portali finanziari sono pre-brandizzati e poco stilizzabili; iframe copiati-incollati rompono il layout, e crearne uno da zero significa dover gestire API e una libreria di grafici.
L’opzione più semplice è il widget Elfsight Stocks, uno strumento senza codice che mostra azioni, coppie forex e criptovalute come ticker scorrevole, schede, una tabella o un elenco. I valori si aggiornano automaticamente senza ricaricare la pagina, l’aspetto è personalizzabile e l’integrazione funziona su qualsiasi sito che accetti un blocco HTML personalizzato.
- Il modo più veloce senza codice per incorporare un ticker azionario
- Confronto tra i metodi disponibili in termini di impegno, controllo e costi
- Quale dei cinque layout si adatta meglio al tuo sito
- Suggerimenti di configurazione e ottimizzazione che vanno oltre l’ovvio
Avvio rapido: aggiungi un ticker azionario al tuo sito
Se vuoi andare live subito e non hai bisogno delle motivazioni dietro ogni scelta, segui questi quattro passaggi.
- Apri l’Editor del widget Azioni e scegli un template.
- Aggiungi gli asset che vuoi mostrare.
- Clicca “Aggiungi al sito gratuitamente” per generare il tuo codice di incorporamento.
- Incolla il codice in un blocco HTML personalizzato sul tuo sito e pubblica.
Crea il ticker delle azioni nell’editor interattivo qui sotto ↓
I migliori metodi per visualizzare un ticker azionario sul tuo sito
Prima di decidere una strada, conviene valutare come si posizionano le opzioni realistiche — perché la configurazione «migliore» per un ticker azionario dipende interamente da quanta gestione e manutenzione sei disposto ad affrontare.
| Metodo | Difficoltà | Personalizzazione | Aggiornamenti automatici | Costo |
|---|---|---|---|---|
| Widget Azioni di Elfsight | Senza codice | Alta (layout, colori, font, CSS) | Sì | Piani gratuiti / piani a pagamento |
| Widget incorporabile da un portale di dati finanziari | Copia e incolla | Basso (template del fornitore) | Sì | Di solito gratuito |
| Iframe manuale / API dati di mercato | Sviluppatore | Completo (lo costruisci tu) | Dipende dal tuo codice | API gratuita o a pagamento |
Il widget Elfsight è ideale per chi desidera controllo del design senza toccare codice. Un widget embeddable gratuito da un portale di dati finanziari è l’integrazione più rapida, se non ti importano branding e limiti di stile del fornitore.
Layout e posizionamento: dove inserire un ticker azionario
Scegliere un layout non è solo una questione di design: è una questione di posizionamento strategico. Dove viene posizionato il ticker sul tuo sito determina quale dei cinque layout funziona davvero, quindi vale decidere prima.
Allinea il layout al contesto
Ogni layout ha una posizione naturale. Pensa al punto della pagina prima di pensare allo stile.
| Layout | Posizionamento migliore | Perché è la scelta giusta |
|---|---|---|
| Ticker (Modalità Topbar) | Barra in alto presente su tutte le pagine | Una fascia costante di “market pulse”, simile al crawl delle notizie di un sito |
| Ticker (Modalità inline) | All’interno di un articolo o di una sezione | Una riga scorrevole che resta all’interno del contenuto invece di fissarsi in alto |
| Griglia di schede / Schede impilate | Un blocco in evidenza nella homepage o nei post | Schede più grandi con mini grafici che attirano l’attenzione; i passaggi di scorrimento si susseguono uno per uno sui dispositivi stretti |
| Tabella | Una pagina dedicata ai Mercati | Colonne ordinabili e un campo Volume per confronto affiancato |
| Elenco | Una barra laterale o una colonna stretta | Righe verticali compatte che si adattano a una larghezza di 300–500 px |
Due note pratiche. Primo, tutto ciò che sta sopra la piega compete con il tuo messaggio principale — un ticker a Topbar completo su una pagina di destinazione può distogliere l’attenzione dalla tua call to action, quindi riservalo per contenuti in cui i dati di mercato sono al centro. Secondo, i layout Ticker e List gestiscono con maggiore grazia le larghezze mobili ristrette; griglie e tabelle multi-colonna si riadattano, ma controllale su un telefono prima di pubblicarle.
È lo strumento giusto per il tuo sito?
Vale essere chiari sull’idoneità: il widget fa alcune cose bene e altre per nulla.
Ideale per: una watchlist curata, contesto di mercato su un blog finanziario, prezzi delle criptovalute su un sito di progetto, coppie forex su un sito di viaggi o di trasferimenti, o un elemento di credibilità che dimostra che sei aggiornato.
Non pensato per: una dashboard di trading, uno strumento decisionale in tempo reale o un terminale di fondamentali e screening.
Le quotazioni sono aggiornate regolarmente ma non garantite in tempo reale; il catalogo degli asset è curato e comprende oltre 100 strumenti, piuttosto che ogni simbolo su ogni mercato, e i campi dati sono limitati a prezzo, variazione, volume e un mini grafico — nessuna capitalizzazione di mercato, P/E o dati sugli utili.
Configurare il ticker azionario da zero
Una volta definita la posizione, ecco la guida completa — lo stesso flusso, sia che tu scelga WordPress, Shopify o un sito realizzato a mano.
Passo 1: Scegli un modello di partenza
Apri l’editor e ti troverai in una galleria di template — oltre 20 punti di partenza pronti all’uso. Innanzitutto scegli quello più vicino al tuo obiettivo finale, così modifichi invece di costruire da zero.
Opzioni popolari
- Tema azioni chiaro / Tema azioni scuro — punti di partenza neutri che si adattano alla maggior parte dei siti.
- Ticker azioni tech USA / Ticker Tape — Strisce scorrevoli già pronte per una fascia intestazione.
- Criptovalute principali — una griglia incentrata sulle criptovalute, se questo è il tuo pubblico.
I modelli impostano solo le impostazioni predefinite — ogni colore, layout e asset sono modificabili in seguito, quindi non pensarci troppo. Clicca “Continua con questo template” per procedere.
Passo 2: Aggiungi i tuoi asset
Successivamente, apri la scheda Asset. Qui costruisci la tua watchlist. Clicca Aggiungi Asset per aprire il pannello di ricerca, dove puoi filtrare per Tutti, Azioni, Forex, o Cripto e cercare nel catalogo alfabetico.
Puoi mescolare liberamente tipi di asset in un solo widget — qualche titolo tecnologico insieme a Bitcoin e a una coppia di valute va benissimo.
Passo 3: Scegli il layout
Layout e scegli come sono disposti gli asset. Questo passaggio richiede più tempo — prenditi il tempo necessario, perché il layout determina tutto su come lo widget viene letto nella pagina.
Cinque layout disponibili
- Griglia di schede asset — una griglia multicolonna di schede asset con prezzo, variazione e un mini grafico.
- Stack di schede — una scheda per volta in un carosello scorrevole con puntini di paginazione.
- Ticker — un ticker scorrevole, con modalità di visualizzazione Inline o Topbar e un cursore della velocità di scorrimento.
- Tabella — colonne ordinabili, tra cui un campo Volume; ideale per una pagina mercati dedicata.
- Elenco — righe verticali compatte adatte a una barra laterale.
Se non sei sicuro, il layout Ticker funziona per circa l’80% delle intestazioni del sito — è compatto, cattura l’attenzione con il movimento e si adatta bene anche sul mobile. Scegli la Table solo se l’obiettivo è il confronto, perché richiede spazio orizzontale per respirare.
Fase 4: Imposta le opzioni di visualizzazione
Con un layout scelto, ottimizza cosa mostra ogni asset. I controlli comuni — Mostra icona asset, Mostra mini grafico, e Formato variazione prezzo (Valore, Percentuale o entrambi) — appaiono in ogni layout. Il layout Ticker aggiunge uno slider per la velocità di scorrimento e l’interruttore della barra superiore; il layout Tabella ti permette di attivare/disattivare singole colonne.
Colonne della tabella
- Prezzo — la quotazione attuale.
- Variazione (Assoluta) — variazione in dollari.
- Variazione (%) — la variazione percentuale.
- Volume — volume di scambio, l’unico dato aggiuntivo oltre prezzo e variazione.
- Mini grafico — lo sparkline inline.
Questo è l’insieme completo dei campi dati offerti dal widget. Non ci sono capitalizzazione di mercato, rapporto P/E o intervallo giornaliero — se prevedi di mostrare i fondamentali, è il momento di riallineare le aspettative.
Passo 5: Stilizza il tema
Apri la scheda Tema e clicca su Personalizza Tema per allineare il widget al tuo branding.
Elementi personalizzabili
- Colore di sfondo e bordo
- Parametri di prezzo: aumento/diminuzione
- Dimensione e colore del titolo del widget
- Raggio d’angolo
- Famiglia di font e colore del testo
Anche i campi CSS personalizzati e JS personalizzati sono disponibili, se sai lavorare con il codice e vuoi un controllo più preciso.
Passo 6: Regola lingua e impostazioni
Nella scheda Impostazioni, puoi impostare la Lingua dell’interfaccia, usare Modifica Testi per riformulare le stringhe dell’interfaccia e aprire gli editor CSS personalizzati o JS personalizzati.
Passo 7: Prendi il codice e aggiungilo al tuo sito
Quando il widget appare come previsto, clicca su “Aggiungi al sito gratuitamente” per generare il codice di installazione, poi incolla quel frammento ovunque vuoi che appaia il ticker. Il codice funziona su qualsiasi piattaforma che accetti un blocco HTML personalizzato, inclusi WordPress, Shopify, Wix, Squarespace, e Webflow. I passaggi di setup variano leggermente a seconda della piattaforma — segui i link per la guida specifica per CMS.’>
Su WordPress, la destinazione più comune: apri la tua pagina nell’Editor a blocchi, aggiungi un blocco HTML personalizzato, incolla il codice e pubblica. Questa è l’intera installazione.
Controllo rapido per la risoluzione dei problemi
- Il widget non compare: Verifica che il codice sia stato inserito in un blocco HTML personalizzato, non in un paragrafo o blocco di testo standard.
- Appare solo al ricaricamento: In temi con navigazione AJAX, lo script della piattaforma potrebbe dover essere caricato nella pagina <head>.
- La versione vecchia continua a essere visualizzata: Svuota la cache del plugin o della CDN dopo aver incollato.
- Barre di scorrimento all’interno del widget: Il contenitore di incorporamento è troppo stretto — allarga il blocco HTML finché non scompaiono.
Altri modi per aggiungere un ticker azionario al tuo sito
Il widget non è l’unica strada, e a seconda delle tue esigenze, un metodo diverso potrebbe esserti più adatto.
Widget incorporabile da un portale di dati finanziari
Diversi siti di dati di mercato offrono widget ticker gratuiti, pronti da copiare e incollare, da inserire in una pagina.
- Apri il costruttore di widget del portale dati e seleziona un widget ticker o un elenco di simboli.
- Seleziona i simboli e uno schema di colori di base.
- Copia lo snippet di incorporamento generato.
- Incollalo in un blocco HTML personalizzato sulla tua pagina.
Iframe manuale o API dati di mercato
Se disponi di risorse di sviluppo, puoi costruire un ticker da solo. Alcune persone cercano codici ticker gratuiti per l’uso sul sito e li assemblano da un’API di dati di mercato e una libreria di grafici.
- Iscriviti a un’API di dati di mercato e ottieni una chiave API.
- Scrivi codice per recuperare le quotazioni e gestire l’intervallo di aggiornamento.
- Visualizza i valori con una libreria di grafici o con il tuo markup.
- Incorpora il risultato tramite iframe o script inline.
Consigli per ottimizzare il ticker azionario
Hai un widget funzionante — queste modifiche distinguono tra chi basta a farlo funzionare e chi conquista spazio sulla pagina.
- Mantieni la lista di titoli mirata. Cinque a dieci asset rilevanti sono molto più leggibili rispetto a una lista di cinquanta. Una lista mirata comunica una valutazione editoriale; una lista esaustiva dà l’impressione che tu abbia incluso ogni simbolo trovato.
- Aggiungi un avviso sul ritardo dei dati nelle vicinanze. Una breve frase tipo “Le quotazioni potrebbero subire ritardi e sono solo a scopo informativo” ti protegge come pubblicatore e fissa aspettative chiare, poiché il widget non è un feed di trading in tempo reale.
- Ricontrolla periodicamente i tuoi asset. I ticker possono rinominarsi o essere rimossi — soprattutto nel caso delle cripto — quindi dai un’occhiata al widget di tanto in tanto per verificare che mostri ancora quanto previsto.
- Adatta la larghezza al contenitore. Un ticker da 1200px va in una strip a larghezza piena; se lo usi in una sidebar, avrai overflow o barre di scorrimento. Dimensionalo in base allo spazio disponibile.
FAQ (Domande frequenti)
Posso aggiungere un ticker azionario a qualsiasi costruttore di siti?
Il ticker di borsa si visualizza correttamente sui dispositivi mobili?
Quanto è aggiornato il dato del mercato azionario?
Quali asset può mostrare il widget di quotazioni azionarie sul tuo sito?
Posso personalizzare l’aspetto del ticker azionario?
Conclusione
Aggiungere un ticker azionario al tuo sito si riduce a tre decisioni: dove posizionarlo, quale tra i cinque layout si adatta a quel punto e quali asset compongono la tua lista di titoli. Una volta definiti questi elementi, il flusso è no-code: scegli un template, aggiungi i tuoi asset, stilizzalo e incolla un unico snippet. Il widget copre azioni, forex e criptovalute, attraverso un catalogo selezionato; si aggiorna automaticamente e resta entro limiti chiari: è contesto di mercato per credibilità, non una piattaforma di trading.
Se hai definito dove posizionare e quali asset utilizzare, il passo successivo è aprire l’editor del widget Azioni e costruirlo — oppure dai un’occhiata all’elenco completo delle funzionalità per confermare che si adatti.
