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 repose sur deux étapes : (1) connecter Tapcart à Loyoly via l'App ID et l'API Key pour synchroniser vos paramètres de fidélité, puis (2) ajouter le custom block Loyoly sur un écran personnalisé (custom screen). Aucun développement n'est requis.
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.
Étape 1 — Connecter Tapcart à Loyoly (App ID + API Key)
Cette étape permet de pousser vos paramètres de fidélité de Loyoly vers Tapcart.
Dans votre interface Shopify admin, ouvrez Canaux de vente → Tapcart (Mobile App).
Allez dans Settings → App settings.
Récupérez votre App ID et ensuite rendez-vous sur votre back office tapcart pour récupérer l'API Key.
Renseignez ces deux identifiants côté Loyoly (dans les paramètres d'intégration Tapcart). Cela synchronise vos paramètres de fidélité vers l'app Tapcart.
Étape 2 — Ajouter le custom block Loyoly
Ouvrez à nouveau Tapcart, puis allez dans Home → Custom screens et cliquez sur + New screen pour créer un écran personnalisé (par exemple « Programme de fidélité » ou « Mes points »).
Ouvrez l'onglet My Blocks vous trouverez des blocs prêts à être déposé dans une page, qui affiche l'expérience de fidélité dans l'app. Il vous suffit de cliquer dessus et le glisser vers la page comme affiché dans la demo ci-dessous.
⚠️ La synchronisation entre Loyoly et Tapcart ne fonctionne pas ? Vous pouvez ajouter le bloc manuellement en suivant les étapes ci-dessous.
Ouvrez Tapcart, puis allez dans Home → Custom screens et cliquez sur + New screen pour créer un écran personnalisé (par exemple « Programme de fidélité » ou « Mes points »).
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.
Code à copier coller :
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/VOTRE-BOUTIQUE/program/shopify/embedded?customer_id=${customerId}`
: `https://play.loyoly.io/play/VOTRE-BOUTIQUE/program/shopify/embedded`;
return (
<div>
<iframe src={url} height={800} width={"100%"} />
</div>
)
}
⚠️ À personnaliser avant de sauvegarder : remplacez VOTRE-BOUTIQUE dans l'URL 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.