Cos'è il widget calcolatrice
Un widget calcolatrice è una versione compatta e autonoma di una calcolatrice completa di Calculate.Studio che funziona all'interno della tua pagina. Tecnicamente si tratta di un iframe — un elemento HTML che incorpora una pagina all'interno di un'altra — che punta a una versione leggera della calcolatrice pensata per l'incorporamento, più un breve paragrafo di credito sottostante. L'iframe è un elemento HTML standard supportato da ogni browser moderno, quindi non c'è nulla da installare e nulla che possa entrare in conflitto con il codice del tuo sito.
Il widget è la stessa calcolatrice presente su Calculate.Studio: le stesse formule verificate, gli stessi risultati istantanei lato client e, per gli strumenti di salute e finanza, la stessa avvertenza. I tuoi visitatori digitano i loro numeri e vedono i risultati immediatamente senza lasciare la tua pagina. Poiché il calcolo avviene nel browser del visitatore anziché su un server, il widget resta veloce anche sotto traffico intenso, e nessun dato del visitatore viene inviato altrove.
Ognuna delle 210 calcolatrici del sito può essere incorporata. La galleria su calculate.studio/en/widgets presenta le più richieste — BMI, mutuo, prestito, percentuale, interesse composto, età, calorie e media voti tra queste — e ogni singola pagina calcolatrice ha un pulsante Incorpora accanto ai pulsanti di condivisione che rivela lo snippet specifico per quello strumento.
Come installarlo — il metodo generale
L'installazione consiste in un semplice copia-incolla. Lo snippet contiene due parti: l'iframe che mostra la calcolatrice e un breve paragrafo di credito che rimanda alla calcolatrice completa e a Calculate.Studio. Mantenere intatta questa riga di credito è l'unica condizione per l'uso gratuito — è ciò che mantiene il programma gratuito per tutti.
- Apri calculate.studio/en/widgets, oppure apri una qualsiasi pagina calcolatrice e clicca sul pulsante </> Incorpora.
- Clicca su Copia codice. Lo snippet viene copiato negli appunti.
- Nell'editor del tuo sito, passa alla vista HTML (a volte chiamata "codice" o "sorgente") della pagina in cui vuoi inserire la calcolatrice.
- Incolla lo snippet nel punto in cui deve apparire la calcolatrice, poi salva e pubblica.
- Visualizza l'anteprima della pagina. La calcolatrice dovrebbe caricarsi e calcolare immediatamente — testala una volta con numeri di esempio.
Istruzioni specifiche per piattaforma
La maggior parte dei costruttori di siti accetta HTML puro tramite un blocco o elemento dedicato, quindi lo stesso snippet funziona ovunque. I nomi cambiano a seconda della piattaforma:
| Piattaforma | Dove incollare lo snippet |
|---|---|
| WordPress (editor a blocchi) | Aggiungi un blocco "HTML personalizzato" e incolla lo snippet al suo interno. |
| WordPress (editor classico) | Passa dalla scheda editor da "Visuale" a "Testo" e incolla. |
| Wix | Aggiungi un elemento "Incorpora HTML" (Aggiungi → Incorpora codice → Incorpora HTML) e incolla. |
| Squarespace | Aggiungi un blocco "Codice" nella sezione della pagina e incolla. |
| Shopify | Nell'editor della pagina o dell'articolo del blog, clicca sul pulsante <> (Mostra HTML) e incolla. |
| Webflow | Aggiungi un componente "Embed" e incolla. |
| Sito in HTML puro | Incolla lo snippet direttamente nell'HTML della pagina nel punto in cui deve essere visualizzata la calcolatrice. |
Dimensioni, stile e prestazioni
Lo snippet viene fornito con un'impostazione predefinita sensata: larghezza piena (width="100%"), un'altezza fissa adattata al numero di campi di quella calcolatrice e un leggero bordo arrotondato. Puoi modificare il valore dell'altezza se il tuo tema richiede una cornice più alta o più bassa, e puoi modificare o rimuovere lo stile del bordo per adattarlo al tuo design. La larghezza è responsive per impostazione predefinita, quindi il widget funziona sugli smartphone senza alcun lavoro aggiuntivo.
L'iframe include loading="lazy", un attributo standard del browser che rimanda il caricamento del widget finché il visitatore non vi si avvicina scorrendo la pagina. Questo significa che incorporare una calcolatrice non aggiunge praticamente nulla al tempo di caricamento iniziale della tua pagina — il browser recupera il widget solo quando sta per diventare visibile.
Le pagine di incorporamento stesse sono contrassegnate come noindex con un link canonico alla pagina calcolatrice completa, il che segue le linee guida di Google per i contenuti incorporati e duplicati. Incorporare un widget non può quindi creare problemi di contenuto duplicato né per il tuo sito né per il nostro.
L'unica regola: mantieni il link di credito
Il programma widget è gratuito senza registrazione grazie a un'unica condizione: il piccolo paragrafo di credito sotto l'iframe — la riga che recita «[Calculator name] by Calculate.Studio» — deve rimanere al suo posto. È un testo di 12 pixel che si trova discretamente sotto il widget e non compete con i tuoi contenuti.
Sei libero di ridimensionare l'iframe, modificare lo stile del suo bordo e posizionare il widget ovunque sul tuo sito, inclusi siti commerciali, blog e progetti per clienti. Se hai bisogno di una calcolatrice che non è nella galleria in evidenza, ogni pagina calcolatrice del sito ha il proprio pulsante Incorpora, quindi tutti i 210 strumenti sono disponibili.
Quali calcolatrici funzionano meglio come widget?
Il miglior widget per il tuo sito è quello che i tuoi lettori altrimenti lascerebbero la tua pagina per cercare altrove. I blog di fitness e benessere incorporano tipicamente le calcolatrici di BMI, calorie o TDEE. I siti immobiliari e di finanza personale incorporano le calcolatrici di mutuo, prestito e interesse composto. I siti per studenti ed educativi incorporano le calcolatrici di media voti e percentuale, e i blog generalisti aggiungono spesso la calcolatrice dell'età ai post evergreen.
Poiché ogni widget mostra una versione compatta della calcolatrice con un link alla versione completa — che include tabelle interpretative, esempi svolti e fonti — i tuoi lettori ottengono una risposta immediata sulla tua pagina e un percorso verso un contesto più approfondito quando lo desiderano.
Domande frequenti
Il widget calcolatrice è davvero gratuito?
Sì. Non c'è registrazione, non serve una chiave API, non ci sono limiti di utilizzo e nessun costo. L'unica condizione è che la piccola riga di credito sotto il widget, che rimanda a Calculate.Studio, rimanga al suo posto.
Il widget rallenterà il mio sito web?
No. L'iframe utilizza il caricamento lazy nativo del browser, quindi viene recuperato solo quando un visitatore vi si avvicina scorrendo, e il calcolo avviene interamente nel browser del visitatore. Non aggiunge praticamente nulla al caricamento iniziale della pagina.
Posso incorporare una calcolatrice su un sito commerciale o di un cliente?
Sì. I widget possono essere utilizzati su siti commerciali, blog e progetti per clienti senza alcun costo, a condizione che il link di credito sotto il widget rimanga intatto.
Posso modificare le dimensioni o il bordo del widget?
Sì. Puoi modificare l'altezza dell'iframe e lo stile del bordo per adattarli al tuo sito. La larghezza è già responsive (100%), quindi si adatta automaticamente a smartphone e colonne strette.
Incorporare il widget causa problemi di contenuto duplicato per la SEO?
No. Le pagine di incorporamento sono contrassegnate come noindex con un link canonico che punta alla pagina calcolatrice completa, il che segue le linee guida documentate di Google, quindi i motori di ricerca non trattano il widget come contenuto duplicato sul tuo sito.
Fonti
- MDN Web Docs — <iframe>: The Inline Frame element. Mozilla Developer Network. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
- MDN Web Docs — Lazy loading (loading attribute). Mozilla Developer Network. https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading
- Google Search Central — Consolidate duplicate URLs with canonicals. Google. https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls
- Google Search Central — Block search indexing with noindex. Google. https://developers.google.com/search/docs/crawling-indexing/block-indexing
- WHATWG HTML Living Standard — The iframe element. https://html.spec.whatwg.org/multipage/iframe-embed-object.html