Come aggiungere una bolla video a qualsiasi sito HTML

Come si installa CompleteGreet in HTML?

Aggiungere un widget con video a un sito HTML semplice è rapido e non richiede strumenti di build o gestori di pacchetti. La configurazione funziona su siti statici, app a pagina singola e qualsiasi progetto che serva direttamente codice HTML.

Ecco la sequenza generale:

1. Crea l’account e apri la dashboard: Iscriviti a CompleteGreet e accedi alla dashboard principale. Cerca il pulsante blu «Nuovo widget» in alto a destra e fai clic. Il generatore del widget si apre con un modello vuoto e un pulsante per registrare il video.
2. Registra o carica il saluto: Fai clic sul registratore per filmare direttamente nel browser oppure carica un file MP4 dal computer. L’anteprima mostra il comportamento su desktop e mobile. Mantieni il video breve per favorire la velocità della pagina.
3. Configura l’aspetto: Usa la barra laterale per scegliere la posizione della bolla, il colore del brand e la foto del profilo. L’avatar appare nella bolla prima della riproduzione.
4. Imposta l’invito all’azione: Apri la scheda «Interazioni» per aggiungere il testo di un pulsante, ad esempio «Prenota una chiamata» o «Vedi i prezzi», e il relativo URL. Puoi anche abilitare un modulo e-mail per raccogliere contatti prima del video.
5. Copia il codice di installazione: Fai clic su «Salva e ottieni il codice» in alto. Si apre una finestra con un singolo tag script. Copialo e incollalo subito prima del tag in HTML. Lo script viene caricato in modo asincrono e non dovrebbe bloccare il rendering.

Questo è tutto il processo. Dopo la pubblicazione, il widget dovrebbe comparire al caricamento successivo della pagina senza altre configurazioni.

Se usi un generatore di siti statici come Jekyll, Hugo o Eleventy, incolla lo stesso script nel modello di base. Nelle app a pagina singola create con React o Vue, il codice funziona allo stesso modo perché si collega al DOM dopo il montaggio. Non serve installare pacchetti npm.

Un dettaglio che molti trascurano: il tag script contiene un attributo data-widget-id che collega l’installazione al widget specifico. Se crei più widget per pagine diverse, ognuno avrà il proprio ID. Dalla dashboard puoi duplicare un widget quando vuoi riutilizzare lo stesso saluto su più URL.

Prova l’installazione aprendo la pagina in una finestra in incognito. La bolla dovrebbe comparire nell’angolo dopo il caricamento. Se non appare, controlla la console del browser per eventuali errori e verifica che il widget sia impostato su «Attivo» nella dashboard.

Cosa puoi personalizzare in HTML?

Quasi tutto funziona come sulle piattaforme gestite, con una differenza importante: il targeting delle pagine viene controllato dalla tua logica invece che da un selettore nella dashboard.

Il targeting delle pagine HTML si basa sugli URL.

Puoi mostrare il widget solo su percorsi specifici aggiungendo un semplice attributo data al codice incorporato. Molti team lo usano per mostrare saluti diversi nelle pagine prezzi e negli articoli del blog. Se il sito usa un’app a pagina singola, dovrai attivare manualmente il widget nei cambi di percorso tramite l’API JavaScript. È il punto in cui una configurazione HTML richiede più lavoro rispetto all’installazione di un’app Shopify.

Inviti all’azione e moduli

I pulsanti di invito all’azione nel widget sono completamente modificabili. Puoi collegarli a Calendly, a un checkout Stripe o a un semplice link mailto. Molti team usano un pulsante per prenotare una chiamata e uno per guardare una demo.

I campi del modulo offrono la personalizzazione più importante.

Decidi quali campi mostrare: nome, e-mail, telefono o una domanda personalizzata su budget e tempistiche. Il modulo può apparire prima del video per controllare l’accesso oppure dopo per raccogliere contatti già interessati. I siti HTML possono anche inviare i dati direttamente al proprio endpoint invece del sistema di notifica predefinito, utile quando i contatti devono arrivare subito al CRM interno.

Brand e posizione

Colore, dimensioni e posizione della bolla sono regolabili dalla dashboard. In HTML puoi anche sovrascriverli con CSS se vuoi abbinarli a una palette non disponibile tra le opzioni predefinite. L’angolo in basso a destra è un punto di partenza pratico, ma le pagine prodotto ad alto traffico possono funzionare meglio a sinistra quando sono presenti altri widget. Molti strumenti per bolle video impongono il proprio brand nei piani gratuiti. Verifica sempre le condizioni del piano CompleteGreet corrente.

Un dettaglio che causa problemi nelle installazioni HTML è l’indice z.

