Comment ajouter des widgets Klaviyo Reviews à votre application mobile avec Tapcart

Objectif de cet article

Découvrez comment ajouter des widgets Klaviyo Reviews à une application mobile créée avec Tapcart. Ces widgets peuvent être ajoutés à votre application Tapcart à l’aide de blocs personnalisés :

• Widget d’évaluation par étoiles
  Pages produit uniquement ; afficher l’évaluation globale en étoiles d’un produit
• Widget d’avis produits
  Pages produits uniquement ; affichez un résumé et la liste de tous les avis pour un produit, ainsi que des boutons pour poser une question ou laisser un avis
• Widget de carrousel d’avis mis en avant
  Toutes les pages ; afficher une sélection d’avis mis en avant sur plusieurs produits

Tapcart est uniquement disponible pour les boutiques créées avec Shopify.

Avant de commencer

Ce processus est uniquement disponible pour les entreprises qui :

• Vous avez déjà créé une application mobile avec Tapcart
• Utilisez un abonnement Tapcart Enterprise
• Disposer d’un forfait Klaviyo Reviews actif

Si vous n’avez pas encore configuré Klaviyo Reviews, consultez notre article Démarrer avec Klaviyo Reviews.

Ajouter des widgets Klaviyo Reviews à l’aide d’un bloc personnalisé dans Tapcart

Suivez ces étapes pour ajouter n’importe quel widget d’avis dans Tapcart. Vous devrez répéter ces étapes (c’est-à-dire créer un bloc personnalisé distinct) pour les 3 widgets.

1. Ouvrez l’éditeur Tapcart.
2. Dans App Studio, passez de Design Blocks à Custom Blocks.
   

3. Cliquez sur Lancer l’éditeur de blocs pour créer un nouveau bloc personnalisé.
4. Nommez le widget d’un nom clair, comme Klaviyo Star Rating custom block.
5. Dans l’onglet JS de l’éditeur de blocs, ajoutez l’extrait de code suivant. Remplacez PUBLIC_API_KEY par votre ID de site Klaviyo à 6 caractères.
   

var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = 'https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js&module=reviews';
document.head.appendChild(script);

1. Dans l’onglet HTML de l’éditeur de blocs, collez l’extrait de code du widget que vous souhaitez ajouter (par exemple, le widget d’évaluation par étoiles). Trouvez les extraits de code ci-dessous :
   1. Code du widget de classement par étoiles
   2. Code du widget d’évaluation des produits
   3. Code du widget « Carrousel d’avis mis en avant »
      

2. Cliquez sur Enregistrer.
3. Cliquez sur Fermer pour quitter l’éditeur.
4. Dans le menu déroulant App Studio, sélectionnez Détails du produit.
   
   

1. Faites glisser le bloc personnalisé enregistré que vous venez de créer dans votre modèle.
2. Il se peut que l’éditeur ne charge pas le widget directement ; à la place, vous verrez le nom du bloc sous forme de texte brut. C’est normal.
3. Cliquez sur Aperçu de votre application et accédez à la page où vous avez ajouté votre application. Notez que le widget s’affiche correctement.

extrait de code

Widget de classement par étoiles

<div class="klaviyo-star-rating-widget" data-id="{{product.id}}" data-product-title="{{product.title}}" data-product-type="{{product.type}}"></div>

Widget d’évaluation des produits

<div id="klaviyo-reviews-all" data-id="{{product.id}}"></div>

Carrousel d’avis mis en avant

<div id="klaviyo-featured-reviews-carousel"></div>

Aperçu des widgets de l’application

Les widgets Klaviyo Reviews n’apparaîtront pas automatiquement dans l’aperçu Tapcart, mais se chargeront correctement sur votre application. Cela s’explique par le fait que les widgets nécessitent un ID de produit réel afin de savoir quels avis afficher. Pour prévisualiser les widgets, ajoutez une variable d’ID de produit dans le champ Variable Preview Values dans l’éditeur Tapcart.

1. Dans l’ App Studio Tapcart, sélectionnez Personnalisé pour afficher vos widgets personnalisés.
2. Cliquez sur l’icône à trois points à côté de l’un de vos blocs de widget d’avis, puis cliquez sur Lancer l’éditeur.
3. Cliquez sur Paramètres.

4. Faites défiler le JSON ou effectuez une recherche pour trouver la variable id dans l’objet product. Notez qu’il existe d’autres variables id dans d’autres objets ; vous n’avez besoin de modifier que l’ID de produit indiqué ici.
   

5. Remplacez l’ID de produit d’exemple par l’ID d’un produit dans votre boutique qui a au moins 1 avis. Pour trouver un ID de produit, accédez à Contenu > Produits dans Klaviyo, puis copiez un ID d’article.
   

6. Cliquez sur Enregistrer.
7. Répétez ces étapes pour vos autres blocs de widget d’avis.
8. Si les aperçus ne s’affichent pas correctement tout de suite, actualisez l’éditeur.

Personnaliser les widgets de l’application

Toutes les modifications apportées dans l’éditeur principal de widget s’appliqueront à votre site web et à votre application. Pour appliquer des modifications uniquement à votre application, ajoutez du CSS personnalisé dans l’onglet CSS de l’éditeur de blocs personnalisés dans Tapcart. Découvrez comment utiliser du CSS personnalisé pour personnaliser le style des widgets Klaviyo Reviews.