Guide per piattaforma 28 marzo 2026

Come aggiungere un widget video a WooCommerce

Scopri come installare CompleteGreet su WooCommerce, configurare la bolla video e controllare pagine, prestazioni, moduli e pagamento.

Come aggiungere un widget video a WooCommerce

In breve

  • Installa l’estensione ufficiale CompleteGreet per WordPress e WooCommerce. Non serve modificare direttamente i file del tema.
  • Dal pannello di CompleteGreet puoi scegliere dove mostrare il widget, come deve apparire e quali azioni deve proporre.
  • Prima di pubblicare, prova il widget su telefoni e tablet reali. Controlla anche le regole degli URL, il pagamento, le prestazioni, i moduli e gli eventuali conflitti con la galleria o il carrello.

Come si installa CompleteGreet su WooCommerce?

Installa l’estensione ufficiale CompleteGreet dall’amministrazione di WordPress, poi collega il tuo account.

Come installare l’estensione CompleteGreet su WooCommerce

In WordPress apri la sezione Plugin e cerca CompleteGreet.

Un widget con bolla video viene aggiunto tramite l’estensione. Non devi modificare header.php o functions.php.

  1. Installa e attiva l’estensione. La documentazione ufficiale di WooCommerce può aiutarti con le domande generali sui plugin e sul negozio. Per CompleteGreet, segui la procedura aggiornata indicata nell’estensione.
  2. Apri le impostazioni di CompleteGreet nell’amministrazione di WordPress.
  3. Collega il tuo account CompleteGreet e scegli la bolla o la configurazione di video shoppable che vuoi usare.
  4. Salva le impostazioni.
  5. Apri il negozio in una finestra in incognito e prova la bolla su una pagina prodotto interessata dalle regole.

Se il negozio usa un plugin di cache o una CDN, svuota la cache prima della prova. In caso contrario potresti vedere una versione precedente della pagina e pensare che la nuova configurazione non funzioni.

Anche con un hosting gestito, l’estensione resta in genere il metodo di installazione più sicuro.

Evita di modificare direttamente i file del tema o di aggiungere un secondo plugin per il codice nell’intestazione se l’estensione ufficiale CompleteGreet gestisce già l’installazione. Due metodi attivi insieme possono caricare lo script più volte e rendere più difficili gli aggiornamenti.

Cosa si può personalizzare su WooCommerce?

Dopo il collegamento puoi gestire la visibilità, l’aspetto e le azioni dal pannello di CompleteGreet.

Cosa personalizzare in una bolla video CompleteGreet su WooCommerce

Regole per pagine e visitatori

Le regole degli URL permettono di mostrare la bolla sui prodotti, sulle categorie o su altre pagine, per poi nasconderla nel carrello o durante il pagamento.

Controlla quali condizioni e regole per il pubblico sono disponibili nel piano attuale. Non dare per scontati trigger legati al valore del carrello, ai parametri UTM o alla provenienza se non sono documentati.

Configurazione dell’invito all’azione

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

Adatta colori e testo al tuo marchio e al percorso della pagina.

Campi del modulo e raccolta dei contatti

CompleteGreet offre moduli tradizionali e moduli in più passaggi. Chiedi solo i dati necessari e rispetta le regole su privacy e consenso.

Prova personalmente la convalida, il salvataggio e le notifiche.

Identità visiva e posizione

Puoi adattare colori, miniatura e posizione. Controlla la distanza dalla galleria, dal carrello, dalla chat e dal banner dei cookie.

Scegli una miniatura nitida e riconoscibile prima della riproduzione. Controlla l’inquadratura della persona o del prodotto e verifica il risultato sia su computer sia su dispositivi mobili. Un’immagine troppo affollata o centrata male rende la bolla più difficile da capire.

Tutti questi strumenti per bolle video devono essere provati con il tema, i plugin e il sistema di pagamento realmente usati dal negozio.

