Cómo añadir widgets de Reseñas de Klaviyo a su aplicación móvil usando Tapcart

Qué aprenderás

Aprenda a añadir widgets de Reseñas de Klaviyo a una aplicación móvil creada con Tapcart. Estos widgets pueden añadirse a su aplicación Tapcart mediante bloques personalizados: 

• Widget de valoración por estrellas
  Sólo páginas de productos; muestra la valoración global por estrellas de un producto
• Widget de reseñas de productos
  Sólo páginas de productos; muestra un resumen y una lista de todas las reseñas de un producto, además de botones para hacer una pregunta o dejar una reseña 
• Widget de carrusel de reseñas destacadas
  Cualquier página; muestre una selección de reseñas destacadas de varios productos 

Tapcart sólo está disponible para tiendas construidas con Shopify.

Antes de empezar

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

• Ya ha creado una aplicación móvil con Tapcart
• Utilice un plan Tapcart Enterprise
• Tener un plan de revisiones de Klaviyo activo

Si aún no ha configurado Klaviyo Reviews, diríjase a nuestro artículo sobre cómo empezar con Klaviyo Reviews.

Añadir Klaviyo Reviews widgets utilizando un bloque personalizado en Tapcart

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

1. Abra el editor Tapcart. 
2. En App Studio, cambie de Bloques de diseño a Bloques personalizados.
   
3. Haga clic en Iniciar editor de bloques para crear un nuevo bloque personalizado. 
4. Nombre el widget con algo claro, como bloque personalizado Klaviyo Star Rating. 
5. En la pestaña JS del editor de bloques, añada el siguiente fragmento de código. Sustituya PUBLIC_API_KEY por el ID de su 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, pegue el fragmento correspondiente al widget que desea añadir (por ejemplo, el widget de valoración de estrellas). A continuación encontrará los fragmentos de código: 
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. Pulse Guardar. 
8. Pulse Cerrar para salir del editor. 
9. En el menú desplegable de App Studio, seleccione Detalle del producto.
   
   
   Este paso es necesario para los widgets de valoración con estrellas y reseñas de productos. Puede colocar el widget de reseña destacada en cualquier página de la aplicación. 
10. Arrastre el bloque personalizado guardado que acaba de crear a su plantilla. 
11. Es posible que el editor no cargue el widget directamente; en su lugar, verá el nombre del bloque como texto sin formato. Esto es lo esperado. 
12. Haga clic en Vista previa de su aplicación y navegue hasta la página en la que añadió su aplicación. Observe que el widget aparece correctamente.

Fragmentos de código

Widget de valoración por estrellas

<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 de los widgets de la aplicación

Los widgets Klaviyo Reviews no aparecerán automáticamente en la vista previa de Tapcart, pero se cargarán correctamente en su aplicación. Esto se debe a que los widgets necesitan un ID de producto real para saber qué reseñas mostrar. Para previsualizar los widgets, añada una variable de ID de producto en el campo Valores de previsualización de variables del editor de Tapcart. 

1. En el Tapcart App Studio, seleccione Personalizado para ver sus widgets personalizados. 
2. Haga clic en el icono de los tres puntos situado junto a uno de sus bloques de widgets de revisión y haga clic en Iniciar editor. 
3. Haga clic en Configuración. 
   
4. Desplácese o busque en el JSON para encontrar la variable id dentro del objeto producto. Tenga en cuenta que hay otras variables id dentro de otros objetos; sólo necesita editar el ID de producto que se muestra aquí. 
   
5. Sustituya el ID del producto de muestra por el ID de un producto de su tienda que tenga al menos 1 reseña. Para encontrar el ID de un producto, vaya a Contenido > Productos en Klaviyo, y copie el ID de un artículo. 
   
6. Pulse Guardar. 
7. Repita estos pasos para sus otros bloques del widget de revisión. 
8. Si las previsualizaciones no aparecen correctamente de inmediato, actualice el editor. 

Widgets de la aplicación Style 

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

Recursos adicionales

• Cómo solicitar reseñas a sus clientes con los flujos de reseñas de Klaviyo
• Cómo moderar las críticas de Klaviyo
• Klaviyo revisa los datos de referencia