Cómo instalar Loyoly en tu aplicación móvil Tapcart
¿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 buscan 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 de clientes.
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 realiza mediante un custom block de Tapcart que se añade a una pantalla personalizada (custom screen). No se necesita ningún desarrollo: basta con copiar y pegar el código que aparece más abajo.
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 y tu programa de fidelidad configurado.
Disponer de la URL embedded de tu programa Loyoly. Si no la conoces, tu CSM Loyoly puede facilitártela.
Pasos de instalación
Abre tu administración de Shopify y, en la barra lateral izquierda, haz clic en Canales de venta y luego selecciona Tapcart en la lista.
Dentro de Tapcart, ve a Home → Custom screens y haz clic en + New screen para crear una nueva pantalla personalizada (por ejemplo, "Programa de fidelidad" o "Mis puntos").
Una vez creada la pantalla, 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 más abajo, pégalo en el editor de la pestaña Dev y, a continuación, reemplaza la URL por defecto por la URL embedded de tu tienda.
Guarda el block, añádelo a tu custom screen y publica la nueva versión de tu app Tapcart.
Demostración en vídeo
Aquí tienes el procedimiento completo en imágenes:
Código a pegar en el custom block
Copia y pega el siguiente código en el editor de la pestaña Dev de tu custom block:
import * as React from "react"
const { useEffect, useState } = React;
export default function Loyoly({ useVariables, useActions }) {
const variables = useVariables();
const customerId = variables?.customer?.id;
const [status, setStatus] = useState("idle");
const url = customerId
? `https://staging-play.loyoly.io/play/toto/69/program/shopify/embedded?customer_id=${customerId}`
: `https://staging-play.loyoly.io/play/toto/69/program/shopify/embedded`;
const { applyDiscount } = useActions();
useEffect(() => {
setStatus("useEffect fired");
try {
const result = applyDiscount({ discountCode: "LBLGJFVETTXL" });
setStatus("applyDiscount called: " + JSON.stringify(result));
} catch (e) {
setStatus("error: " + e.message);
}
}, []);
return (
<div>
{/* Debug banner — remove once working */}
<div style={{ background: "yellow", padding: "8px", fontSize: "12px" }}>
customerId: {customerId || "undefined"} | status: {status}
</div>
<iframe src={url} height={800} width={"100%"} />
</div>
)
}
⚠️ Personaliza antes de guardar: reemplaza la URL https://staging-play.loyoly.io/play/toto/69/program/shopify/embedded 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.