Introduction
Vous souhaitez offrir à vos clients l'expérience complète Loyoly directement depuis votre application mobile Tapcart ? Ce guide vous explique tout : ce qu'est Tapcart, à quoi il sert, et comment intégrer votre programme de fidélité Loyoly à votre app mobile en quelques minutes.
Qu'est-ce que Tapcart ?
Tapcart est une application Shopify qui permet aux marchands de transformer leur boutique en ligne en une application mobile native (iOS et Android), sans avoir besoin de coder. C'est l'un des outils les plus utilisés par les marques DTC qui souhaitent proposer une expérience mobile premium à leurs clients fidèles.
Concrètement, Tapcart vous permet de :
Créer une app mobile connectée en temps réel à votre catalogue Shopify (produits, prix, stock, commandes).
Envoyer des notifications push ciblées pour booster les ventes et le réengagement.
Personnaliser entièrement le design de l'app (homepage, écrans produits, panier, navigation).
Intégrer des outils tiers (programmes de fidélité, avis, abonnements, etc.) via des blocs personnalisés.
Pourquoi intégrer Loyoly à Tapcart ?
Vos clients les plus fidèles sont souvent ceux qui utilisent votre application mobile. Intégrer Loyoly à Tapcart leur permet de :
Consulter leur solde de points et leur niveau VIP directement dans l'app.
Réaliser des missions et débloquer des récompenses sans quitter l'app.
Appliquer leurs codes de réduction Loyoly directement au panier mobile.
💡 L'intégration se fait via un custom block Tapcart que vous ajoutez sur un écran personnalisé (custom screen). Aucun développement n'est requis : il suffit de copier-coller le code fourni ci-dessous.
Prérequis avant l'installation
Avoir Tapcart installé et actif sur votre boutique Shopify (Tapcart est un service payant).
Avoir Loyoly installé sur votre boutique Shopify et votre programme de fidélité configuré.
Disposer de l'URL embedded de votre programme Loyoly. Si vous ne la connaissez pas, votre CSM Loyoly peut vous la communiquer.
Étapes d'installation
Ouvrez votre interface Shopify admin et, dans la barre latérale de gauche, cliquez sur Canaux de vente, puis sélectionnez Tapcart dans la liste.
Dans Tapcart, allez dans Home → Custom screens, puis cliquez sur + New screen pour créer un nouvel écran personnalisé (par exemple "Programme de fidélité" ou "Mes points").
Une fois l'écran créé, ouvrez l'onglet My Blocks et cliquez sur Create custom block.
Dans le custom block, sélectionnez l'onglet Dev à droite : c'est ici que vous allez coller le code.
Copiez le code fourni plus bas, collez-le dans l'éditeur de l'onglet Dev, puis remplacez l'URL par défaut par l'URL embedded de votre boutique.
Sauvegardez le block, ajoutez-le à votre custom screen, puis publiez la nouvelle version de votre app Tapcart.
Démonstration en vidéo
Voici la procédure complète :
Code à coller dans le custom block
Copiez-collez le code suivant dans l'éditeur de l'onglet Dev de votre 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>
)
}
⚠️ À personnaliser avant de sauvegarder : remplacez l'URL https://staging-play.loyoly.io/play/toto/69/program/shopify/embedded par l'URL embedded de votre propre boutique. Si vous ne savez pas où la trouver, votre CSM Loyoly peut vous la communiquer.
Si vous rencontrez un problème lors de l'installation ou que le programme Loyoly ne s'affiche pas correctement dans votre app Tapcart, contactez notre équipe support via le chat.