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.
Klaviyo Customer Hub fa parte del sito Klaviyo Service e l'accesso alla beta è in corso di distribuzione graduale. Se non hai ancora accesso alla scheda Klaviyo Customer Hub nella navigazione principale di Klaviyo, iscriviti alla lista d'attesa di Klaviyo Customer Hub. Tieni presente che per essere approvato devi avere un piano e-mail a pagamento Klaviyo. La partecipazione a questa beta è attualmente disponibile solo in lingua inglese per coloro che gestiscono un negozio online Shopify. I front-end headless personalizzati non sono attualmente supportati, anche se si utilizza Shopify per il backend.
Il prodotto è ancora in fase beta, quindi le sue funzionalità non sono complete e saranno soggette a frequenti modifiche durante il periodo di beta. Abilitando Klaviyo Customer Hub attraverso il flusso di lavoro, accetti i termini e le condizioni della beta. Sebbene questa funzionalità sia gratuita durante il periodo di beta, sarà venduta separatamente al momento del lancio della disponibilità generale.
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 KlaviyoOpzioni di design dell'hub clienti Klaviyo
Il cassetto di Klaviyo Customer Hub ha diverse schede personalizzabili:
- Per te
- Ordini
- profilo
- Chat (visibile solo quando la chat è abilitata)
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 schedaPersonalizza 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 qui sotto, la call-to-action principale recita "Guadagna premi, segui gli ordini e salva la cronologia degli acquisti".
Per aggiornare, aggiorna la call-to-action principale per la tua interfaccia Klaviyo Customer Hub:
- Apri la scheda Klaviyo Customer Hub nella navigazione a sinistra di Klaviyo.
- Clicca su "Impostazioni".
- Scegli la scheda Contenuto.
- 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.
- Apri il menu Stile.
- Dal menu Stile puoi regolare le impostazioni di colore e stile e vedere come appariranno nell'interfaccia Klaviyo Customer Hub:
-
Caratteri
-
Font delle intestazioni
Utilizzato per le intestazioni di ogni scheda di Klaviyo Customer Hub. Scegli Eredita dal sito per replicare automaticamente il font utilizzato nelle altre intestazioni del tuo sito.
Nota che puoi anche aggiungere un font personalizzato selezionando Configura font personalizzato, quindi inserendo il suo nome e le sue dimensioni. Questo font personalizzato deve essere già presente nella sezione Fonts del tuo account.
-
Colore dell'intestazione
Utilizzato per l'intestazione del testo in ogni scheda di Klaviyo Customer Hub. -
Font di paragrafo
Utilizzato per il testo all'interno di ogni sezione, blocco di contenuto e pulsante. Scegli Eredita dal sito per replicare automaticamente il font utilizzato in altri paragrafi del tuo sito. -
Colore del paragrafo
Utilizzato per tutti i pulsanti, i blocchi di contenuto e i testi delle sezioni di Klaviyo Customer Hub.
-
Font delle intestazioni
-
Pulsanti
-
Colore dei pulsanti
Il colore di sfondo per tutti i pulsanti di Klaviyo Customer Hub. -
Colore del testo dei pulsanti
Il colore del testo di tutti i pulsanti di Klaviyo Customer Hub. -
Caso del testo dei pulsanti
Le opzioni di capitalizzazione per il testo di tutti i pulsanti di Klaviyo Customer Hub.
-
Colore dei pulsanti
-
Stile
-
Formadell'
La forma dei bordi dei blocchi di contenuto, dei pulsanti e delle sezioni nel Klaviyo Customer Hub.
-
Colore di sfondo
Il colore di base di Klaviyo Customer Hub sotto tutti i testi, i blocchi di contenuto e le estensioni.
-
Formadell'
-
layout
-
Posizione sul desktop
Dove scorre il cassetto di Klaviyo Customer Hub (lato destro o sinistro della finestra). Se il tuo brand utilizza un cassetto per il carrello, prendi in considerazione il posizionamento allineato a sinistra in modo che non si sovrapponga a Klaviyo Customer Hub.
-
Posizione sul desktop
-
CSS personalizzato
Puoi anche usare uno stile avanzato con il CSS personalizzato. Per maggiori dettagli, dai un'occhiata alla sezione CSS personalizzato qui sotto.
-
Caratteri
- Clicca su Pubblica per rendere visibili le modifiche.
Personalizza il Customer Hub di Klaviyo widget
Oltre a progettare Klaviyo Customer Hub, puoi anche personalizzare l'widget, che è un piccolo elemento mobile sul tuo sito web che i visitatori possono cliccare per aprire velocemente l'interfaccia di Klaviyo Customer Hub. Il widget hub funziona un po' come un teaser di un modulo, seguendo i visitatori durante tutto il loro viaggio sul tuo sito web.
Per personalizzare il widget dell'hub:
- Seleziona Klaviyo Customer Hub nel menu a sinistra di Klaviyo.
- Scegli il design.
- Apri il menu dei widget.
- Puoi personalizzare il widget del launcher hub:
-
Visibilità
Quali visitatori del sito possono vedere e cliccare sul widget -
Apri le impostazionidell'
. Quale pagina si apre nel Klaviyo Customer Hub? -
Forma
Laformadei bordi del widget -
e coloreIl colore del widget -
Posizione
Dove si trova il widget in una pagina web -
Spaziatura
Distanza dall'angolo sinistro/destro e superiore/inferiore, a seconda della posizione del widget
-
Visibilità
- Clicca su Pubblica per vedere le modifiche in tempo reale.
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 classekl-hub-heading
- I pulsanti hanno la classe
kl-hub-button
e 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-blocco
e includono anche il nome interno del blocco (ad esempio,kl-hub-content-blocco-reward-program
per 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 {Risorse aggiuntive
text-transform: uppercase;
}