Profilo
Dashboard
Esci
Indice
In breve
- CompleteGreet si aggiunge tramite l’area di inserimento del codice di Squarespace. Prima di iniziare, verifica che il tuo piano Squarespace includa questa funzione.
- Dopo l’installazione puoi gestire l’aspetto della bolla, le pagine in cui deve apparire e ciò che accade quando un visitatore fa clic.
- Prima di pubblicare, prova la bolla su computer e mobile. Controlla anche le regole per gli URL, le prestazioni, l’accessibilità e ogni azione disponibile.
Per aggiungere una bolla video a Squarespace, copia il codice fornito da CompleteGreet nell’area di inserimento del codice. Poi prova tutto sul sito pubblicato.
I piani CompleteGreet prevedono limiti basati sui visitatori unici. Consulta sempre il listino e il tuo account per prezzi, capacità e funzioni incluse aggiornati.
La possibilità di inserire codice e script esterni dipende dal piano Squarespace attivo. Controlla la documentazione e le impostazioni del sito prima di procedere.
Il tempo necessario varia in base al piano, al video, alla grafica, alle azioni e ai test da eseguire.
CompleteGreet è pensato per saluti video personali e azioni chiare. Può dare un volto umano a un sito Squarespace senza complicare inutilmente il percorso del visitatore.
Come si installa CompleteGreet su Squarespace?
Per installare CompleteGreet servono il codice disponibile nel tuo account e l’area di inserimento del codice di Squarespace. La durata dipende dal sito e dalla precisione dei test.
Una bolla video è un piccolo elemento posizionato in un angolo del sito. Può mostrare un saluto tuo o del tuo team e guidare il visitatore al passo successivo. La nostra guida su che cos’è una bolla video spiega in modo semplice come funziona questo tipo di widget.
Segui questi passaggi:
1. Crea una nuova bolla in CompleteGreet e assegnale un nome facile da riconoscere, per esempio Home Squarespace.
2. Registra o carica il tuo saluto in un formato supportato. Prima del caricamento, controlla nell’account i formati e i limiti di dimensione correnti.
3. Scegli miniatura, posizione, colori e testo del pulsante. Potrai modificare queste impostazioni da CompleteGreet senza inserire di nuovo il codice.
4. Pubblica la bolla e copia per intero il codice di installazione associato al sito e al widget.
5. Apri l’amministrazione di Squarespace in una nuova scheda. Cerca le impostazioni avanzate e l’area per l’inserimento del codice, usata da Squarespace per gli script esterni caricati sul sito. La documentazione ufficiale di Squarespace mostra dove inserire il codice secondo la procedura attuale.
6. Incolla tutto il codice CompleteGreet nel punto indicato dalla documentazione aggiornata. Controlla che durante l’operazione non ne sia stata omessa alcuna parte.
7. Salva le modifiche in Squarespace.
8. Apri il sito pubblicato in una finestra privata. Verifica che la bolla sia visibile, si apra e completi le azioni scelte. Se non compare, ricarica completamente la pagina e controlla cache e consenso agli script.
L’inserimento del codice può essere riservato a determinati piani Squarespace, e le condizioni possono cambiare. Prima dell’installazione, verifica quindi il piano attuale e la documentazione. Controlla anche che il template e le impostazioni di sicurezza consentano lo script.
Il conteggio dei visitatori unici dipende dal piano CompleteGreet attivo. Trovi definizione e limiti aggiornati nel listino e nel tuo account.
Che cosa puoi personalizzare su Squarespace?
Puoi gestire l’aspetto, il comportamento e le azioni della bolla. Le opzioni disponibili dipendono dal piano e dalla versione in uso. strumenti per bolle video applicano regole diverse per URL, azioni, personalizzazione e limiti.
Pagine e visitatori
Mostra la bolla solo nelle pagine in cui può essere utile. Per esempio, puoi usarla in home e nasconderla dove rischia di disturbare un’azione importante. Verifica quali opzioni offre il tuo account per ritardi, gruppi di visitatori e dispositivi.
Prova separatamente mobile e computer, perché i template Squarespace possono disporre gli elementi in modo diverso sui vari schermi. La bolla non deve coprire menu, pulsanti importanti, moduli o banner per il consenso.
Pulsanti e moduli
Un pulsante può aprire un calendario, un modulo, una pagina prodotto o un altro indirizzo pertinente. Usa un testo breve che dica chiaramente cosa succede dopo il clic.
Se il tuo account include moduli di contatto nel widget, puoi raccogliere nome ed email senza allontanare il visitatore dalla pagina. Chiedi solo i dati necessari e controlla consenso e conservazione.
Identità visiva e aspetto
Abbina i colori alla palette del tuo sito Squarespace. Scegli anche miniatura, posizione e distanza dai bordi, lasciando spazio a chat, banner di consenso e pulsanti fissi già presenti.
Scegli una dimensione visibile che non copra i contenuti. Non esiste una misura adatta a tutti i template, quindi prova la miniatura su più pagine e dispositivi reali.
Dopo aver sostituito video o miniatura, la cache potrebbe continuare a mostrare la versione precedente. Ricarica completamente la pagina e controllala in una finestra privata.
#cg-ig-PL4 {
max-width: 600px;
margin: 0 auto;
background: #f7f7fb;
border: 1px solid #e2e2ea;
border-radius: 12px;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
}
#cg-ig-PL4 .cg-accent-bar {
height: 4px;
background: #3D5ACE;
}
#cg-ig-PL4 .cg-content {
padding: 24px;
}
#cg-ig-PL4 .cg-title {
font-size: 20px;
font-weight: 700;
color: #1a1a2e;
margin: 0 0 8px 0;
line-height: 1.3;
}
#cg-ig-PL4 .cg-subtitle {
font-size: 14px;
color: #7a7a96;
margin: 0 0 24px 0;
line-height: 1.5;
}
#cg-ig-PL4 .cg-steps {
display: flex;
flex-direction: column;
gap: 0;
}
#cg-ig-PL4 .cg-step {
display: flex;
gap: 16px;
position: relative;
padding-bottom: 24px;
}
#cg-ig-PL4 .cg-step:last-child {
padding-bottom: 0;
}
#cg-ig-PL4 .cg-step:not(:last-child)::before {
content: ”;
position: absolute;
left: 15px;
top: 32px;
width: 2px;
height: calc(100% – 16px);
background: #e2e2ea;
}
#cg-ig-PL4 .cg-step-num {
width: 32px;
height: 32px;
border-radius: 50%;
background: #3D5ACE;
color: #ffffff;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
z-index: 1;
}
#cg-ig-PL4 .cg-step-content {
flex: 1;
padding-top: 4px;
}
#cg-ig-PL4 .cg-step-title {
font-size: 15px;
font-weight: 600;
color: #1a1a2e;
margin: 0 0 6px 0;
line-height: 1.4;
}
#cg-ig-PL4 .cg-step-desc {
font-size: 13px;
color: #4a4a68;
margin: 0 0 12px 0;
line-height: 1.5;
}
#cg-ig-PL4 .cg-code-box {
background: #1a1a2e;
border-radius: 8px;
padding: 12px 16px;
position: relative;
}
#cg-ig-PL4 .cg-code-label {
font-size: 11px;
color: #7a7a96;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
display: block;
}
#cg-ig-PL4 .cg-code-text {
font-family: “SF Mono”, Monaco, “Cascadia Code”, “Roboto Mono”, Consolas, monospace;
font-size: 12px;
color: #E48333;
margin: 0;
line-height: 1.6;
word-break: break-all;
}
#cg-ig-PL4 .cg-code-note {
font-size: 11px;
color: #7a7a96;
margin-top: 8px;
font-style: italic;
}
#cg-ig-PL4 .cg-path-box {
background: #ffffff;
border: 1px solid #e2e2ea;
border-radius: 6px;
padding: 10px 14px;
display: flex;
align-items: center;
gap: 8px;
}
#cg-ig-PL4 .cg-path-icon {
width: 16px;
height: 16px;
background: #3D5ACE;
border-radius: 3px;
flex-shrink: 0;
}
#cg-ig-PL4 .cg-path-text {
font-size: 13px;
color: #4a4a68;
margin: 0;
}
#cg-ig-PL4 .cg-path-arrow {
color: #7a7a96;
font-size: 12px;
}
#cg-ig-PL4 .cg-cta {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid #e2e2ea;
}
#cg-ig-PL4 .cg-cta-btn {
display: block;
width: 100%;
background: #3D5ACE;
color: #ffffff;
text-decoration: none;
text-align: center;
padding: 14px 20px;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
transition: background 0.2s ease;
}
#cg-ig-PL4 .cg-cta-btn:hover {
background: #2f4aa8;
}
#cg-ig-PL4 .cg-source {
margin-top: 16px;
font-size: 11px;
color: #7a7a96;
text-align: center;
}
#cg-ig-PL4 .cg-source a {
color: #7a7a96;
text-decoration: underline;
}
#cg-ig-PL4 .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;
}
@media (max-width: 480px) {
#cg-ig-PL4 .cg-content {
padding: 16px;
}
#cg-ig-PL4 .cg-title {
font-size: 18px;
}
#cg-ig-PL4 .cg-step {
gap: 12px;
}
#cg-ig-PL4 .cg-step-num {
width: 28px;
height: 28px;
font-size: 13px;
}
#cg-ig-PL4 .cg-step:not(:last-child)::before {
left: 13px;
top: 28px;
}
}
Installa CompleteGreet su Squarespace
Aggiungi la bolla video tramite l’inserimento del codice e controlla il sito pubblicato.
Crea il tuo account CompleteGreet
Crea la bolla video e scegli aspetto e azioni.
Copia il codice di installazione
Apri la sezione di installazione in CompleteGreet e copia tutto il codice.
<codice CompleteGreet da incollare in Squarespace>
Incolla questo codice nell’area di inserimento del codice di Squarespace.
Apri le impostazioni per il codice
Trova l’area di inserimento del codice nell’amministrazione di Squarespace.
Impostazioni › Avanzate › Inserimento codice
Incolla il codice
Incolla tutto il codice CompleteGreet nel punto indicato da Squarespace.
Salva e pubblica
Salva le modifiche e controlla la bolla sul sito pubblicato.
Fonte: Centro assistenza Squarespace, inserimento del codice
Consulta la panoramica statica qui sopra per vedere tutti i passaggi.
Che cosa controllare prima della pubblicazione?
Dedica qualche minuto a un controllo completo. Puoi così trovare problemi di posizione, riproduzione, regole per le pagine e moduli prima che li incontrino i visitatori.
Parti dal computer e usa una finestra privata. Osserva il caricamento e la posizione della bolla, poi verifica che la miniatura sia nitida. Apri il video e controlla riproduzione, audio, pulsanti e azioni.
Premi il pulsante di riproduzione e accertati che immagine, audio, sottotitoli e controlli funzionino come previsto.
Passa quindi al mobile. Una bolla video si comporta in modo diverso su uno schermo piccolo. Controlla la posizione, l’apertura del video e la dimensione del pulsante di chiusura. Il visitatore deve poter aprire e chiudere la bolla con il pollice, senza coprire la navigazione.
Un modulo semplice su computer può risultare scomodo su telefono. Riduci i campi a quelli davvero necessari, controlla la tastiera mostrata per ciascun campo e prova l’intero invio da mobile.
Le regole per gli URL sono una causa comune di errori. Prova diverse pagine reali del sito Squarespace e conferma che la bolla appaia solo dove serve. Controlla anche tutte le pagine da escludere.
Un saluto personale può avere senso in home, nella pagina prezzi o in una pagina di servizio. Non è automaticamente utile durante il pagamento, il recupero della password o nelle pagine legali. Imposta regole coerenti con la struttura reale del sito.
Misura anche le prestazioni. Una bolla video aggiunge script e contenuti multimediali alla pagina. Confronta il sito prima e dopo l’installazione su computer e mobile, così puoi individuare caricamenti più lenti, spostamenti del contenuto o clic in ritardo.
Confronta i risultati con le indicazioni di Google sui Web Vitals e approfondisci eventuali avvisi su spostamenti del contenuto o interazioni lente. Se i valori peggiorano, modifica le impostazioni di caricamento nella configurazione reale.
Fai una prova anche con una connessione mobile più lenta, non soltanto con la rete veloce dell’ufficio. Controlla quanto impiega la bolla ad aprirsi, come viene riprodotto il video e se i pulsanti rispondono in condizioni simili a quelle dei visitatori.
Infine, chiedi a una persona che non conosce il progetto di provare la pagina. Falle aprire il video e usare l’azione della bolla. Uno sguardo nuovo trova spesso problemi che il team non nota più.
Un nuovo utente può scoprire in pochi secondi un ostacolo che tu non hai visto per settimane.
Pubblica quando hai controllato aspetto, azioni, prestazioni e facilità d’uso.
Una bolla video può rendere un sito Squarespace più personale senza compromettere la struttura visiva.
Controlla comunque ogni template e la visualizzazione mobile, perché la posizione può cambiare.
Il caricamento asincrono non garantisce che le prestazioni restino identiche. Misura la pagina pubblicata prima e dopo l’installazione.
Accessibilità
Rispetta le preferenze per la riduzione del movimento, aggiungi sottotitoli e considera le regole del browser per la riproduzione automatica. Chiusura, riproduzione e focus devono funzionare anche da tastiera.
Consulta anche le linee guida W3C sull’accessibilità quando verifichi tastiera, focus, lettori di schermo, contrasto e alternative al video.
Prova il sito con Safari su iOS e Chrome su Android, perché il template e la larghezza dello schermo possono cambiare la posizione della bolla.
Domande frequenti
Quanto costa CompleteGreet per il sito di una piccola impresa?
Prezzo, limite di visitatori, numero di bolle e funzioni incluse dipendono dal piano corrente. Controlla il listino e il tuo account prima di confrontare le opzioni.
Con quali piattaforme funziona CompleteGreet?
CompleteGreet può essere usato su piattaforme supportate come Shopify, WordPress, Wix, Squarespace, Webflow e WooCommerce, oltre che su siti che consentono il codice di installazione necessario. Verifica la documentazione aggiornata per ogni piattaforma.
Quanto tempo serve per installare CompleteGreet in un negozio Shopify?
Il tempo dipende dal video, dall’aspetto, dalle azioni e dai test. Shopify può usare un’app o un metodo diverso da Squarespace, quindi segui sempre la guida aggiornata.
Che cosa succede se il sito supera il limite di visitatori del piano?
Il conteggio e la gestione del traffico aggiuntivo seguono il piano e le condizioni correnti. Prima di scegliere un abbonamento, controlla cosa accade quando ti avvicini al limite o lo superi.
CompleteGreet serve per raccogliere feedback o soltanto per i saluti?
CompleteGreet è adatto a saluti video, moduli semplici e azioni chiare. Se ti servono questionari lunghi con molte diramazioni, può essere più indicata una piattaforma dedicata ai sondaggi.
CompleteGreet applica costi extra durante un picco di traffico?
I piani prevedono limiti per i visitatori unici. Prima di una campagna o di un picco stagionale, controlla le condizioni aggiornate e come vengono gestiti un cambio di piano o il traffico aggiuntivo.
