Come creare blocchi HTML e CSS personalizzati per Customer Hub

Cosa imparerai

Come creare un blocco personalizzato per il tuo Customer Hub usando HTML e CSS personalizzati. Usalo per creare contenuti in linea con il tuo brand, come schede di avanzamento del programma fedeltà, moduli promozionali e tabelle di confronto, quando i campi del blocco contenuti standard non sono abbastanza flessibili.

Prima di iniziare

Questa guida si basa sui blocchi di contenuto. Se non hai mai creato un blocco di contenuto prima, inizia con Come creare blocchi di contenuto per Customer Hub. Per modificare l’aspetto dell’intero Customer Hub anziché di un singolo blocco, consulta Come definire lo stile del tuo Customer Hub.

Cosa puoi fare con i blocchi HTML personalizzati

Un blocco HTML personalizzato è un blocco di contenuti avanzato con due campi di codice: uno per l'HTML e uno per il CSS. L'HTML definisce la struttura e il contenuto del blocco e il CSS ne controlla lo stile, il layout e il comportamento responsive. Usa i blocchi HTML personalizzati per:

• Mostra una scheda di avanzamento del programma fedeltà o un riepilogo dei premi usando i punti o i dati del livello da un profilo Klaviyo.
• Crea una tabella di confronto, ad esempio per spiegare livelli di iscrizione o piani.
• Crea un banner o un modulo promozionale in linea con il tuo brand.
• Disponi i contenuti in modi che i campi standard per intestazione, paragrafo e immagine non consentono.
• Aggiungi funzionalità, come una lista dei desideri o uno strumento di recensioni di terze parti, facendo riferimento a un elemento personalizzato definito sul tuo sito.

I blocchi HTML personalizzati vengono visualizzati nella scheda Per te insieme agli altri blocchi di contenuto e puoi anche usarli nei blocchi di contenuto onsite. Lo stato di accesso, la visibilità basata sui gruppi, la pianificazione e le impostazioni del contesto di visualizzazione funzionano allo stesso modo degli altri blocchi di contenuto.

Cosa è supportato e cosa no

Klaviyo ripulisce il tuo HTML e CSS e applica il tuo CSS al blocco, così non può modificare il resto del tuo Customer Hub o del tuo sito web. Tieni a mente questi limiti:

• Supportato: HTML per struttura e contenuto, CSS per stile e layout, tag di personalizzazione di Klaviyo per i dati del profilo ed elementi personalizzati definiti sul tuo sito per qualsiasi funzionalità aggiuntiva.
• JavaScript risiede sul tuo sito, non nel blocco: non puoi scrivere JavaScript direttamente nel campo HTML. Qualsiasi cosa inserisci lì viene rimossa e non viene salvata. Per aggiungere funzionalità, incluse le integrazioni di terze parti, definisci un elemento personalizzato sul tuo sito e fai riferimento a quell’elemento nel tuo blocco. Vedi Integra strumenti di terze parti con elementi personalizzati qui sotto.
• Non supportato: CSS che influisce su qualsiasi elemento al di fuori del tuo blocco, ad esempio lo stile dell’intera pagina, o modifiche al markup dei blocchi nativi di Klaviyo.
• Dati: tutti i dati che visualizzi devono provenire dalle Proprietà del profilo di Klaviyo tramite i tag di personalizzazione. I dati degli eventi non sono supportati.

Crea un blocco HTML personalizzato

1. Vai a Customer Hub nella scheda Website.
2. Seleziona Design nella navigazione di Customer Hub.
3. Fai clic su Modifica l’Hub per aprire l’editor di Customer Hub.
4. Seleziona il “+” nella barra di navigazione a sinistra per aggiungere un blocco di contenuto
5. Fai clic su Crea il tuo, quindi scegli HTML nella parte superiore del pannello dei contenuti per usare campi HTML e CSS separati.
6. Inserisci un Nome interno. Klaviyo usa questo nome per generare report sui clic nel blocco e non puoi modificarlo dopo la creazione del blocco.
7. Inserisci il tuo codice nei campi HTML e CSS. Vedi Scrivi il tuo HTML e CSS qui sotto.
8. Configura chi vede il blocco in base allo stato di accesso, alla visibilità basata su gruppi, alla programmazione e al contesto di visualizzazione.
9. Rivedi l’anteprima live e risolvi eventuali avvisi di convalida. Con HTML selezionato, fai clic su Pubblica per salvare il blocco. Per visualizzarlo sul tuo sito, anche il tuo Customer Hub deve essere live.

Scrivi il tuo HTML e CSS

Aggiungi il tuo HTML

