Comment ajouter des widgets Klaviyo Reviews à votre application mobile en utilisant Tapcart ?

Vous apprendrez

Apprenez à ajouter des widgets Klaviyo Reviews à une application mobile construite avec Tapcart. Ces widgets peuvent être ajoutés à votre application Tapcart en utilisant des blocs personnalisés : 

• Widget d'évaluation par étoiles
  Pages de produits uniquement ; affichez le classement général par étoiles d'un produit.
• Widget des avis sur les produits
  Pages de produits uniquement ; affichez un résumé et une liste de tous les avis sur un produit, ainsi que des boutons permettant de poser une question ou de laisser un avis. 
• Widget carrousel d'avis en vedette
  Sur n'importe quelle page, affichez une sélection d'avis sur plusieurs produits. 

Tapcart n'est disponible que pour les boutiques construites avec Shopify.

Avant de commencer

Ce processus n'est accessible qu'aux entreprises qui

• Vous avez déjà créé une application mobile avec Tapcart
• Utilisez un plan Tapcart Enterprise
• Disposer d'un plan d'examen actif de Klaviyo

Si vous n'avez pas encore configuré Klaviyo Reviews, consultez notre article sur le démarrage de Klaviyo Reviews.

Ajoutez des widgets Klaviyo Reviews en utilisant un bloc personnalisé dans Tapcart

Suivez les étapes suivantes pour ajouter un widget de commentaires dans Tapcart. Vous devrez répéter ces étapes (c'est-à-dire créer un bloc personnalisé distinct) pour les trois 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. Donnez au widget 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 identifiant 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) ;

6. Dans l'onglet HTML de l'éditeur de blocs, collez l'extrait du widget que vous souhaitez ajouter (par exemple, le widget d'évaluation des étoiles). Vous trouverez les extraits de code ci-dessous : 
1. Code du widget de classement par étoiles
2. Code du widget des avis sur les produits
3. Code du widget du carrousel d'avis en vedette
   
7. Cliquez sur Enregistrer. 
8. Cliquez sur Fermer pour quitter l'éditeur. 
9. Dans la liste déroulante App Studio, sélectionnez Product detail.
   
   
   Cette étape est nécessaire pour les widgets d'évaluation par étoiles et d'avis sur les produits. Vous pouvez placer le widget d'avis sur n'importe quelle page de l'application. 
10. Faites glisser le bloc personnalisé enregistré que vous venez de créer dans votre modèle. 
11. Il se peut que l'éditeur ne charge pas directement le widget ; à la place, vous verrez le nom du bloc sous forme de texte brut. C'est ce que l'on attend. 
12. Cliquez sur Prévisualiser votre application et accédez à la page où vous avez ajouté votre application. Notez que le widget apparaît correctement.

Extraits 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 en vedette

<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. En effet, les widgets ont besoin d'un véritable numéro d'identification du produit pour savoir quels avis afficher. Pour prévisualiser les widgets, ajoutez une variable ID produit dans le champ Valeurs de prévisualisation de la variable dans l'éditeur Tapcart. 

1. Dans Tapcart App Studio, sélectionnez Custom pour voir vos widgets personnalisés. 
2. Cliquez sur l'icône représentant trois points à côté de l'un de vos blocs de widgets d'évaluation et cliquez sur Lancer l'éditeur. 
3. Cliquez sur Paramètres. 
   
4. Faites défiler ou cherchez dans le JSON pour trouver la variable id dans l'objet produit. Notez qu'il existe d'autres variables id dans d'autres objets ; vous n'avez besoin de modifier que l'ID du produit montré ici. 
   
5. Remplacez l'ID de l'échantillon par l'ID d'un produit de votre point de vente qui a fait l'objet d'au moins un commentaire. Pour trouver l'identifiant d'un produit, naviguez vers Contenu > Produits dans Klaviyo, puis copiez l'identifiant d'un article. 
   
6. Cliquez sur Enregistrer. 
7. Répétez ces étapes pour les autres blocs du widget d'évaluation. 
8. Si les aperçus ne s'affichent pas correctement tout de suite, actualisez l'éditeur. 

Widgets d'application de style 

Toutes les modifications apportées dans l'éditeur de widgets principal s'appliqueront à la fois à votre site web et à votre application. Pour appliquer les changements à votre application, ajoutez un CSS personnalisé dans l'onglet CSS de l'éditeur de blocs personnalisés de Tapcart. Apprenez à utiliser des CSS personnalisés pour styliser les widgets de Klaviyo Reviews. 

Ressources complémentaires

• Comment demander des avis à vos clients avec les flux d'avis de Klaviyo ?
• Comment modérer les commentaires sur Klaviyo
• Klaviyo passe en revue les données de référence