Come creare il tuo Customer Hub Klaviyo

Tempo di lettura stimato 7 in minuti
|
Ultimo aggiornamento: 20 feb 2025, 18:59 EST
Cosa imparerai

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. 

Prima di iniziare

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.

Styling dell'hub clienti di Klaviyo

Styling dell'hub clienti di Klaviyo

Il cassetto di Klaviyo Customer Hub ha diverse schede personalizzabili:

  • Per te
  • Ordini
  • profilo
  • Chat (visibile solo quando la chat è abilitata)

Il cassetto dell'Hub clienti di Klaviyo è aperto sul sito web di un marchio di esempio e mostra che l'acquirente è connesso al suo account cliente.

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 una call-to-action principale

Personalizza una call-to-action principale

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 il tuo titolo call-to-action da visualizzare sopra il pulsante "Inizia" prima che accedano. 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".

La scheda Per te di Klaviyo Customer Hub mostra la call-to-action principale per un acquirente che non ha effettuato l'accesso a un account.

Per aggiornare, aggiorna la call-to-action principale per la tua interfaccia Klaviyo Customer Hub:

  1. Apri la scheda Klaviyo Customer Hub nella navigazione a sinistra di Klaviyo.
  2. Seleziona le Impostazioni nell'angolo in alto a destra.
    Il pulsante Impostazioni sul pannello di controllo dell'Hub clienti di Klaviyo.
  3. Seleziona il contenuto.
  4. Alla voce Call-to-action principale, personalizza una call-to-action da visualizzare sopra il pulsante Primi passi per gli acquirenti non autenticati.
    La sezione Call-to-action principale nel menu delle impostazioni del contenuto nella scheda Klaviyo Customer Hub in Klaviyo.
  5. Fai clic su Salva
Impostazioni del design

Impostazioni del design

Per le opzioni di design per personalizzare l'interfaccia di Klaviyo Customer Hub:

  1. Vai su Klaviyo Customer Hub nella navigazione a sinistra di Klaviyo.
  2. Seleziona Impostazioni.
  3. Apri il menu Design
    Il menu Design nelle impostazioni di Klaviyo Customer Hub in Klaviyo mostra tutte le opzioni di stile per personalizzare un cassetto di Klaviyo Customer Hub.

Puoi regolare le seguenti impostazioni di colore e stile:

  • 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.
    • 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.
  • 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. 
  • layout
    • Stile
      La forma dei bordi dei blocchi di contenuto, dei pulsanti e delle sezioni in Klaviyo Customer Hub. 
    • 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.
    • Colore di sfondo
      Il colore di base di Klaviyo Customer Hub sotto tutti i testi, i blocchi di contenuto e le estensioni.
Lanciatore di hub widget

Lanciatore di hub widget

Oltre a progettare Klaviyo Customer Hub in sé, puoi anche personalizzare un hub launcher widget, che è un piccolo elemento fluttuante sul tuo sito web su cui i visitatori possono cliccare per aprire rapidamente Klaviyo Customer Hub. Spesso viene utilizzata insieme alla funzionalità di chat web di Klaviyo Customer Hub. Un widget hub launcher funziona come un modulo teaser, seguendo i visitatori durante il loro percorso sul tuo sito web. 

Il menu dello stile del widget hub launcher nella pagina delle impostazioni del design mostra un esempio di hub launcher impostato su nascosto ma con alcuni stili configurati.

Puoi personalizzare il widget del launcher hub:

  • Visibilità
    • Quali visitatori del sito possono vedere e cliccare sul widget?
  • Forma del widget
    • La forma dei bordi del widget
  • Posizione della pagina
    • Dove viene posizionato il widget in una pagina web
  • Spaziatura
    • Distanza dall'angolo destro/sinistro e dall'angolo superiore/inferiore, a seconda della posizione del widget
  • Colore di sfondo del widget
    • Colore di base del widget
CSS personalizzato per l'hub clienti di Klaviyo

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 

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.

La sezione CSS personalizzati si trova in fondo al menu delle impostazioni di progettazione di Klaviyo Customer Hub in Klaviyo.

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-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

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

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

Risorse aggiuntive

Questo articolo è stato utile?
Usa questo modulo solo per il feedback sull'articolo. Scopri come contattare l'assistenza.

Esplora altri contenuti di Klaviyo

Community
Connettiti con altre aziende simili, partner ed esperti di Klaviyo per trovare ispirazione, condividere approfondimenti e ottenere risposte a tutte le tue domande.
Formazione dal vivo
Partecipa a una sessione dal vivo con gli esperti di Klaviyo per conoscere le linee guida consigliate, scoprire come configurare le funzionalità chiave e altro ancora.
Assistenza

Accedi all'assistenza tramite il tuo account.

Assistenza via e-mail (prova gratuita e account a pagamento) Disponibile 24 ore su 24, 7 giorni su 7

Chat/assistente virtuale
La disponibilità può variare in base alla località e al tipo di piano