Usa il campo HTML per creare la struttura del tuo blocco con elementi standard come titoli, paragrafi, elenchi, link, immagini e tabelle. Crea un link alle pagine del tuo sito con i normali tag di ancoraggio. Poiché non puoi scrivere JavaScript nel blocco, i pulsanti e i link devono puntare a un URL. Per qualsiasi cosa più interattiva, usa un elemento personalizzato.

Applica lo stile con CSS

Usa il campo CSS per controllare spaziatura, colore, tipografia e layout responsive. Il tuo CSS si applica solo a questo blocco. Per impostazione predefinita, un blocco HTML personalizzato viene formattato in modo da corrispondere agli altri blocchi di contenuto, quindi devi scrivere il CSS solo per le parti che vuoi modificare.

• Dai ai tuoi elementi nomi di classe personalizzati, come rewards-card, e indirizza quelle classi nel tuo CSS.
• Aggiungi @media regole in modo che il blocco venga visualizzato correttamente sugli schermi piccoli.
• Usa font-family: inherit così il testo corrisponde ai caratteri che hai scelto nella scheda Stile.

Aggiungi personalizzazione

Usa i tag di personalizzazione di Klaviyo nel tuo HTML per mostrare i dati del profilo, come il saldo punti fedeltà. Includi sempre un valore predefinito, in modo che il blocco non mostri spazi vuoti quando un cliente non ha fornito i dati. I dati del profilo vengono visualizzati solo per chi ha effettuato l’accesso o è stato identificato. Tutti gli altri visualizzano il valore predefinito.

Esempio: carta punti fedeltà

Questo esempio mostra il livello e il saldo punti di un acquirente con un pulsante che rimanda alla tua pagina premi. Sostituisci i nomi delle proprietà (loyalty_points e Membership Tier) con le Proprietà del profilo sincronizzate dalle tue integrazioni fedeltà e aggiorna l’URL del link.

<div class="rewards-card">
  <p class="rewards-eyebrow">{{ person|lookup:'Membership Tier'|default:'Member' }} status</p>
  <h3 class="rewards-points">{{ person|lookup:'loyalty_points'|default:'0'|floatformat:0 }} points</h3>
  <p class="rewards-copy">Redeem your points for discounts on your next order.</p>
  <a class="rewards-button" href="/pages/rewards">Redeem rewards</a>
</div>

.rewards-card {
  padding: 20px;
  border-radius: 12px;
  background: #f6f1ea;
  color: #232323;
  font-family: inherit;
}

