Come aggiungere una bolla video a React o Vue

Come si installa CompleteGreet su React o Vue?

Per aggiungere un widget con bolla video a React o Vue, usa il codice di integrazione fornito nel pannello CompleteGreet. Il widget viene caricato separatamente dall’albero dei componenti. Segui comunque la documentazione aggiornata, perché il metodo può cambiare in base al framework e al tipo di rendering.

Procedi così:

1. Accedi al pannello CompleteGreet e apri le istruzioni di installazione.
2. Scegli l’opzione adatta a un sito personalizzato oppure quella indicata nella documentazione attuale per il tuo framework.
3. Copia il codice associato al sito. Controlla che contenga l’identificativo corretto del progetto.
4. Aggiungi il codice al layout principale o al modello HTML seguendo le indicazioni del framework.
5. Avvia l’ambiente di sviluppo e visita una pagina interessata dalle regole. Verifica che la bolla venga caricata senza errori.

Se la bolla non compare, controlla cache, consenso, dominio autorizzato e console del browser prima di cambiare il codice.

E con Next.js e Nuxt?

Con Next.js o Nuxt devi evitare che il widget venga inizializzato durante il rendering sul server. Caricalo solo nel browser con il metodo consigliato dalla versione del framework in uso.

In Next.js puoi usare gli strumenti ufficiali per caricare script nel client. Scegli una strategia compatibile con il layout e verifica che non produca errori di idratazione. Le API cambiano tra le versioni, quindi controlla la documentazione attuale.

In Nuxt puoi registrare un plugin eseguito solo nel client. Nome del file e configurazione dipendono dalla versione di Nuxt. Verifica il metodo ufficiale per evitare errori causati dall’uso di window durante il rendering sul server.

Dopo il caricamento, prova il comportamento a ogni cambio di pagina. Non presumere che stato, visibilità o riproduzione restino identici con qualsiasi router.

Cosa si può personalizzare su React o Vue?

Regole per pagine e visitatori

Le regole degli URL permettono di mostrare la bolla su percorsi specifici, per esempio una pagina prezzi o demo. Controlla nel piano attuale quali condizioni per dispositivo, tempo o scorrimento sono davvero disponibili.

Le regole vengono gestite dal pannello, quindi molte modifiche non richiedono un nuovo rilascio dell’applicazione. Prova comunque il risultato nel sito reale dopo ogni cambiamento.

Azioni del pulsante e comportamento al clic

In base alla configurazione, il pulsante può aprire un indirizzo, un modulo, un appuntamento, una richiesta di richiamata, una chat oppure un’azione di acquisto.

Se vuoi collegare il widget allo stato dell’applicazione, usa soltanto eventi e API documentati. Verifica router, gestione del consenso ed errori prima della pubblicazione.

Campi del modulo e inoltro dei contatti

Puoi configurare un modulo tradizionale o in più passaggi. Chiedi solo i dati necessari e spiega come verranno usati.

Controlla nel pannello le integrazioni e i webhook disponibili. Prova consegna, notifiche, duplicati e gestione degli errori prima di usare i contatti in un CRM o in altri strumenti.

Identità visiva e posizione

Adatta colori, miniatura e posizione al sito. Su ogni dimensione dello schermo verifica che la bolla non copra navigazione, moduli, chat o altri elementi fissi.

Tra i migliori widget video la scelta giusta è quella che si integra bene con il tuo design e resta accessibile. Controlla personalmente font, contrasto e spaziatura, senza presumere che ogni stile venga ereditato automaticamente.

<codice di integrazione CompleteGreet>

<script CompleteGreet caricato solo nel browser>

<identificativo del sito e posizione configurati>

See the static HTML data above for the full breakdown.

Cosa controllare prima della pubblicazione?

Prova la bolla su dispositivi reali. iOS, Android e i browser desktop possono gestire in modo diverso video, audio, elementi fissi e consenso.

Controlla i Core Web Vitals prima e dopo l’installazione. Un widget non dovrebbe peggiorare in modo evidente LCP, CLS o la risposta alle interazioni. Le indicazioni di Google sui Web Vitals spiegano come misurare stabilità visiva e prestazioni. Usa dati del sito reale invece di promettere una soglia sempre invariata.

Controlla le regole di pagina su ogni percorso importante. In un’applicazione a pagina singola il widget può restare attivo durante la navigazione oppure essere reinizializzato, a seconda dell’integrazione.

Verifica che la presentazione compaia soltanto sugli URL scelti e che venga nascosta nei flussi di pagamento o nelle pagine private dove potrebbe disturbare.

Controlla anche l’uso dei dati mobili.

Evita di avviare automaticamente video pesanti a ogni visita. Su mobile, una miniatura statica con un pulsante di riproduzione chiaro lascia al visitatore la scelta di avviare il contenuto.

Prova i livelli visivi con menu, finestre modali e pannelli laterali. Il menu o il carrello non devono apparire dietro la bolla, e la bolla non deve scomparire dietro una finestra importante.

Infine, prova l’intero percorso come utente non autenticato. Cancella cache e cookie di prova, poi percorri le pagine dalla visita iniziale all’azione finale. La bolla video deve essere utile e non interrompere il visitatore nel momento sbagliato.

<codice script CompleteGreet con identificativo del sito>

Domande frequenti

Come aggiungo CompleteGreet a React senza aumentare il bundle?

Carica il codice CompleteGreet come script esterno usando il metodo consigliato dal framework. Misura comunque dimensioni, richieste e tempi nel progetto reale, perché il risultato dipende anche dagli altri script presenti.

Perché la bolla CompleteGreet non compare durante lo sviluppo locale?

Controlla che il dominio e la porta locali siano autorizzati nelle impostazioni del sito. Verifica anche consenso, cache, regole degli URL, errori della console e blocchi di rete.

CompleteGreet rallenta un’applicazione React?

Ogni script esterno può influire sulle prestazioni. Confronta Core Web Vitals e richieste di rete prima e dopo l’attivazione, soprattutto su mobile e con connessioni lente.

Posso mostrare video diversi su percorsi diversi di React Router?

Usa le regole degli URL e soltanto gli eventi o le API documentati nella versione attuale. Prova ogni percorso e ogni cambio di navigazione prima della pubblicazione.

CompleteGreet funziona con framework React renderizzati sul server come Next.js?

Può essere caricato soltanto nel browser, ma il metodo corretto dipende dalla versione e dall’architettura di Next.js. Segui la documentazione attuale e controlla gli errori di idratazione.

Quanto costa CompleteGreet per una startup SaaS React con 10.000 visitatori mensili?

Prezzi, limiti di visitatori e funzioni incluse possono cambiare. Consulta la pagina dei prezzi aggiornata e calcola il costo in base al traffico e alle esigenze reali.