Cas d’usage: L’utilisateur sélectionne une offre, ce qui le conduit sur la page de création de compte de votre application. Après la création de son compte, l’utilisateur souscrit à l’offre qu’il avait choisi.
Cette installation demande un peu de paramétrage, deux appels API et quelques lignes de code.
Étape 1 – Paramétrage
Ouvrez la section Paramètres dans le menu de gauche et ouvrez le menu Page des offres.
Dans Page des offres pour les utilisateurs anonymes, changez l’action du bouton ‘Choisir une offre’ pour ouvrir votre page d’inscription.
Étape 2 – Afficher la grille tarifaire
Dans votre page des tarifs, installez la grille d’offres de la manière que vous avez installé le Portail Client, mais sans le paramètre customer_ref.
Ajoutez la librairie JavaScript dans la balise <head> de votre page.
<script type="text/javascript" src="https://portal.proabono.com/Get/portal.js"></script>
Placez une balise <div> dans la page à l’endroit où vous souhaitez afficher la grille d’offres.
<div id="proabono_portal">loading...</div>
Puis chargez la grille d’offres.
<script type="text/javascript">
ProAbonoPortal.open({
business_id: 42,
segment_ref: "demo-eur",
});
</script>
La grille d’offre s’affiche. Lorsqu’un client sélectionne une offre, il est redirigé vers votre page de création de compte utilisateur avec un paramètre refo (référence de l’offre).
Étape 3 – Ajouter le client
Juste après la création du compte utilisateur dans votre application web, déclarez un nouveau client via l’API.
Transmettez le paramètre refo de l’étape précédente comme paramètre ReferenceOffer dans cet appel API.
POST https://api-42.proabono.com/v1/Customer
{
"ReferenceSegment": "sitedemo-newportal",
"ReferenceCustomer": "cust-42",
"Name": "John Doe",
"Language": "fr",
"ReferenceOffer": "off-premium"
}
Plus d’informations et de paramètres supplémentaires dans la référence API.
Étape 4 – Ouvrir le parcours d’abonnement
L’appel précédent retourne un objet Customer contenant un tableau Links.
Récupérez la valeur query du lien dont rel=’hosted-subscribe’.
{
...
"Links": [
{
"rel": "hosted-subscribe",
"query": "H9mWCR8lszobdnL95qyASG87CYUk2MY1S2zABWydAWStmkvsFtc"
},
...
]
}
Plus d’informations et de paramètres supplémentaires dans la référence API.
Ouvrez ensuite le parcours de la même manière que pour le Portail Client, en ajoutant cette fois le paramètre query à l’appel d’ouverture.
Ajoutez la librairie JavaScript dans la balise <head> de votre page.
<script type="text/javascript" src="https://portal.proabono.com/Get/portal.js"></script>
Placez une balise <div> dans la page à l’endroit où vous souhaitez afficher le parcours.
<div id="proabono_portal">loading...</div>
Puis ouvrez le parcours avec le paramètre query.
<script type="text/javascript">
ProAbonoPortal.open({
business_id: 42,
segment_ref: "demo-eur",
customer_ref: "cust-42",
query: "H9mWCR8lszobdnL95qyASG87CYUk2MY1S2zABWydAWStmkvsFtc",
hash: "..." // optionnel en sandbox
});
</script>
Plus d’informations et de paramètres supplémentaires dans cet article.
C’est tout. Le parcours d’abonnement de cette page s’ouvre et permet au client de s’abonner.