Cómo agregar widgets de Klaviyo Reviews a tu app móvil con Tapcart

Objetivos del artículo

Descubre cómo añadir widgets de Klaviyo Reviews a una app móvil creada con Tapcart. Estos widgets se pueden añadir a tu app de Tapcart mediante bloques personalizados:

• Widget de calificación con estrellas
  Solo páginas de producto; muestra la calificación general del producto con estrellas
• Widget de reseñas de productos
  Solo páginas de producto; 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; muestra una selección de reseñas destacadas de varios productos

Tapcart solo está disponible para tiendas creadas con Shopify.

Antes de empezar

Este proceso solo está disponible para empresas que:

• Ya creaste una app móvil con Tapcart
• Usa un plan Tapcart Enterprise
• Tener un plan de Klaviyo Reviews con actividad

Si aún no configuraste Klaviyo Reviews, consulta nuestro artículo sobre primeros pasos con Klaviyo Reviews.

Agrega widgets de Klaviyo Reviews con un bloque personalizado en Tapcart

Sigue estos pasos para agregar cualquier widget de reseñas en Tapcart. Deberás repetir estos pasos (es decir, crear un bloque personalizado independiente) para los 3 widget.

1. Abre el editor de Tapcart.
2. En App Studio, cambia de Bloques de diseño a Bloques personalizados.
   

3. Haz clic en Abrir el editor de bloques para crear un nuevo bloque personalizado.
4. Asigna al widget un nombre claro, como bloque personalizado de calificación con estrellas de Klaviyo.
5. En la pestaña JS del editor de bloques, agrega el siguiente fragmento de código. Reemplaza PUBLIC_API_KEY con tu ID de sitio de 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);

1. En la pestaña HTML del editor de bloques, pega el fragmento del widget que quieras agregar (p. ej., el widget de calificación con estrellas). Encuentra los fragmentos de código a continuación:
   1. Código del widget de calificación con estrellas
   2. Código del widget de reseñas de productos
   3. Código del widget de carrusel de reseñas destacadas
      

2. Haz clic en Guardar.
3. Haz clic en Cerrar para salir del editor.
4. En el menú desplegable de App Studio, selecciona Detalles del producto.
   
   

1. Arrastra el bloque personalizado guardado que acabas de crear a tu plantilla.
2. Es posible que el editor no cargue el widget directamente; en su lugar, verás el nombre del bloque como texto sin formato. Esto es lo esperado.
3. Haz clic en Vista previa de la app y navega a la página donde agregaste tu app. Ten en cuenta que el widget aparece correctamente.

fragmento de código

Widget de calificación con 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 widgets de la aplicación

Los widgets de Klaviyo Reviews no aparecerán automáticamente en la vista previa de Tapcart, pero se cargarán correctamente en tu app. Esto se debe a que los widgets requieren un ID de producto real para saber qué reseñas mostrar. Para obtener una vista previa de los widgets, agrega una variable de ID de producto en el campo Valores de vista previa de variables en el editor de Tapcart.

1. En App Studio de Tapcart, selecciona Personalizado para ver tus widgets personalizados.
2. Haz clic en el ícono de tres puntos junto a uno de los bloques del widget de reseñas 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 product. Ten en cuenta que hay otras variables id dentro de otros objetos; solo necesitas editar el ID del producto que se muestra aquí.
   

5. Reemplaza el ID de producto de ejemplo por el ID de un producto de tu tienda que tenga al menos 1 reseña. Para encontrar un ID de 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 los otros bloques de widget de reseñas.
8. Si las vistas previas no aparecen correctamente de inmediato, actualiza el editor.

Dale estilo a los widget de la app

Cualquier cambio que se haga en el editor principal de widget se aplicará tanto al sitio web como a la app. Para aplicar cambios solo a tu aplicación, agrega CSS personalizado a la pestaña CSS del editor de bloques personalizados en Tapcart. Aprende a usar CSS personalizado para darle estilo a los widget de Klaviyo Reviews.

Recursos adicionales