Introduction

Vous souhaitez afficher la section de parrainage Loyoly sur une page personnalisée de votre boutique PrestaShop ? L'intégration via iframe vous permet de la déployer sur n'importe quelle page, avec un contrôle total côté développement.

💡 Ce guide s'adresse aux marchands PrestaShop. Une équipe technique (interne ou agence) est nécessaire pour la mise en place.

Principe

L'intégration consiste à insérer une iframe pointant vers la section parrainage Loyoly dans la page cible de votre boutique. L'URL de l'iframe doit être construite dynamiquement avec plusieurs paramètres pour récupérer les bonnes informations client et boutique.

URL de base :

https://play.loyoly.io/play/shopify/section-referral

Paramètres de l'URL

Plusieurs paramètres doivent être ajoutés à l'URL de base pour que l'iframe fonctionne correctement :

langcode : code langue de la page sur 2 caractères (fr, en, es, etc.)
customer_id : identifiant technique du client connecté
currencycode : code de la monnaie sur 3 caractères (EUR, USD, etc.)
currencyrate : taux de change de la monnaie courante par rapport à la monnaie de base de la boutique
shop : nom technique de votre boutique côté Loyoly. Cette information est communiquée par votre CSM lors du déploiement.

Exemple d'URL complète :

https://play.loyoly.io/play/shopify/section-referral?langcode=fr&customer_id=5555&currencycode=EUR&currencyrate=1&shop=votre-boutique

Mise en pratique

Pour que les paramètres de l'URL soient dynamiques, ajoutez l'iframe via un script JavaScript : vous pouvez ainsi récupérer les informations du client connecté, de la langue et de la devise depuis le contexte PrestaShop, puis construire l'URL et insérer l'iframe dans la page.

⚠️ Important : pour autoriser la copie du lien de parrainage depuis l'iframe, ajoutez l'attribut allow="clipboard-read; clipboard-write" à l'iframe. Sans cela, le bouton de copie ne fonctionnera pas.

Exemple d'iframe à insérer

<iframe
  allow="clipboard-read; clipboard-write"
  id="loyoly-referal"
  style="width: 100%; border: 0;"
  src="https://play.loyoly.io/play/shopify/section-referral?langcode=fr&customer_id=5555&currencycode=EUR&currencyrate=1&shop=votre-boutique">
</iframe>

✨ Bonne pratique : ne codez pas en dur les valeurs de customer_id, langcode, currencycode et currencyrate. Récupérez-les dynamiquement depuis le contexte PrestaShop (variables Smarty, objet customer connecté, devise active) avant de construire l'URL.

Questions fréquentes

Le bouton de copie du lien de parrainage ne fonctionne pas, pourquoi ?

Vérifiez que l'attribut allow="clipboard-read; clipboard-write" est bien présent sur l'iframe. C'est l'autorisation qui permet à la section parrainage d'écrire dans le presse-papier du visiteur.

L'iframe s'affiche vide ou ne charge rien, que faire ?

Vérifiez en priorité le paramètre shop (il doit correspondre exactement au nom communiqué par votre CSM) et le customer_id (le client doit exister dans Loyoly). Une URL mal formée ou un paramètre manquant empêche le chargement.

Comment récupérer le customer_id côté PrestaShop ?

Le customer_id correspond à l'identifiant technique du client tel que synchronisé avec Loyoly. Côté PrestaShop, vous pouvez le récupérer via l'objet $customer côté front (id PrestaShop). Si vous avez un doute sur le mapping, contactez votre CSM Loyoly.

Que se passe-t-il si le visiteur n'est pas connecté ?

L'iframe ne peut pas afficher de section parrainage personnalisée sans customer_id. Conditionnez l'affichage de l'iframe à la connexion du client, ou affichez un message d'invitation à se connecter sur la page.

Une question technique ou un cas particulier ?

Contactez votre CSM Loyoly, il fera le lien avec l'équipe technique.

Parrainage PrestaShop : déployer la page via iframe