#cg-ig-PL7 {
max-width: 600px;
margin: 0 auto;
background: #f7f7fb;
border: 1px solid #e2e2ea;
border-radius: 12px;
padding: 24px;
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
position: relative;
overflow: hidden;
}
#cg-ig-PL7::before {
content: ”;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: #3D5ACE;
}
#cg-ig-PL7 .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#cg-ig-PL7 .ig-header {
text-align: center;
margin-bottom: 24px;
}
#cg-ig-PL7 .ig-title {
font-size: 20px;
font-weight: 700;
color: #1a1a2e;
margin: 0 0 8px 0;
}
#cg-ig-PL7 .ig-subtitle {
font-size: 14px;
color: #7a7a96;
margin: 0;
}
#cg-ig-PL7 .progress-bar {
display: flex;
justify-content: space-between;
margin-bottom: 24px;
position: relative;
}
#cg-ig-PL7 .progress-bar::before {
content: ”;
position: absolute;
top: 14px;
left: 40px;
right: 40px;
height: 2px;
background: #e2e2ea;
z-index: 0;
}
#cg-ig-PL7 .progress-step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 1;
}
#cg-ig-PL7 .step-circle {
width: 30px;
height: 30px;
border-radius: 50%;
background: #3D5ACE;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
margin-bottom: 6px;
}
#cg-ig-PL7 .step-label {
font-size: 11px;
color: #4a4a68;
font-weight: 500;
}
#cg-ig-PL7 .steps-container {
display: flex;
flex-direction: column;
gap: 16px;
}
#cg-ig-PL7 .step-card {
background: #ffffff;
border: 1px solid #e2e2ea;
border-radius: 8px;
padding: 16px;
}
#cg-ig-PL7 .step-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
#cg-ig-PL7 .step-number {
width: 28px;
height: 28px;
border-radius: 50%;
background: #3D5ACE;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
}
#cg-ig-PL7 .step-title {
font-size: 15px;
font-weight: 600;
color: #1a1a2e;
margin: 0;
}
#cg-ig-PL7 .step-desc {
font-size: 13px;
color: #4a4a68;
margin: 0 0 12px 0;
line-height: 1.5;
}
#cg-ig-PL7 .code-block {
background: #1a1a2e;
border-radius: 6px;
padding: 12px;
position: relative;
margin-top: 8px;
}
#cg-ig-PL7 .code-text {
font-family: “SF Mono”, Monaco, “Cascadia Code”, “Roboto Mono”, Consolas, monospace;
font-size: 12px;
color: #f7f7fb;
margin: 0;
word-break: break-all;
line-height: 1.4;
}
#cg-ig-PL7 .copy-btn {
position: absolute;
top: 8px;
right: 8px;
background: #E48333;
color: #ffffff;
border: none;
border-radius: 4px;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
}
#cg-ig-PL7 .cta-section {
margin-top: 20px;
text-align: center;
padding-top: 16px;
border-top: 1px solid #e2e2ea;
}
#cg-ig-PL7 .cta-button {
display: inline-block;
background: #3D5ACE;
color: #ffffff;
text-decoration: none;
padding: 12px 24px;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
}
#cg-ig-PL7 .cta-button:hover {
background: #2d4ab8;
}
#cg-ig-PL7 .source-line {
margin-top: 16px;
font-size: 11px;
color: #7a7a96;
text-align: center;
}
@media (max-width: 480px) {
#cg-ig-PL7 {
padding: 16px;
}
#cg-ig-PL7 .ig-title {
font-size: 18px;
}
#cg-ig-PL7 .step-label {
font-size: 10px;
}
#cg-ig-PL7 .step-title {
font-size: 14px;
}
}

Procedura guidata per configurare il widget video CompleteGreet su WooCommerce in quattro passaggi, dall’installazione all’attivazione.

CompleteGreet per WooCommerce

Configurazione in quattro passaggi

1

Account

2

Installa

3

Collega

4

Attiva

1

Prepara l’account CompleteGreet

Crea il tuo account e scegli la bolla video o la configurazione di video shoppable che vuoi utilizzare.

2

Installa l’estensione

Installa e attiva l’estensione ufficiale CompleteGreet dall’amministrazione di WordPress.

<estensione ufficiale CompleteGreet installata e attivata in WordPress>

3

Collega il negozio

Collega il tuo account CompleteGreet dalle impostazioni incluse nell’estensione.

<account CompleteGreet collegato>

4

Attiva e configura

Attiva il widget, poi imposta pagine, aspetto, azioni e contenuti video dal pannello di CompleteGreet.

Fonte: documentazione CompleteGreet

See the static HTML data above for the full breakdown.

Cosa controllare prima della pubblicazione?

Prova il widget su dispositivi reali e verifica che le regole degli URL includano soltanto le pagine desiderate del negozio.

Prove su dispositivi diversi dal computer

I browser desktop, iOS e Android possono mostrare la bolla in modo diverso. Controllala quindi su dispositivi reali, non soltanto in un’anteprima. Dimensioni, posizione e pulsante di chiusura devono restare facili da usare anche su uno schermo piccolo.

