Objectif de cet article
Découvrez les options de conception de votre tiroir Klaviyo Customer Hub et la façon dont vous pouvez l'adapter à votre marque. L'interface de Klaviyo Customer Hub étant ancrée dans l'expérience du client, la meilleure pratique consiste à la styliser pour qu'elle apparaisse comme une extension de votre site web.
Klaviyo Customer Hub fait partie de Klaviyo Service et l'accès à la version bêta se fait progressivement. Si vous n'avez pas encore accès à l'onglet Klaviyo Customer Hub dans la navigation principale de Klaviyo, rejoignez la version bêta de Klaviyo Customer Hub. Notez que vous devez avoir un abonnement payant à Klaviyo Email pour que votre demande soit approuv ée. La participation à cette version bêta n'est actuellement possible qu'en anglais pour ceux qui exploitent une boutique en ligne Shopify.
Ce produit étant encore en version bêta, ses fonctionnalités ne sont pas complètes et seront sujettes à de fréquentes modifications tout au long de la période bêta. En activant Klaviyo Customer Hub par le biais du flux de travail, vous acceptez les termes et conditions de la version bêta. Bien que ces fonctionnalités soient gratuites pendant la période bêta, elles seront vendues séparément lors du lancement de la disponibilité générale.
Pour tout commentaire sur les fonctionnalités du Klaviyo Customer Hub, envoyez un e-mail à customerhub@klaviyo.com.
Avant de commencer
Ce guide explique comment personnaliser le style de votre interface Klaviyo Customer Hub. Avant de procéder, assurez-vous que les fonctionnalités du Klaviyo Customer Hub sont activées.
En savoir plus sur Klaviyo Customer Hub.
Styliser le Hub Client de KlaviyoStyliser le Hub Client de Klaviyo
Le tiroir du Klaviyo Customer Hub comporte plusieurs onglets personnalisables :
- Pour vous
- Commandes
- Profil
- Chat (visible uniquement lorsque le chat en ligne est activé)
Vous disposez de plusieurs options pour personnaliser la conception de chacun de ces onglets, y compris la modification du texte, des couleurs, des polices, etc. Les choix de personnalisation du style se répercutent sur chaque onglet du tiroir du Klaviyo Customer Hub afin de garantir aux visiteurs de votre site une expérience cohérente et conforme à la marque.
Si l'apparence de la plupart des éléments du tiroir de Klaviyo Customer Hub peut être modifiée, leur position ne l'est pas. Seules des options générales de mise en page sont actuellement disponibles.
Lorsque vous modifiez les paramètres de conception de votre Klaviyo Customer Hub sur Klaviyo, utilisez le bouton Voir en direct pour voir les changements apportés à l'interface du hub sur votre site web. Notez que si votre Klaviyo Customer Hub est en ligne, les modifications enregistrées sont publiées sur votre site.
Personnalisez un appel à l'action principal (CTA)Personnalisez un appel à l'action principal (CTA)
Par défaut, lorsqu'un acheteur se connecte à son compte client, Klaviyo affiche "Bienvenue, prénom.nom" comme titre principal dans l'onglet Pour vous du tiroir du Klaviyo Customer Hub. Ce texte n'est pas modifiable.
Pour les acheteurs non authentifiés, cependant, vous pouvez rédiger votre propre appel à l'action (CTA) qui s'affichera au-dessus du bouton "Commencer" avant qu'ils ne se connectent. Cela peut être utile pour inciter les visiteurs non authentifiés à se connecter et à développer l'engagement avec votre interface Klaviyo Customer Hub.
Dans l'exemple ci-dessous, l'appel à l'action (CTA) principal est le suivant : "Gagnez des récompenses, suivez vos commandes et sauvegardez l'historique de vos achats".
Pour mettre à jour l'appel à l'action principal (CTA) pour votre interface Klaviyo Customer Hub :
- Ouvrez l'onglet Klaviyo Customer Hub dans le menu de gauche de Klaviyo.
- Sélectionnez les paramètres dans le coin supérieur droit.
- Sélectionnez les contenus.
- Sous Main appel à l'action (CTA), personnalisez un appel à l'action (CTA) à afficher au-dessus du bouton Démarrer pour les acheteurs non authentifiés.
- Cliquez sur Enregistrer.
Paramètres de conception
Pour des options de conception afin de personnaliser votre interface Klaviyo Customer Hub :
- Accédez à l’onglet Flux dans le menu de gauche de Klaviyo.
- Sélectionnez Paramètres.
- Ouvrez le menu Design.
Vous pouvez ajuster les paramètres de couleur et de style suivants :
-
Polices de caractères
-
Police des titres
Utilisée pour les titres de chaque onglet de Klaviyo Customer Hub. Choisissez Hériter du site pour reproduire automatiquement la police utilisée dans d'autres titres de votre site. -
Couleur de l'en-tête
Utilisée pour le texte de l'en-tête de chaque onglet de Klaviyo Customer Hub. -
Police de paragraphe
Utilisée pour le texte de chaque section, bloc de contenu et bouton. Choisissez Hériter du site pour reproduire automatiquement la police utilisée dans d'autres paragraphes de votre site. -
Paragraph color
Utilisé pour tous les boutons, blocs de contenu et textes de section dans Klaviyo Customer Hub.
-
Police des titres
-
Boutons
-
Couleur des boutons
La couleur d'arrière-plan de tous les boutons dans Klaviyo Customer Hub. -
Couleur du texte des boutons
La couleur du texte sur tous les boutons dans Klaviyo Customer Hub.
-
Couleur des boutons
-
mise en page
-
Style
La forme des bords du bloc de contenu, des boutons et des sections dans Klaviyo Customer Hub. -
Position sur le bureau
Où le tiroir du Klaviyo Customer Hub glisse (à gauche ou à droite de la fenêtre). Si votre marque utilise un tiroir de panier, pensez à utiliser un positionnement aligné à gauche afin qu'il n'empiète pas sur le Hub client de Klaviyo. -
Couleur de fond
La couleur de base de Klaviyo Customer Hub sous le texte, le bloc de contenu et les extensions.
-
Style
Lanceur de moyeu widget
Outre le design de Klaviyo Customer Hub lui-même, vous pouvez également personnaliser un lanceur de hub widget, qui est un petit élément flottant sur votre site Web sur lequel les visiteurs peuvent cliquer pour ouvrir rapidement Klaviyo Customer Hub. Cette fonction est souvent utilisée en conjonction avec la fonctionnalité de chat en ligne de Klaviyo Customer Hub. Un lanceur de hub widget fonctionne de la même manière qu'un formulaire teaser, en suivant les visiteurs tout au long de leur parcours sur votre site web.
Vous pouvez personnaliser le lanceur de hub widget's :
-
Visibilité
- Quels visiteurs du site peuvent voir et cliquer sur le widget ?
-
Forme du widget
- La forme des bords du widget
-
Emplacement de la page
- Emplacement du widget sur la page web
-
Espacement
- Distance par rapport aux coins gauche/droit et supérieur/inférieur, en fonction de l'emplacement du widget
-
Couleur d'arrière-plan du widget
- Couleur de base du widget
CSS personnalisé pour Klaviyo Customer Hub
Si vos besoins branding ne sont pas satisfaits par les options de conception de Klaviyo Customer Hub, vous pouvez appliquer un style avancé avec Custom CSS.
Bien que Klaviyo Customer Hub utilise des réinitialisations CSS pour éviter les collisions avec le CSS de votre site, il se peut que vous deviez ajouter un CSS personnalisé pour traiter les cas particuliers ou appliquer un style unique, tel qu'un tiroir flottant ou des valeurs de rayon de bordure personnalisées.
L'implémentation d'un CSS personnalisé pour votre Hub client Klaviyo implique la modification du code de votre site. Ceci n'est recommandé qu'aux marketeurs techniquement avertis ou à ceux qui ont accès à un développeur. Bien que notre produit prenne en charge les CSS personnalisés, notre équipe d'assistance ne peut pas vous aider à ajouter des CSS personnalisés à Klaviyo Customer Hub au-delà des conseils généraux donnés dans cette documentation. Afin de préserver la sécurité de vos données, l'équipe d'assistance de Klaviyo n'est pas en mesure d'ouvrir vos fichiers HTML.
Appliquer une feuille de style CSS personnalisée
Ajoutez toute feuille de style CSS personnalisée directement dans la section Custom CSS des paramètres de conception de votre Klaviyo Customer Hub, et assurez-vous d'enregistrer vos modifications.
Tous les éléments de base du Klaviyo Customer Hub ont des noms de classe préfixés par kl-hub-
:
- Tous les éléments de texte ont la classe
kl-hub-text
, tandis que les titres ont la classekl-hub-heading
- Les boutons ont la classe
kl-hub-button
et comprennent également leurs variantes (par exemple,kl-hub-button-primaire
,kl-hub-button-secondaire
, etc.) - Le tiroir du Hub client Klaviyo a la classe
kl-hub-drawer
. - Les entrées de texte ont la classe
kl-hub-input
Il ne s'agit pas d'une liste exhaustive ; vous pouvez en trouver d'autres en inspectant le Klaviyo Customer Hub avec le débogueur de votre navigateur. Si un élément a une classe qui commence par kl-hub-
, il peut être utilisé en toute sécurité pour des feuilles de style CSS personnalisées.
Exemple CSS
Si vous voulez que tous les boutons et les titres du Hub Client de Klaviyo soient en majuscules, vous pouvez écrire le CSS personnalisé suivant :
.kl-hub-button, .kl-hub-heading {Ressources supplémentaires
text-transform: uppercase;
}