Cómo añadir el widget Klaviyo Reviews a tu aplicación móvil con Tapcart

Objetivos de aprendizaje

Aprende a añadir el widget Klaviyo Reviews a una aplicación móvil creada con Tapcart. Estos widgets pueden añadirse a tu aplicación Tapcart mediante un bloque personalizado: 

• Valoración por estrellas widget
  Sólo páginas de producto; muestra la valoración global por estrellas de un producto
• Reseñas de productos widget
  Sólo páginas de productos; muestran un resumen y una lista de todas las opiniones sobre un producto, además de botones para hacer una pregunta o dejar una opinión 
• Carrusel de opiniones destacadas widget
  Cualquier página; muestra una selección de opiniones destacadas de varios productos 

Tapcart sólo está disponible para tienda, comercio construido con Shopify.

Antes de empezar

Este proceso sólo está disponible para las empresas que

• Ya has creado una aplicación móvil con Tapcart
• Utilizar un plan Tapcart Enterprise
• Tener una con actividad Klaviyo Reviews plan

Si aún no has configurado Klaviyo Reviews, dirígete a nuestro artículo sobre los primeros pasos con Klaviyo Reviews.

Añade el widget Klaviyo Reviews utilizando un bloque personalizado en Tapcart

Sigue estos pasos para añadir cualquier widget de reseñas en Tapcart. Tendrás que repetir estos pasos (es decir, crear un bloque personalizado distinto) para los 3 widget. 

1. Abre el editor Tapcart. 
2. En App Studio, cambia del bloque Diseño al bloque Personalizado.
   
3. Haz clic en Iniciar Editor de bloques para crear un nuevo bloque personalizado. 
4. Nombra el widget con algo claro, como Klaviyo Bloque personalizado de valoración por estrellas. 
5. En la pestaña JS del editor de bloques, añade el siguiente fragmento de código. Sustituye PUBLIC_API_KEY por el ID de tu sitio Klaviyo de 6 caracteres.
   

   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. En la pestaña HTML del editor de bloques, pega el fragmento de código del widget que quieras añadir (por ejemplo, la clasificación por estrellas widget). Encuentra el fragmento de código a continuación: 
1. Código del widget de valoración por estrellas
2. Código del widget de reseñas de productos
3. Código del widget del carrusel de opiniones destacadas
   
7. Haz clic en Guardar. 
8. Pulsa Cerrar para salir del editor. 
9. En el desplegable App Studio, selecciona Detalle del producto.
   
   
   Este paso es necesario para el widget de valoración con estrellas y de reseñas de productos. Puedes colocar el widget de reseña destacada en cualquier página de la aplicación. 
10. Arrastra el bloque personalizado guardado que acabas de crear a tu plantilla. 
11. Puede que el editor no cargue el widget directamente; en su lugar, verás el nombre del bloque como texto sin formato. Esto es lo que se espera. 
12. Haz clic en Previsualizar tu aplicación y ve a la página en la que añadiste tu aplicación. Observa que el widget aparece correctamente.

fragmento de código

Clasificación por estrellas widget

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

Widget de reseñas de productos

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

Carrusel de reseñas destacadas

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

Vista previa del widget de la aplicación

El widget Klaviyo Reviews no aparecerá automáticamente en la vista previa de Tapcart, pero se cargará correctamente en tu aplicación. Esto se debe a que el widget necesita un ID de producto real para saber qué opiniones mostrar. Para previsualizar el widget, añade una variable de ID de producto en el campo Valores de previsualización de variables del editor de Tapcart. 

1. En Tapcart App Studio, selecciona Personalizado para ver tu widget personalizado. 
2. Haz clic en el icono de los tres puntos situado junto a uno de tus bloques de revisión widget y haz clic en Iniciar Editor. 
3. Haz clic en Configuración. 
   
4. Desplázate o busca en el JSON para encontrar la variable id dentro del objeto producto. Ten en cuenta que hay otras variables id dentro de otros objetos; sólo necesitas editar el ID de producto que se muestra aquí. 
   
5. Sustituye el ID del producto de muestra por el ID de un producto de tu tienda, comercio que tenga al menos 1 opinión. Para encontrar el ID de un producto, ve a Contenido > Productos en Klaviyo, y luego copia el ID de un artículo. 
   
6. Haz clic en Guardar. 
7. Repite estos pasos para tu otro bloque de revisión widget. 
8. Si las previsualizaciones no aparecen correctamente de inmediato, actualiza el editor. 

Widget de la app Estilo 

Cualquier cambio realizado en el editor principal de widget se aplicará tanto a tu sitio web como a tu aplicación. Para aplicar los cambios sólo a tu aplicación, añade CSS personalizado a la pestaña CSS del editor de bloques personalizado en Tapcart. Aprende a utilizar CSS personalizado para dar estilo al widget Klaviyo Reviews. 

Recursos adicionales

• Cómo solicitar reseñas a tus clientes con Klaviyo Reseñas flujo
• Cómo moderar Klaviyo Opiniones
• Klaviyo Revisa los datos de referencia