La riproduzione automatica con audio viene spesso bloccata su iOS. Avvia il video senza audio oppure dopo un’azione volontaria del visitatore.

Verifica le regole degli URL

Prova separatamente gli indirizzi di prodotti, categorie, carrello e pagamento. I percorsi di WooCommerce possono cambiare in base alla struttura dei permalink.

Una bolla mostrata durante il pagamento può disturbare chi vuole solo completare l’ordine. Nascondila nel carrello o al pagamento se copre un campo, un pulsante o un’informazione importante.

Prova diversi tipi di pagina e controlla sia le regole di inclusione sia quelle di esclusione.

Controlla anche le prestazioni di caricamento. Un widget con bolla video aggiunge risorse a una pagina del negozio che può essere già carica di immagini prodotto, script del carrello e plugin. Misura quindi una vera pagina prodotto prima e dopo l’attivazione.

Confronta la pagina prima e dopo l’attivazione con PageSpeed Insights e con le indicazioni di Google sui Web Vitals . Misura il cambiamento reale invece di promettere un tempo di caricamento fisso.

Controlla anche eventuali conflitti visivi con la galleria, il visualizzatore di immagini, il pannello del carrello e il banner dei cookie. Correggili nel tema oppure chiedi assistenza tecnica.

I video prodotto e i consigli personali possono aiutare i clienti di un negozio WooCommerce a capire meglio cosa stanno acquistando.

I casi dei clienti possono offrire spunti, ma non sono parametri validi per ogni negozio.

Misurare le prestazioni

Misura richieste, acquisti, azioni nel carrello, tempo sulla pagina e caricamento partendo dai tuoi dati iniziali.

Contenuti rapidi, chiari e pertinenti contano più di percentuali generiche sulla produzione o sulle conversioni. Misura velocità, abbandoni e azioni nel tuo negozio invece di applicare il risultato di un altro sito.

Requisiti per l’installazione

Devi avere accesso amministratore a WordPress, una versione compatibile di WooCommerce e il permesso di installare l’estensione CompleteGreet.

Le bolle video preregistrate di CompleteGreet non richiedono un supporto generale a WebRTC.

Prima di aggiungere un’estensione, consulta la documentazione aggiornata di WordPress, WooCommerce e del tuo hosting.

Calcola il ritorno economico usando margini, vendite, contatti qualificati e costi reali. Il numero di visitatori da solo non determina la redditività. Confronta un periodo iniziale con un periodo di prova abbastanza lungo e annota le altre modifiche effettuate nel negozio.

Inizia con alcune pagine prodotto importanti, poi estendi l’uso dopo una prova sufficientemente affidabile.

Domande frequenti

Come aggiungo CompleteGreet senza modificare il codice del pagamento?

Installa l’estensione ufficiale CompleteGreet per WordPress e WooCommerce. Non serve modificare direttamente il pagamento o i file del tema.

Perché la bolla video non compare nell’anteprima del tema WooCommerce?

L’anteprima può gestire in modo diverso script esterni, cache o consenso. Prova la pagina pubblicata, poi controlla il collegamento dell’estensione, la cache e l’ottimizzazione JavaScript.

Posso mostrare CompleteGreet solo sulle pagine prodotto e nasconderlo nel carrello?

Usa le regole degli URL nel pannello di CompleteGreet per includere le pagine prodotto desiderate ed escludere carrello e pagamento. Controlla gli indirizzi realmente usati dal negozio, perché possono dipendere dai permalink e dalla lingua.

CompleteGreet rallenta un negozio WooCommerce?

Ogni widget esterno può influire sulle prestazioni, anche se viene caricato in modo asincrono. Misura il negozio prima e dopo l’attivazione, soprattutto su mobile. Controlla anche immagini prodotto, tema, cache e altri plugin per individuare correttamente la causa di un rallentamento.

In cosa differiscono i prezzi dagli strumenti che fatturano al minuto?

CompleteGreet propone piani basati sui visitatori unici e non fattura separatamente ogni riproduzione o minuto di video. Controlla sempre limiti e condizioni aggiornati.

CompleteGreet è adatto a un negozio WooCommerce che vende prodotti costosi?

Le bolle personali e i video shoppable possono aiutare a consigliare i visitatori e presentare meglio i prodotti. Ogni negozio deve misurare l’effetto sulle proprie conversioni.

Azad Habib

Azad Habib

CEO & Founder of CompleteGreet

Azad Habib is the founder of CompleteGreet. With a background in ecommerce and user experience, he works at the intersection of trust, clarity, and conversion to help businesses make their websites feel more human from the first click.