Torna ai Widget

Installazione Widget su HTML

Guida completa per integrare il widget DomusReport nel tuo sito HTML statico

Scegli il Tipo di Widget

Due modalità diverse per esigenze diverse

Widget Bubble

Bottone flottante in basso a destra

  • Sempre visibile senza occupare spazio
  • Si apre al click con un modale
  • Non invasivo, non disturba il design
  • ✅ Consigliato per la maggior parte dei siti

Quando usarlo:

Siti aziendali, blog, portfolio, e-commerce - qualsiasi sito dove vuoi lead sempre disponibili senza occupare spazio

Widget Inline

Form incorporato nella pagina

  • Parte integrante del contenuto della pagina
  • Sempre visibile, massima visibilità
  • Dimensioni personalizzabili
  • Perfetto per pagine dedicate

Quando usarlo:

Landing page di conversione, pagine "Richiedi Valutazione", sezioni contatti dove vuoi massima attenzione sul form

Metodo 1: Widget Bubble (Consigliato)

Installa il bottone flottante in 3 semplici passi

1

Ottieni il tuo Widget ID

Vai nella sezione Widget della dashboard, clicca su "Codice" sul widget che vuoi installare, e copia il tuo Widget ID.

2

Copia questo codice

<!-- DomusReport Widget -->
<script
  src="https://domusreport.com/widget.js"
  data-widget-id="TUO_WIDGET_ID"
  async>
</script>

⚠️ Sostituisci TUO_WIDGET_ID con il tuo Widget ID

3

Incolla prima del tag </body>

Apri il tuo file HTML e incolla lo script subito prima del tag di chiusura </body>

Esempio Completo

Ecco come dovrebbe apparire il tuo file HTML con il widget installato

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Il Mio Sito</title>
</head>
<body>

  <!-- Il tuo contenuto qui -->
  <h1>Benvenuto nel mio sito</h1>

  <!-- DomusReport Widget - PRIMA del tag </body> -->
  <script
    src="https://domusreport.com/widget.js"
    data-widget-id="TUO_WIDGET_ID"
    async>
  </script>
</body>
</html>

Metodo 2: Widget Inline (Incorporato)

Per incorporare il form direttamente nella pagina

Quando usare questo metodo: Perfetto per landing page dedicate, pagine "Richiedi Valutazione" o sezioni specifiche dove vuoi che il form sia sempre visibile come parte del contenuto.

Codice iFrame da Copiare

<!-- DomusReport Widget Inline -->
<iframe
  src="https://domusreport.com/widget/inline/TUO_WIDGET_ID"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none; border-radius: 8px;"
  title="DomusReport Valutazione Immobiliare">
</iframe>

⚠️ Sostituisci TUO_WIDGET_ID con il tuo Widget ID

Istruzioni:

1

Incolla l'iFrame dove vuoi che appaia il form nella tua pagina HTML (non necessariamente prima di </body>)

2

Personalizza le dimensioni modificando width e height (es: width="800" height="700")

3

Salva e carica il file sul server

💡 Pro Tip: Il widget inline è perfetto per una sezione dedicata "Richiedi Valutazione Gratuita" nel tuo sito!

✅ Best Practices

Posizione corretta

Inserisci lo script prima di </body> per non rallentare il caricamento della pagina

Attributo async

L'attributo async garantisce che il widget non blocchi il rendering della pagina

Una sola volta

Inserisci lo script una sola volta per pagina, anche se hai più pagine HTML

⚠️ Problemi Comuni

Widget non appare

Verifica di aver sostituito TUO_WIDGET_ID con il tuo Widget ID reale

Script nel <head>

Non inserire lo script nell'head, ma prima del </body>

Cache del browser

Se hai modificato il codice, svuota la cache (Ctrl+F5) per vedere le modifiche

Come caricare il file sul server

Se usi un hosting tradizionale con FTP

1

Apri il tuo client FTP (FileZilla, Cyberduck, o il File Manager del tuo hosting)

2

Naviga nella cartella del tuo sito (solitamente public_html o www)

3

Carica il file HTML modificato (sovrascrivi quello vecchio)

4

Visita il tuo sito e verifica che il widget appaia in basso a destra

Sito con più pagine?

Se il tuo sito ha più pagine HTML (es: index.html, about.html, contact.html), devi aggiungere lo script a ogni file HTML in cui vuoi che il widget appaia.

💡 Tip: Se le tue pagine includono un footer comune, aggiungi lo script lì per averlo automaticamente su tutte le pagine.

Tutto pronto!

Il widget è ora attivo sul tuo sito. Inizia a raccogliere lead immediatamente.