Cómo añadir widgets de Klaviyo Reviews a tu aplicación móvil con Tapcart

Qué aprenderás

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

• Widget de valoración con estrellas
  Solo páginas de productos; muestra la valoración general con estrellas de un producto
• Widget de reseñas de productos
  Solo 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; 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 tienes una aplicación móvil creada con Tapcart
• Usa un plan de Tapcart Enterprise
• Tener un plan de Klaviyo Reviews activo

Si todavía no has configurado Klaviyo Reviews, consulta nuestro artículo sobre Primeros pasos con Klaviyo Reviews.

Añade widgets de Klaviyo Reviews con 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 independiente) para los 3 widgets.

1. Abre el editor de Tapcart.
2. En App Studio, cambia de Design Blocks a Custom Blocks.
   

3. Haz clic en Iniciar editor de bloques para crear un nuevo bloque personalizado.
4. Ponle al widget un nombre claro, como Klaviyo Star Rating custom block.
5. En la pestaña JS del editor de bloques, añade el siguiente fragmento de código. Sustituye PUBLIC_API_KEY por 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 añadir (p. ej., el widget de valoración con estrellas). Encuentra los fragmentos de código a continuación:
   1. Código del widget de valoraciones por estrellas
   2. Código del widget de reseñas de productos
   3. Código del widget de carrusel de reseñas destacadas
      

2. Pulsa Guardar.
3. Haz clic en Cerrar para salir del editor.
4. En el menú desplegable 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 Previsualizar tu aplicación y ve a la página en la que añadiste tu aplicación. Ten en cuenta que el widget aparece correctamente.

fragmento 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 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 aplicación. Esto se debe a que los widgets requieren un ID de producto real para saber qué reseñas mostrar. Para previsualizar los widgets, añade 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 icono de tres puntos situado junto a uno de tus bloques de 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 de producto que se muestra aquí.
   

5. Sustituye 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, después, copia un ID de artículo.
   

6. Pulsa Guardar.
7. Repite estos pasos para tus otros bloques de widget de reseñas.
8. Si las vistas previas no aparecen correctamente de inmediato, actualiza el editor.

Definir el estilo de los widgets de la aplicación

Cualquier cambio realizado en el editor principal de widgets se aplicará tanto a tu sitio web como a tu aplicación. Para aplicar cambios solo a tu aplicación, añade CSS personalizado en la pestaña CSS del editor de bloques personalizados en Tapcart. Descubre cómo usar CSS personalizado para dar estilo a los widgets de Klaviyo Reviews.

Recursos adicionales