Introducción
¿Quieres ofrecer a tus clientes la experiencia completa de Loyoly directamente desde tu aplicación móvil Tapcart? Esta guía te explica todo: qué es Tapcart, para qué sirve y cómo integrar tu programa de fidelidad Loyoly en tu app móvil en pocos minutos.
¿Qué es Tapcart?
Tapcart es una aplicación de Shopify que permite a los comerciantes transformar su tienda en línea en una aplicación móvil nativa (iOS y Android), sin necesidad de programar. Es una de las herramientas más utilizadas por las marcas DTC que quieren ofrecer una experiencia móvil premium a sus clientes fieles.
En concreto, Tapcart te permite:
Crear una app móvil conectada en tiempo real a tu catálogo de Shopify (productos, precios, stock, pedidos).
Enviar notificaciones push segmentadas para impulsar las ventas y la reactivación.
Personalizar por completo el diseño de la app (página de inicio, fichas de producto, carrito, navegación).
Integrar herramientas externas (programas de fidelidad, reseñas, suscripciones, etc.) mediante bloques personalizados.
¿Por qué integrar Loyoly con Tapcart?
Tus clientes más fieles suelen ser los que usan tu aplicación móvil. Integrar Loyoly con Tapcart les permite:
Consultar su saldo de puntos y su nivel VIP directamente en la app.
Realizar misiones y desbloquear recompensas sin salir de la app.
Aplicar sus códigos de descuento Loyoly directamente en el carrito móvil.
💡 La integración se basa en dos pasos: (1) conectar Tapcart con Loyoly mediante el App ID y la API Key para sincronizar tus ajustes de fidelidad y, después, (2) añadir el custom block de Loyoly a una pantalla personalizada (custom screen). No se requiere ningún desarrollo.
Requisitos previos a la instalación
Tener Tapcart instalado y activo en tu tienda Shopify (Tapcart es un servicio de pago).
Tener Loyoly instalado en tu tienda Shopify con tu programa de fidelidad configurado.
Disponer de la URL embedded de tu programa Loyoly. Si no la conoces, tu CSM Loyoly puede facilitártela.
Paso 1 — Conectar Tapcart con Loyoly (App ID + API Key)
Este paso permite enviar tus ajustes de fidelidad de Loyoly a Tapcart.
En tu administración de Shopify, abre Canales de venta → Tapcart (Mobile App).
Ve a Settings → App settings.
Copia tu App ID y luego dirígete a tu back office de Tapcart para obtener la API Key.
Introduce ambos identificadores en Loyoly (en los ajustes de integración de Tapcart). Esto sincroniza tus ajustes de fidelidad con la app Tapcart.
Paso 2 — Añadir el custom block de Loyoly
Abre de nuevo Tapcart, luego ve a Home → Custom screens y haz clic en + New screen para crear una pantalla personalizada (por ejemplo, "Programa de fidelidad" o "Mis puntos").
Abre la pestaña My Blocks: encontrarás bloques listos para arrastrar a una página, que muestran la experiencia de fidelidad en la app. Solo tienes que hacer clic en un bloque y arrastrarlo a la página, como se muestra en la demo de abajo.
⚠️ ¿La sincronización entre Loyoly y Tapcart no funciona? Puedes añadir el bloque manualmente siguiendo los pasos de abajo.
Abre Tapcart, luego ve a Home → Custom screens y haz clic en + New screen para crear una pantalla personalizada (por ejemplo, "Programa de fidelidad" o "Mis puntos").
Abre la pestaña My Blocks y haz clic en Create custom block.
En el custom block, selecciona la pestaña Dev de la derecha: ahí es donde pegarás el código.
Copia el código de abajo, pégalo en el editor de la pestaña Dev y luego reemplaza la URL por defecto por la URL embedded de tu tienda.
Guarda el block, añádelo a tu custom screen y luego publica la nueva versión de tu app Tapcart.
Código para copiar y pegar:
import * as React from "react"
const { useEffect, useState } = React;
export default function Loyoly({ useVariables, useActions }) {
const variables = useVariables();
const customerId = variables?.customer?.id;
const url = customerId
? `https://play.loyoly.io/play/TU-TIENDA/program/shopify/embedded?customer_id=${customerId}`
: `https://play.loyoly.io/play/TU-TIENDA/program/shopify/embedded`;
return (
<div>
<iframe src={url} height={800} width={"100%"} />
</div>
)
}
⚠️ Personaliza antes de guardar: reemplaza TU-TIENDA en la URL por la URL embedded de tu propia tienda. Si no sabes dónde encontrarla, tu CSM Loyoly puede comunicártela.
Si tienes algún problema durante la instalación, o si el programa Loyoly no se muestra correctamente en tu app Tapcart, contacta con nuestro equipo de soporte a través del chat.