Come creare il tuo Customer Hub Klaviyo
Cosa imparerai
Scopri le opzioni di design per lo stile del tuo cassetto Klaviyo Customer Hub e come puoi progettarlo in base al tuo marchio. Poiché l'interfaccia dell'Hub clienti di Klaviyo è radicata nell'esperienza del cliente, è buona norma creare un'interfaccia che appaia come un'estensione del tuo sito web.
Al momento Customer Hub per Shopify supporta le vetrine standard e Shopify Headless. Per WooCommerce, vai su https://help.klaviyo.com/hc/it-it/articles/47792369863451
Per avere un feedback sulle funzionalità di Klaviyo Customer Hub, invia un'e-mail a customerhub@klaviyo.com.
Prima di iniziare
Questa guida spiega come personalizzare lo stile dell'interfaccia di Klaviyo Customer Hub. Prima di procedere, assicurati che la funzionalità di Klaviyo Customer Hub sia abilitata.
Scopri di più su Klaviyo Customer Hub.
Opzioni di design dell'hub clienti Klaviyo
Il cassetto di Klaviyo Customer Hub ha diverse schede personalizzabili:
- Per te
- Ordini
- profilo
- Chat (visibile solo quando il web chat è abilitato)
In ognuna di queste schede hai a disposizione diverse opzioni per personalizzare il design, tra cui la modifica del testo, dei colori, dei caratteri e altro ancora. Le selezioni per la personalizzazione dello stile si estendono a cascata a tutte le schede del cassetto di Klaviyo Customer Hub per garantire un'esperienza coerente e in linea con il marchio ai visitatori del tuo sito.
Mentre l'aspetto della maggior parte degli elementi del cassetto di Klaviyo Customer Hub può essere modificato, la loro posizione non può essere modificata. Al momento sono disponibili solo opzioni di layout generali.
Mentre modifichi le impostazioni del design del tuo Klaviyo Customer Hub in Klaviyo, usa il pulsante Visualizza dal vivo per vedere le modifiche apportate all'interfaccia dell'hub sul tuo sito web. Nota che se il tuo Klaviyo Customer Hub è attivo, le modifiche salvate vengono pubblicate sul tuo sito.
Personalizza un invito all'azione principale per ogni scheda
Per impostazione predefinita, quando un acquirente accede al proprio account cliente, Klaviyo visualizza "Benvenuto, nome.cognome". come titolo principale nella scheda Per te del cassetto dell'Hub clienti di Klaviyo. Questo testo non è modificabile.
Per gli acquirenti non autenticati, invece, puoi scrivere la tua call-to-action da visualizzare sopra il pulsante "Accedi" prima che effettuino il login. Questo può essere utile per incentivare i visitatori non autenticati ad accedere e a coinvolgere l'interfaccia del tuo Klaviyo Customer Hub.
Nell'esempio seguente, la call-to-action principale recita "Ottieni premi, traccia gli ordini e salva la tua cronologia acquisti".
Nota: l'indicatore "Premi disponibili" viene visualizzato automaticamente se hai:
- Un coupon statico configurato nel Customer Hub, OPPURE
- Se hai abilitato un'integrazione per il programma fedeltà (come Smile).
Per aggiornare, aggiorna la call-to-action principale per la tua interfaccia Klaviyo Customer Hub:
- Apri la scheda Servizio - Klaviyo Customer Hub nella navigazione a sinistra di Klaviyo.
- Clicca su "Impostazioni".
- Alla voce Messaggi di benvenuto, personalizza una call-to-action da visualizzare sopra il pulsante "Accedi a" per gli acquirenti non autenticati. Puoi farlo per ogni scheda del cassetto di Klaviyo Customer Hub:
- Per te
- Ordini
- profilo
- Fai clic su Salva.
Progetta il tuo Customer Hub Klaviyo
Per le opzioni di design per personalizzare l'interfaccia di Klaviyo Customer Hub:
- Vai su Klaviyo Customer Hub nella navigazione a sinistra di Klaviyo.
- Scegli il design.
- Seleziona Hub nella parte superiore dell'anteprima.
- Dal menu Stile puoi regolare Lingua di visualizzazione, Caratteri, Colore e Stile e visualizzare in anteprima l'aspetto di queste regolazioni nell'area di lavoro dell'interfaccia del Customer Hub
- Puoi applicare uno stile avanzato con i CSS personalizzati. Per maggiori dettagli, consulta la sezione CSS personalizzati.
- Per maggiori informazioni sulla selezione di un'altra lingua, consulta l'articolo Supporto lingua e lingua nel Customer Hub.
- Fai clic su Salva per attivare le modifiche.
Personalizza il Customer Hub di Klaviyo widget
Oltre a progettare il Customer Hub stesso, puoi anche personalizzare il widget Hub, un piccolo elemento fluttuante sul tuo sito web su cui i visitatori possono cliccare per aprire rapidamente l'interfaccia Customer Hub. Il widget presenta tempestivamente le informazioni al tuo acquirente, come i messaggi di chat in arrivo e i feedback, quando aggiunge articoli al suo elenco Preferiti. Ti consigliamo di abilitare l'interfaccia utente di widget per ottenere un coinvolgimento significativo dei clienti, soprattutto quando sono abilitati il Web chat e i preferiti.
Per personalizzare il widget dell'hub:
- Seleziona Klaviyo Customer Hub nel menu a sinistra di Klaviyo.
- Scegli il design.
- Seleziona Widget nella parte superiore dell'anteprima.
- Dal menu Generale puoi regolare quali acquirenti dovrebbero vedere il widget e quale Vista del Customer Hub dovrebbe aprirsi quando viene cliccato il widget.
- Scegli quali acquirenti dovrebbero vedere il widget sul tuo sito:
- Tutti gli acquirenti (riconosciuti, connessi e disconnessi) – Il widget appare per tutti.
- Acquirenti riconosciuti o connessi: il widget appare solo se Klaviyo riconosce la persona (identificata) o se ha effettuato l'accesso (autenticata). È ideale per ridurre l'ingombro dei nuovi visitatori, mantenendo al contempo un'esperienza altamente coinvolgente per quelli abituali.
- Solo per gli acquirenti che hanno effettuato l'accesso: il widget viene visualizzato solo per chi ha una sessione Shopify attiva.
- Scegli quali acquirenti dovrebbero vedere il widget sul tuo sito:
- Dal menu Stile puoi regolare le impostazioni di Colore e Stile e visualizzare in anteprima l'aspetto di queste regolazioni nell'area di lavoro dell'interfaccia di Widget del Customer Hub
- Dal menu Layout puoi regolare il posizionamento del widget sul tuo sito web.
- Fai clic su Salva per attivare le modifiche.
Personalizza Gli Stati Di Widget Aggiuntivi
Puoi personalizzare ulteriori stati del widget selezionando il punto di inserimento accanto a Icona e passando a un altro stato del widget.
- Lo stato Aggiungi al carrello è visibile nelle pagine con i dettagli del prodotto. Il widget personalizzabile incoraggia gli acquirenti a effettuare un acquisto o a salvare un prodotto per un secondo momento, quando hanno scorto sotto la parte superiore della pagina di dettaglio del prodotto quando il tradizionale pulsante Aggiungi al carrello non è più visibile. Scopri di più su Come configurare il Widget "Aggiungi al carrello" nel Customer Hub.
CSS personalizzato per l'hub clienti di Klaviyo
Se le tue esigenze di branding non sono soddisfatte dalle opzioni di design di Klaviyo Customer Hub, puoi applicare uno stile avanzato con i CSS personalizzati.
Sebbene Klaviyo Customer Hub utilizzi i reset dei CSS per evitare collisioni con i CSS del tuo sito, potresti aver bisogno di aggiungere CSS personalizzati per risolvere casi limite o applicare stili unici, come il cassetto flottante o i valori del raggio del bordo personalizzato.
L'implementazione di CSS personalizzati per il tuo Customer Hub Klaviyo comporta la modifica del codice del tuo sito. Questo è consigliato solo ai marketer esperti di tecnologia o a coloro che hanno accesso a uno sviluppatore. Anche se il nostro prodotto offre assistenza per i CSS personalizzati, il nostro team di assistenza non può aiutarti ad aggiungere CSS personalizzati a Klaviyo Customer Hub al di là delle indicazioni generali contenute in questa documentazione. Per garantire la sicurezza dei tuoi dati, il team di assistenza di Klaviyo non è in grado di aprire i tuoi file HTML.
Applica un CSS personalizzato
Aggiungi i CSS personalizzati direttamente nella sezione CSS personalizzati delle impostazioni di design di Klaviyo Customer Hub e assicurati di salvare le modifiche.
Tutti gli elementi di base dell'Hub clienti di Klaviyo hanno nomi di classi con il prefisso kl-hub-:
- Tutti gli elementi di testo hanno la classe
kl-hub-text, mentre le intestazioni hanno la classe kl-hub-heading - I pulsanti hanno la classe
kl-hub-buttone comprendono anche le loro varianti (ad esempio, kl-hub-button-primario, kl-hub-button-secondario, ecc.) - Il cassetto dell'Hub clienti di Klaviyo ha la classe
kl-hub-cassetto - Gli input di testo hanno la classe
kl-hub-input - Tutti i blocchi di contenuto hanno la classe
kl-hub-content-bloccoe includono anche il nome interno del blocco (ad esempio, kl-hub-content-blocco-reward-programper un blocco di contenuto chiamato "Reward program").
Questo non è un elenco esaustivo; puoi trovarne altri ispezionando il Klaviyo Customer Hub con il debugger del tuo browser. Se un elemento ha una classe che inizia con kl-hub-, è sicuro da usare per i CSS personalizzati.
Esempio di CSS
Se vuoi rendere maiuscoli tutti i pulsanti e le intestazioni dell'Hub clienti di Klaviyo, puoi scrivere il seguente CSS personalizzato:
.kl-hub-button, .kl-hub-heading {
text-transform: uppercase;
}Risorse aggiuntive
- Primi passi con il Customer Hub su Shopify
Scopri Klaviyo Customer Hub, un'esperienza personalizzata unica per i visitatori dei negozi online che li guida dalla scoperta del prodotto all'acquisto e all'assistenza post-vendita.
- Primi passi con la web chat
Scopri di più sul web chat, un canale di comunicazione bidirezionale che puoi aggiungere al tuo sito web. Il Web chat può essere configurato autonomamente per consentirti di utilizzarlo con Customer Agent e Helpdesk, ma è anche progettato per integrarsi perfettamente nel Customer Hub. Il Web chat degli utenti consente alla tua azienda di avviare conversazioni personalizzate in tempo reale con i visitatori del tuo sito web, in modo che possano ottenere facilmente risposte alle loro domande o assistenza in caso di problemi.
- Come creare un blocco di contenuti per Klaviyo Customer Hub
Scopri come creare blocchi di contenuti per il tuo Customer Hub Klaviyo. I blocchi di contenuto sono blocchi altamente personalizzabili e personalizzabili che hanno accesso a Klaviyo dati del profilo che ti permettono di visualizzare integrazioni (ad es. punti fedeltà), offerte personalizzate e molto altro ancora.
- Come impostare il Widget "Aggiungi al carrello" nel Customer Hub
Scopri come mostrare un Widget interattivo "Aggiungi al carrello" nelle pagine con i dettagli dei prodotti. Il widget personalizzabile incoraggia gli acquirenti a effettuare un acquisto o a salvare un prodotto per un secondo momento, quando hanno scorto sotto la parte superiore della pagina di dettaglio del prodotto quando il tradizionale pulsante Aggiungi al carrello non è più visibile.