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.
Les blocs natifs Loyoly dans votre app :
Le programme de fidélité Loyoly s'affiche désormais sous forme de blocs natifs dans votre application Tapcart, il ne s'agit plus d'une webview. Votre client consulte son palier VIP, ses avantages et sa progression vers le palier suivant directement dans l'app.
Une expérience mobile fluide : navigation native, sans webview ni changement de contexte. Le client reste dans l'app du début à la fin, et les parcours qui se cassaient dans la webview — retour, partage, panier — fonctionnent nativement.
À vos couleurs, sans une ligne de code : les couleurs et les polices sont injectées automatiquement par Tapcart depuis App Studio. Le bloc ressemble à votre app, pas à Loyoly.
Placé là où il convertit : vous choisissez où placer le bloc dans votre app — accueil, profil, page compte — et vous le déployez depuis votre back-office Loyoly. Pas de développement, pas de ticket, pas d'attente d'une nouvelle version de l'app.
L'affichage se fait sous forme de carrousel horizontal, et aucune nouvelle soumission à l'App Store n'est nécessaire.
💡 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, puis votre clé API : dans Tapcart, ouvrez App Studio, cliquez sur le nom de votre boutique en haut à droite, puis Settings → section App Settings → bloc Tapcart CLI 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.
Pousser les blocs depuis Loyoly :
Une fois l'intégration connectée, vous pouvez pousser les blocs Loyoly vers votre app directement depuis votre back-office Loyoly, sans repasser par Tapcart.
Rendez-vous dans Communication → Diffusion : une carte Tapcart vous permet de diffuser les blocs en un clic et de voir lesquels sont déjà diffusés.
💡Cette carte n'apparaît que si l'intégration Tapcart est connectée à votre boutique.
⚠️ 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.
⚠️ Certaines missions ne s'affichent pas dans l'app Tapcart. Les missions TikTok, Instagram et Typeform sont volontairement masquées dans l'application mobile : leur parcours ouvre une page externe dont le client ne peut pas revenir, ce qui bloquerait sa navigation. Ces missions restent disponibles normalement sur votre programme web.
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.