Come usare CSS personalizzato per definire lo stile della web chat

Cosa imparerai

Come usare i CSS personalizzati per modificare l’aspetto della web chat di Klaviyo: il launcher, la finestra della chat, le bolle dei messaggi e il Composer dei messaggi. Scoprirai quali variabili del tema e nomi di classe è sicuro prendere come riferimento e quali si romperanno quando Klaviyo rilascerà un aggiornamento.

Questo articolo si applica sia se utilizzi la web chat da sola sia come parte di Customer Hub. L’interfaccia della chat è la stessa in entrambi i casi, quindi lo stesso CSS funziona per entrambi.

Prima di iniziare

Ti servirà:

• Un ruolo di Proprietario, Amministratore o Manager
• Familiarità con i selettori CSS e le proprietà personalizzate (variabili CSS)

Prima di scrivere CSS personalizzato, verifica se le impostazioni di progettazione integrate fanno già quello che ti serve. Colori, font, forma dei pulsanti e posizione del launcher sono tutti configurabili senza codice e queste impostazioni rimangono anche dopo gli aggiornamenti di Klaviyo. Usa il CSS personalizzato solo per ciò che non è coperto dalle impostazioni di progettazione.

Dove aggiungere il tuo CSS personalizzato

Il punto in cui trovi l'editor CSS personalizzato dipende dalla tua configurazione.

Se utilizzi Customer Hub

1. Vai a Customer Hub > Design.
2. Scorri fino alla sezione Personalizzato in fondo alle impostazioni dello stile.
3. Fai clic su Aggiungi CSS personalizzato oppure modifica il CSS già presente.
4. Clicca su Salva.

Se utilizzi la web chat autonoma

1. Vai su Impostazioni > web chat > Design.
2. Scorri fino alla sezione Personalizzato in fondo alle impostazioni dello stile.
3. Fai clic su Aggiungi CSS personalizzato oppure modifica il CSS già presente.
4. Clicca su Salva.

Come viene applicato il CSS personalizzato

Il tuo CSS viene aggiunto a un tag di stile sulla vetrina del tuo negozio, dopo gli stili di Klaviyo. Da questo derivano due aspetti:

• Il tuo CSS ha la meglio. Poiché viene caricato per ultimo, le tue regole sostituiscono le impostazioni predefinite di Klaviyo senza bisogno di !important nella maggior parte dei casi.
• Il tuo CSS non è delimitato alla chat. Si applica all’intera pagina. Definisci sempre l’ambito dei selettori su un elemento della chat, invece di scrivere regole generiche come button { … }, che interesserebbero l’intera vetrina del negozio.

Inizia con le variabili del tema

Il modo più affidabile per modificare lo stile della web chat è sovrascrivere le variabili del tema di Klaviyo in un blocco :root. Sono stabili, vengono applicate correttamente a cascata in tutta l’interfaccia e hanno molte meno probabilità di interrompersi rispetto al puntare a singoli elementi.

:root {
  --atlas-chat-bubble-background: #f0ebe4;
  --atlas-message-border-radius: 4px;
}

Variabili del messaggio via chat

I messaggi di Shopper (in uscita) riutilizzano intenzionalmente i colori del tuo brand: la bolla usa --atlas-button-primary e il testo usa --atlas-text-primary-inverse, che imposti entrambi nelle impostazioni di progettazione.

Variabili di colore e superficie

Variabili di forma e spaziatura

Variabili tipografiche

Molti di questi sono già compilati in base alle impostazioni di design. È preferibile impostare font e colori nell’interfaccia utente delle impostazioni di design: usa le variabili per i valori che l’interfaccia utente non espone.

Elementi di destinazione con hook di classe

Quando una variabile del tema non basta, indirizza direttamente gli elementi. Klaviyo garantisce i nomi delle classi riportati di seguito.

Elementi della chat

La finestra della chat include anche una classe che indica la schermata corrente — .kl-hub-route-chat per la chat stessa. Nella web chat autonoma questa è sempre .kl-hub-route-chat. In Customer Hub cambia man mano che chi fa acquisti naviga (.kl-hub-route-home, .kl-hub-route-orders, e così via), il che ti permette di applicare CSS a una sola schermata.

Il pulsante di invio non ha una classe dedicata. Prendilo come target tramite il Composer:

.kl-hub-chat-input-wrapper .kl-hub-button-primary {
  background: #2f4f4f;
}

Elementi condivisi

Stilizzare in modo diverso i messaggi dell'agente e del cliente

Questa è la richiesta più comune e richiede un approccio specifico. Le bolle di agente e acquirente condividono la singola classe .kl-hub-message — non esiste una classe stabile che le distingua, quindi non puoi selezionarne una direttamente.

Usa invece le variabili del tema, che gestiscono già i due elementi in modo diverso:

:root {
  /* Agent messages */
  --atlas-chat-bubble-background: #f0ebe4;
  --atlas-chat-bubble-text-primary: #2b2b2b;

  /* Shopper messages */
  --atlas-button-primary: #1f3a3d;
  --atlas-text-primary-inverse: #ffffff;
}

Esempi

Rendi tutto squadrato

:root {
  --atlas-drawer-inset-border-radius: 0;
  --atlas-message-border-radius: 0;
  --atlas-button-border-radius: 0;
  --atlas-input-border-radius-normal: 0;
}

Intestazioni e pulsanti in maiuscolo

.kl-hub-heading,
.kl-hub-button {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

Rendi più grande il launcher con un’ombreggiatura personalizzata

.kl-hub-launcher {
  width: 72px !important;
  height: 72px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important;
}

Il launcher imposta diverse proprietà direttamente sull’elemento, quindi le regole del launcher devono includere !important per avere effetto. Questo è l’unico caso in cui è normalmente necessario.

Allarga la finestra della chat su desktop

@media (min-width: 900px) {
  .kl-hub-drawer {
    width: 480px;
  }
}

Se il CSS non si salva

Quando salvi, Klaviyo verifica che il CSS venga analizzato correttamente. Se non è così, vedrai CSS non valido. Controlla la tua sintassi. e le modifiche non verranno salvate.

Un foglio di stile viene rifiutato del tutto solo quando non produce alcuna regola, il che di solito significa che ciò che hai incollato non è CSS. Cause comuni:

• Incollare testo normale, HTML o un tag di stile anziché regole CSS
• Incollare una parte di una dichiarazione anziché una regola completa
• Un foglio di stile in cui ogni regola presenta un errore di sintassi

Cosa non può fare un CSS personalizzato

• Modifica il testo. Il CSS personalizzato non può modificare la formulazione. Per farlo, usa le impostazioni di progettazione e dei contenuti.
• Riordina o riposiziona gli elementi oltre ciò che consente il layout CSS. La struttura della chat non è personalizzabile.
• Segmenta separatamente le bolle di agenti e di acquirenti per classe. Usa le variabili del tema, come descritto sopra.
• Sopravvivi automaticamente alle riprogettazioni. Gli hook delle classi e le variabili sono stabili durante gli aggiornamenti normali, ma una riprogettazione significativa potrebbe richiedere di rivedere i CSS. Ripeti il test dopo le release principali.

Risorse aggiuntive