Intégrer mon parcours de souscription sur mon site web

Pour proposer la souscription à un produit sur votre site, rien de plus simple !

Option 1 - Ajouter le parcours en iframe

Qu'est-ce qu'un "iframe" ? 

Un iframe est une balise HTML permettant l'affichage, sur une page Web, d'un contenu provenant d'un autre serveur. Dans votre contexte, il vous permettra d'afficher le parcours de souscription sans rediriger l'utilisateur vers un autre URL. 

Ajouter le parcours à votre plateforme

1

Allez sur votre plateforme Plug

2

Cliquez sur Mes Parcours dans le menu latéral

3

Sur le produit de votre choix, cliquez sur Actions puis Paramètres

4

Copier le code présent dans Incorporer le widget Plug pour déployer le parcours de souscription sur votre interface utilisateur

Explications du code:

1 - Le tag <script> est votre parcours en iframe. Il doit être placé à la fin de votre code HTML, juste avant la balise </body>. Vous pouvez suivre les étapes suivantes pour vous guider: 

• Aller sur l'éditeur de votre site web
• Sélectionner la page sur laquelle vous souhaitez ajouter le parcours de souscription
• Ajouter la ligne de code <script> à la fin de votre page juste avant le tag </body>

2- Le tag <button> est le bouton qui, lorsqu'il sera cliqué, affichera le parcours de souscription sur votre plateforme. Vous pouvez le placer où vous le souhaitez dans votre code HTML. 

Exemple de résultat:

Etape supplémentaire: Avoir plusieurs boutons pour démarrer le même parcours de souscription.Si vous souhaitez avoir plusieurs boutons ( sur la même page web) qui démarrent le même parcours de souscription en iframe, il vous faudra ajouter le code suivant pour chaque nouveau bouton:

 <button onclick='this.addEventListener("click", PcpPlugGlobal.open("{PRODUCT_ID}"));'>{LABEL}</button>

Une modification sur ce code sera nécessaire, il faudra remplacer la valeur {PRODUCT_ID} par l'ID de votre produit. Cette ID se trouve sur votre premier bouton, c'est le reste du nom après pcp-plug-button-. 

Dans l'exemple ci-dessous, l'ID du produit est  9582ecbc-ef92-4a53-be64-bd67e311f541

<button id="pcp-plug-button-9582ecbc-ef92-4a53-be64-bd67e311f541">Buy</button><br>

Il faudra aussi aussi changer la valeur {LABEL}. Cette valeur est le texte qui vous souhaitez voir sur votre bouton (par exemple: "Vers mon parcours", "Pour souscrire, cliquez ici", etc... ) 

De ce fait, en suivant l'exemple ci-dessus, les autres boutons sur la page web auront le format suivant:

 <button onclick='this.addEventListener("click", PcpPlugGlobal.open("9582ecbc-ef92-4a53-be64-bd67e311f541"));'>Pour souscrire, cliquez ici</button>

Exemple de résultat: 

Option 2 - Utiliser l'URL du parcours de souscription

Afin de permettre à vos utilisateurs d'accéder à votre parcours de souscription, vous pouvez aussi vous servir directement de l'URL du parcours. Cependant, contrairement à l'iframe, l'utilisateur sera redirigé vers l'URL du parcours. 

Pour trouver l'URL de votre parcours

1

Allez sur votre plateforme Plug

2

Cliquez sur Mes Parcours dans le menu latéral

3

Sur le produit de votre choix, cliquez sur Action puis Souscrire

4

Copier l'URL du parcours présent dans la barre d'URL en haut de votre navigateur

Incorporer le lien sur votre plateforme

Afin d'ajouter le lien à votre plateforme, vous pouvez vous servir du code suivant:

<a href="{URL}">{LABEL}</a>

Vous pouvez ajouter ce code plusieurs fois dans votre code HTML si vous souhaitez avoir différents points de redirection, vers le parcours de souscription, sur votre plateforme.