.rewards-eyebrow {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rewards-points {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.2;
}

.rewards-copy {
  margin: 0 0 16px;
  font-size: 14px;
}

.rewards-button {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background: #232323;
  color: #ffffff;
  font-size: 14px;
  text-decoration: none;
}

@media (max-width: 480px) {
  .rewards-card {
    padding: 16px;
  }

  .rewards-points {
    font-size: 24px;
  }
}

Esempio: tabella di confronto dell'iscrizione

Questo esempio confronta due livelli di iscrizione. Il wrapper consente alla tabella di scorrere lateralmente sugli schermi stretti invece di compromettere il layout.

<div class="compare-wrap">
  <table class="compare">
    <thead>
      <tr>
        <th></th>
        <th>Standard</th>
        <th>VIP</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Free shipping</th>
        <td>Orders over $75</td>
        <td>Always</td>
      </tr>
      <tr>
        <th scope="row">Early access</th>
        <td>No</td>
        <td>Yes</td>
      </tr>
      <tr>
        <th scope="row">Birthday reward</th>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
    </tbody>
  </table>
</div>

.compare-wrap {
  overflow-x: auto;
}

.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.compare th,
.compare td {
  padding: 10px 12px;
  border-bottom: 1px solid #e4e4e4;
  text-align: left;
}

.compare thead th {
  background: #f6f1ea;
}

Integra strumenti di terze parti con elementi personalizzati

Non puoi scrivere JavaScript direttamente in un blocco HTML personalizzato, ma puoi comunque aggiungere funzionalità basate su JavaScript facendo riferimento a un elemento personalizzato definito dal tuo sito. Un elemento personalizzato è un tag HTML riutilizzabile con un nome che contiene un trattino, come <wishlist-widget>, che uno sviluppatore registra in JavaScript sul tuo negozio online. Il tuo blocco contiene solo il tag e il codice del tuo sito fa il resto. Usa questo approccio per mostrare contenuti di strumenti di terze parti, come liste dei desideri, recensioni o app fedeltà.

Come funziona

1. Il tuo sviluppatore o l’app di terze parti definisce l’elemento personalizzato nella tua vetrina online. Di solito questa operazione viene eseguita tramite il tuo tema o lo script dell’app.
2. Nel campo HTML, aggiungi il tag nel punto in cui vuoi che l'elemento venga visualizzato. È consentito qualsiasi nome di tag che contenga un trattino.
3. Facoltativamente, passa i dati del profilo all’elemento come attributi utilizzando i tag di personalizzazione.
4. Pubblica il blocco. Quando Customer Hub viene caricato in una pagina in cui il tuo sito ha definito l’elemento, il codice del tuo sito lo renderizza all’interno del blocco.

Questo esempio inserisce un elemento della wishlist in un blocco e gli passa l’indirizzo e-mail dell’acquirente. Il link all’interno del tag è contenuto di fallback che viene visualizzato se l’elemento non è definito nella pagina. Sostituisci il nome del tag e gli attributi con quelli utilizzati dal tuo strumento di terze parti.

<div class="wishlist-block">
  <h3>Your wishlist</h3>
  <wishlist-widget customer-email="{{ person.email }}" max-items="4">
    <a href="/pages/wishlist">View your wishlist</a>
  </wishlist-widget>
</div>

Cose da sapere

• L’elemento deve essere definito sul tuo sito. Funziona solo nelle pagine in cui il tuo sito ha caricato lo script che lo definisce. Klaviyo non carica script di terze parti per te. Aggiungi contenuti di fallback all’interno del tag, così chi acquista vede qualcosa di utile se l’elemento non è disponibile.
• Personalization funziona negli attributi. Si applicano le stesse regole come in qualsiasi altra parte del tuo blocco. I dati del profilo vengono visualizzati solo per chi ha effettuato l’accesso o è stato identificato, quindi includi un valore predefinito per tutti gli altri.
• Gli elementi personalizzati ereditano gli stili del tuo sito. Customer Hub non viene eseguito all’interno di un iframe o di uno shadow DOM, quindi il tuo elemento personalizzato eredita il CSS del tuo sito e può esserne influenzato. Puoi anche applicare uno stile al tag dell’elemento dal CSS del tuo blocco.
• Scrivi il JavaScript sul tuo sito, non nel blocco. Qualsiasi JavaScript inserito nel campo HTML viene rimosso e non viene salvato. Definisci la funzionalità in un elemento personalizzato sul tuo sito, poi fai riferimento a quell’elemento dal tuo blocco.
• Sei responsabile del codice e dei dati di terze parti. Prima di trasferire i dati del profilo a uno strumento di terze parti, assicurati che farlo sia conforme ai tuoi obblighi in materia di privacy. L’assistenza Klaviyo non può risolvere i problemi del tuo elemento personalizzato o dello strumento di terze parti su cui si basa.

Usa HTML personalizzato nei blocchi sul sito

L'HTML personalizzato funziona allo stesso modo nei blocchi di contenuti onsite e nella scheda Per te. Crei il blocco nello stesso editor dei blocchi di contenuto usando i campi HTML e CSS e tutto ciò che è descritto in questo articolo si applica, inclusi i tag di personalizzazione, gli elementi personalizzati e il tracciamento dei clic.

Tieni a mente questi punti quando il blocco viene visualizzato sul tuo storefront:

• Il CSS del tuo sito può influire sul blocco. I blocchi onsite vengono renderizzati direttamente nella pagina, quindi gli stili del tuo sito possono influire sul loro aspetto. Controlla il blocco sulla tua pagina live dopo la pubblicazione.
• L’anteprima potrebbe differire dalla tua pagina live. L’anteprima dell’editor non può riprodurre ogni stile presente sul tuo sito.
• Gli elementi personalizzati devono essere caricati su ogni pagina in cui compare il blocco. Assicurati che lo script che definisce l’elemento personalizzato sia caricato su ogni pagina in cui viene visualizzato il blocco.

Usa HTML personalizzato nei blocchi di contenuti sul sito

L’HTML personalizzato funziona anche nei blocchi di contenuti onsite, che vengono visualizzati direttamente sulle pagine del tuo negozio online anziché all’interno del cassetto di Customer Hub. Li crei nello stesso editor di blocchi di contenuti e si applicano le stesse regole: scegli HTML per usare campi HTML e CSS separati, usa i tag di personalizzazione per i dati del profilo e fai riferimento a elementi personalizzati per qualsiasi funzionalità aggiunta. Alcune cose funzionano in modo diverso onsite:

• I CSS del tuo sito hanno più influenza. Il blocco viene visualizzato direttamente nella pagina, quindi gli stili del tuo sito possono influenzarlo più di quanto facciano all’interno del pannello a scomparsa di Customer Hub. Testa i CSS nella pagina live.
• L’anteprima potrebbe non corrispondere esattamente alla tua pagina. Usa l’anteprima sul sito per controllare il tuo blocco, poi verifica come appare il blocco pubblicato sul tuo negozio online.
• Gli elementi personalizzati devono essere caricati su ogni pagina in cui compare il blocco. Se fai riferimento a un elemento personalizzato, assicurati che lo script che lo definisce venga caricato su ogni pagina in cui viene visualizzato il blocco onsite.

Visualizza l'anteprima e testa il tuo blocco

L’anteprima si aggiorna mentre modifichi HTML e CSS. Se c’è un errore nel codice, l’editor mostra un messaggio di convalida così puoi correggerlo prima di pubblicare. Prima di pubblicare:

• Usa Anteprima come per selezionare un profilo e confrontare le visualizzazioni Connesso e Disconnesso.
• Esegui un test con un profilo a cui mancano i dati usati dai tuoi tag di personalizzazione, per verificare che i valori predefiniti siano corretti.
• Controlla il blocco alle dimensioni mobile e desktop.

Monitora le prestazioni del blocco

Klaviyo tiene traccia di ogni clic su un blocco HTML personalizzato come evento Customer Hub clicked on content block, utilizzando il nome interno del blocco, e lo segnala nello stesso modo degli altri blocchi di contenuto. Klaviyo registra se è stato fatto clic sul blocco, non su quale singolo link o pulsante al suo interno è stato fatto clic.

Procedure consigliate

• Mantieni tutto semplice. Parti dallo stile predefinito e sovrascrivi solo quello che ti serve.
• Proteggi i dati personali. Se un blocco viene mostrato a chi ha effettuato l’accesso o ad acquirenti riconosciuti, non includere informazioni personali sensibili. Sei responsabile della privacy dei dati che aggiungi ai blocchi personalizzati.
• Imposta sempre i valori predefiniti. I visitatori anonimi e i profili con dati mancanti dovrebbero comunque vedere un blocco completo.
• Progetta pensando prima ai dispositivi mobili. La maggior parte delle visite a Customer Hub avviene su schermi piccoli, quindi testa prima i layout più stretti.
• Assegna ai blocchi nomi chiari. I nomi interni vengono utilizzati nella reportistica e non possono essere modificati in seguito.

Risoluzione dei problemi

Non riesco a pubblicare il mio blocco

Controlla i campi HTML e CSS per eventuali messaggi di convalida, correggi gli errori e pubblica di nuovo. Se il tuo blocco si basa su JavaScript, tieni presente che il JavaScript inserito nel campo HTML viene rimosso e non viene salvato. Sposta quella funzionalità in un elemento personalizzato sul tuo sito e fai riferimento a quell’elemento nel tuo blocco.

I miei stili non vengono applicati

Il CSS è limitato al blocco, quindi i selettori devono corrispondere agli elementi all’interno del tuo HTML. Controlla che i nomi delle classi non abbiano errori di battitura. Il tuo CSS non può applicare lo stile a nulla al di fuori del blocco.

Personalization mostra testo vuoto o predefinito

I dati del profilo vengono visualizzati solo per chi acquista dopo aver effettuato l'accesso o essere stato identificato. Verifica che il nome della Proprietà del profilo nel tuo tag corrisponda esattamente alla proprietà del profilo, incluse le maiuscole, e aggiungi un valore predefinito.

Il blocco sul mio sito ha un aspetto diverso rispetto all’anteprima

Il CSS del tuo sito può influire sul modo in cui viene visualizzato Customer Hub, soprattutto per i blocchi onsite, che vengono mostrati direttamente nella tua pagina. Controlla il blocco pubblicato sul tuo sito live e modifica il CSS in base alle necessità.

Il mio elemento personalizzato è vuoto o non viene visualizzato

L’elemento viene visualizzato solo nelle pagine in cui il tuo sito ha caricato lo script che lo definisce. Verifica che lo script venga caricato in ogni pagina in cui viene visualizzato il blocco e controlla che il nome del tag nel tuo HTML corrisponda al nome registrato dal tuo sviluppatore. Se invece vedi i contenuti di fallback, l’elemento non è definito in quella pagina.

Ho bisogno di aiuto per scrivere codice

L’assistenza Klaviyo non può scrivere o eseguire il debug di HTML e CSS personalizzati per te. Se ti serve aiuto, collabora con uno sviluppatore o con un partner Klaviyo.