Se la barra di navigazione o una finestra modale ha un indice z elevato, la bolla può finire sotto di essa. Puoi correggere il problema aggiungendo una regola CSS che imposti un indice z maggiore per il contenitore del widget. Lo script viene caricato in modo asincrono, quindi inserisci questa regola nel foglio di stile principale invece che nel codice incorporato.

Snippet di incorporamento generato dalla dashboard CompleteGreet.

Esempio di struttura HTML con il codice incorporato di CompleteGreet.

See the static HTML data above for the full breakdown.

Cosa controllare prima della pubblicazione?

Apri il sito in Chrome, Safari e Firefox prima di annunciare il lancio. Il widget con video dovrebbe restare nell’angolo in basso senza sovrapporsi ai pulsanti della navigazione o del piè di pagina.

Il mobile conta ancora di più.

Carica il sito su iOS Safari e Android Chrome con dispositivi reali. La bolla dovrebbe ridimensionarsi senza forzare la riproduzione a schermo intero e il pulsante di chiusura dovrebbe essere facile da raggiungere. Se il widget copre il menu mobile o il pulsante di checkout, regola l’offset dalla dashboard.

Verifica che le regole di targeting delle pagine funzionino. Visita le pagine in cui il widget non dovrebbe apparire e controlla che resti nascosto. Assicurati che venga caricato solo sugli URL indicati nella configurazione.

Esegui un controllo della velocità con Google PageSpeed Insights dopo l’installazione. Gli asset video aggiungono peso. Se il punteggio LCP peggiora, verifica il caricamento asincrono dello script e l’ottimizzazione del file video. Questi controlli si gestiscono dalla dashboard.

Testa l’invio dei moduli dall’inizio alla fine. Compila il modulo di contatto nel widget, invialo e verifica che il contatto arrivi alla casella e-mail o al CRM. I moduli non funzionanti riducono la fiducia più di un modulo assente.

Snippet di script asincrono generato dalla dashboard per il tuo sito.

Domande frequenti

Come aggiungo CompleteGreet a un sito HTML senza modificare i file di codice?

Per installare CompleteGreet in HTML devi inserire lo script nel codice. Molti site builder hanno un widget HTML o una sezione per il codice personalizzato in cui puoi aggiungere lo snippet senza toccare i file principali. Copia il codice da CompleteGreet, apri l’editor HTML o l’area di iniezione del sito e incollalo prima del tag di chiusura. La bolla dovrebbe apparire dopo la pubblicazione.

Dove devo incollare esattamente lo script CompleteGreet nell’HTML?

Incolla lo script CompleteGreet subito prima del tag di chiusura in ogni pagina in cui vuoi mostrare la bolla. In questo modo il resto della pagina viene caricato prima. Se vuoi il widget solo su determinate pagine, inserisci lo script solo nei relativi file HTML oppure usa le regole di targeting della dashboard.

Perché la bolla video non appare nella modalità anteprima HTML?

La bolla può essere nascosta nelle anteprime a causa delle regole di sicurezza del browser o dell’isolamento degli iframe. Controlla il sito pubblicato invece dell’anteprima dell’editor. Alcuni editor HTML rimuovono JavaScript per sicurezza. Pubblica la pagina e aprila in una scheda normale. Se ancora non appare, verifica che lo script non sia dentro un commento o in tag che ne impediscono l’esecuzione.

Posso mostrare CompleteGreet solo su pagine HTML specifiche, come la pagina prezzi?

Sì. Aggiungi lo script solo ai file HTML in cui vuoi mostrare la bolla. In alternativa, inseriscilo nel sito e usa le regole URL della dashboard per mostrare o nascondere il widget in base al percorso. Questo funziona sui siti HTML statici e riduce le modifiche ripetute al codice.

CompleteGreet rallenta un sito HTML?

Il caricamento asincrono riduce il rischio di bloccare il rendering, ma l’effetto dipende dal sito, dal video, dalla rete e dal dispositivo. Verifica PageSpeed e Web Vitals prima e dopo l’incorporamento. I file video dovrebbero essere caricati quando servono.

Come testo la bolla video su mobile per il mio sito HTML?

Apri la pagina HTML pubblicata su un telefono reale o usa la modalità dispositivo di Chrome DevTools. Tocca la bolla per provare la riproduzione e l’invio del modulo. Controlla che il pulsante di chiusura sia facile da toccare e che il widget non copra elementi importanti come checkout o menu.

Quanto costa CompleteGreet al mese?

Prezzi, limiti di visitatori, funzioni e condizioni possono cambiare. Consulta la pagina prezzi attuale e verifica come viene misurato il traffico prima di scegliere un piano.