Torna ai Widget

🎨
Installazione Widget su Webflow

Guida completa per integrare il widget DomusReport nel tuo sito Webflow

Passo 1: 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
  • Presente su tutte le pagine automaticamente
  • ✅ Consigliato per la maggior parte dei siti

Installazione:

Usa Custom Code → Footer Code (vedi sotto)

Widget Inline

Form incorporato nella pagina

  • Parte integrante del contenuto
  • Sempre visibile, massima visibilità
  • Dimensioni personalizzabili
  • Solo sulle pagine dove lo aggiungi

Installazione:

Usa elemento Embed nella pagina (vedi metodo alternativo)

Metodo 1: Widget Bubble (Consigliato)

Installazione globale in 4 semplici passi - Tempo: 2 minuti

1

Apri le Impostazioni del Progetto

Nel tuo progetto Webflow:

  • Clicca sull'icona Impostazioni ⚙️ in alto a sinistra
  • Oppure usa la scorciatoia da tastiera: E
2

Vai a Custom Code

Nel menu laterale, clicca su "Custom Code"

💡 Nota: Se non vedi "Custom Code", assicurati di avere un piano Webflow a pagamento (Basic, CMS, Business o Enterprise). Il custom code non è disponibile nel piano gratuito.
3

Incolla nel Footer Code

Scorri fino alla sezione "Footer Code" e incolla questo codice:

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

Ricorda di sostituire TUO_WIDGET_ID con il tuo Widget ID reale

4

Salva e Pubblica

Per completare l'installazione:

  1. Clicca "Save Changes" in basso
  2. Torna al Designer (clicca sulla X o premi ESC)
  3. Clicca il pulsante "Publish" in alto a destra
  4. Seleziona i domini dove pubblicare e conferma

Perfetto! Il widget è installato 🎉

Visita il tuo sito pubblicato e vedrai il widget apparire in basso a destra su tutte le pagine.

💡 Il widget apparirà automaticamente su tutte le pagine del sito

✅ Vantaggi di Footer Code

Globale automaticamente

Il widget apparirà su tutte le pagine senza doverlo aggiungere manualmente a ciascuna

Non rallenta il sito

Lo script si carica in modo asincrono (async) senza bloccare il resto della pagina

Facile da aggiornare

Modifica il codice una sola volta per aggiornarlo su tutto il sito

⚠️ Cose da Sapere

Piano a pagamento richiesto

Il Custom Code è disponibile solo con piani Basic, CMS, Business o Enterprise

Non visibile in Designer

Il widget non appare nel Designer di Webflow, solo sul sito pubblicato

Devi pubblicare

Le modifiche al Custom Code richiedono una nuova pubblicazione per essere attive

Metodo 2: Widget Inline (Incorporato)

Per incorporare il form direttamente in pagine specifiche

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 della pagina.

Per il widget inline, usa l'elemento Embed di Webflow:

1

Apri la pagina dove vuoi il widget nel Webflow Designer

2

Cerca "Embed" nel pannello Add Elements (+) o premi E

3

Trascina l'elemento Embed in fondo alla pagina (nel footer se possibile)

4

Incolla il codice iFrame nell'Embed Element

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

Ricorda di sostituire TUO_WIDGET_ID con il tuo Widget ID reale

5

Clicca "Save & Close" e pubblica il sito

💡 Vantaggi Widget Inline:
  • Form sempre visibile, non richiede click
  • Perfetto per landing page di conversione
  • Puoi personalizzare width e height dell'iFrame
  • Funziona anche con il piano gratuito Webflow
💡 Nota: Se vuoi il widget Bubble su pagine specifiche (non globalmente), puoi usare lo stesso metodo Embed ma con lo script tag invece dell'iFrame.

❓ Risoluzione Problemi

Il widget non appare

  • Verifica di aver sostituito TUO_WIDGET_ID con il tuo Widget ID reale
  • Assicurati di aver pubblicato il sito dopo aver aggiunto il codice
  • Il widget non appare nel Designer, solo sul sito pubblicato - visita l'URL live
  • Svuota la cache del browser (Ctrl+F5 / Cmd+Shift+R)

Non vedo l'opzione Custom Code

  • Verifica di avere un piano a pagamento (Basic, CMS, Business o Enterprise)
  • Il piano gratuito non include Custom Code - usa il metodo Embed Element

Il widget appare due volte

  • Hai probabilmente aggiunto il codice sia in Custom Code che con Embed Element
  • Rimuovi una delle due installazioni

Il widget interferisce con il design

  • Il widget è progettato per essere non invasivo e fluttare in basso a destra
  • Se hai elementi fixed in quella posizione, potrebbero sovrapporsi
  • Puoi modificare i colori del widget dalla dashboard per adattarlo al tuo brand

📹 Hai bisogno di aiuto visivo?

Webflow University ha ottimi tutorial su come aggiungere Custom Code. Cerca "Webflow Custom Code" su YouTube per guide video dettagliate.

Guarda il tutorial ufficiale di Webflow

Installazione Completata! 🎉

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