Centre d’aide
/
Customer Hub
/
Customer Hub
/
Configurer et utiliser le Customer Hub
Objectif de cet article

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.

Avant de commencer

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.

Options de conception du Customer Hub

Options de conception du Customer Hub

Le tiroir du Klaviyo Customer Hub comporte plusieurs onglets personnalisables :

  • Pour vous
  • Commandes
  • Profil
  • Chat (visible uniquement lorsque le chat en ligne est activé)

Le tiroir de Klaviyo Customer Hub est ouvert sur le site web d'une marque et montre que l'acheteur est connecté à son compte client.

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 pour chaque onglet

Personnalisez un appel à l’action principal pour chaque onglet

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 "S'identifier" 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".

L'onglet Pour vous dans Klaviyo Customer Hub montre l'appel à l'action (CTA) principal pour un acheteur qui ne s'est pas connecté à un compte.

Pour mettre à jour l'appel à l'action principal (CTA) pour votre interface Klaviyo Customer Hub :

  1. Ouvrez l'onglet Klaviyo Customer Hub dans le menu de gauche de Klaviyo.
  2. Cliquez sur Paramètres.
  3. Sélectionnez l’onglet Contenu.
  4. Dans les messages de bienvenue, personnalisez un appel à l'action (CTA) à afficher au-dessus du bouton "sign in" pour les acheteurs non authentifiés. Vous pouvez le faire pour chaque onglet du tiroir de Klaviyo Customer Hub :
    • Pour vous
    • Commandes
    • profil
      Le menu des messages de bienvenue dans les paramètres de contenu de Klaviyo Customer Hub.
  5. Cliquez sur Enregistrer
Concevoir votre Customer Hub

Concevoir votre Customer Hub

Pour des options de conception afin de personnaliser votre interface Klaviyo Customer Hub :

  1. Accédez à l’onglet Flux dans le menu de gauche de Klaviyo.
  2. Sélectionnez Design.
  3. Ouvrez le menu Style
    CHdesign10.jpg
  4. Dans le menu Style, vous pouvez ajuster les paramètres de couleur et de style suivants et prévisualiser leur aspect dans le canevas de l’interface du Customer Hub :
    • 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.

        Notez que vous pouvez également ajouter une police personnalisée en sélectionnant Configurer la police personnalisée, puis en saisissant son nom et sa taille. Cette police personnalisée doit déjà exister dans la section Polices de votre compte. 

      • 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.
    • 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. 
      • Texte du bouton Case
        Les options de capitalisation pour le texte de tous les boutons dans Klaviyo Customer Hub.
    • Style
      • Forme
        Forme des bords des blocs de contenu, des boutons et des sections dans le Customer Hub.
      • Couleur de fond
        La couleur de base de Klaviyo Customer Hub sous le texte, le bloc de contenu et les extensions.
    • mise en page
      • 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.
    • CSS personnalisé
      Vous pouvez éventuellement appliquer un style avancé avec les feuilles de style CSS personnalisées. Consultez la section CSS personnalisé ci-dessous pour plus de détails.
  5. Cliquez sur Publier pour activer vos modifications.
Personnaliser le widget du Customer Hub

Personnaliser le widget du Customer Hub

Outre la conception du Customer Hub lui-même, vous pouvez également personnaliser le widget du hub, qui est un petit élément flottant sur votre site web sur lequel les visiteurs peuvent cliquer pour ouvrir rapidement l'interface du Customer Hub. Le widget de hub fonctionne un peu comme un teaser de formulaire, en suivant les visiteurs tout au long de leur parcours sur votre site web. 

Pour personnaliser le widget de hub :

  1. Sélectionnez Customer Hub dans le menu de gauche de Klaviyo.
  2. Sélectionnez Design.
  3. Ouvrez le menu du Widget .
    CHdesign11.jpg
  4. Vous pouvez personnaliser le lanceur de hub widget's :
    • Visibilité
      Quel site les visiteurs peuvent voir et cliquer sur le widget
    • Paramètre d’ouverture
      Quelle page s’ouvre dans le Customer Hub ? 
    • Forme
      Forme des arêtes du widget
    • Couleur
      La couleur du widget
    • Position
      Emplacement du widget sur une page web
    • Espacement
      Distance par rapport au coin gauche/droit et au coin supérieur/inférieur, en fonction de l’emplacement du widget
  5. Cliquez sur Publier pour voir vos modifications en ligne.
CSS personnalisé pour Klaviyo Customer Hub

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 

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.

La section Custom CSS en bas du menu des paramètres de conception du Klaviyo Customer Hub dans Klaviyo.

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 classe kl-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
  • Tous les blocs de contenu ont la classe kl-hub-content-bloc et incluent également le nom interne du bloc (par exemple, kl-hub-content-bloc-reward-program pour un bloc de contenu nommé "Reward program").

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

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 {

    text-transform: uppercase;
}
Ressources supplémentaires

Ressources supplémentaires

Cet article vous a-t-il été utile ?
Utilisez ce formulaire uniquement pour nous faire part de vos commentaires sur cet article. Comment contacter l’assistance.

Explorer d’autres contenus Klaviyo

Communauté
Contactez des membres de votre secteur, des partenaires et des experts Klaviyo pour trouver de l’inspiration, partager des informations et obtenir des réponses à toutes vos questions.
Formation en direct
Participez à une session en direct avec des experts Klaviyo pour découvrir les bonnes pratiques, apprendre à configurer des fonctionnalités clés et bien plus encore.
Assistance

Accédez à l’assistance par l’intermédiaire de votre compte.

Assistance par e-mail (essai gratuit et comptes payants) Disponible 24 h/24, 7 j/7

Assistance par chat/virtuelle
La disponibilité varie selon la localisation et le type d’abonnement.