Poool
light_mode
dark_mode
menu
close

#Gérer l'abonnement avec Subscribe

Maintenant que votre stratégie de paywall est en place, vous avez besoin d'un outil pour gérer l'abonnement à votre contenu premium. Heureusement, Poool Subscribe est suffisamment flexible pour être utilisé dans n'importe quelle situation.

Ce guide ne couvrira que l'intégration la plus simple de Subscribe, qui ne nécessite que quelques lignes de JavaScript et un peu de configuration sur votre Dashboard. Nous partirons du principe que vous ne gérez pas déjà des comptes gratuits ou de l'abonnement.

#Préparez votre environnement

#1. Configurez votre solution de paiement

La première chose que vous devez faire est de configurer votre solution de paiement. Sans cela, vous ne pourrez pas passer l'étape de paiement et ne pourrez pas tester votre parcours d'abonnement.
Accédez à votre Dashboard et cliquez sur l'onglet Subscribe, puis sur Réglages. Choisissez votre solution de paiement préférée, activez-la et ajoutez vos identifiants.

⚠️ La première étape est obligatoire car certaines solutions de paiement exigent que vos offres d'abonnement soient synchronisées des deux côtés.

#2. Créez vos premières offres d'abonnement

Maintenant que votre solution de paiement est configurée, vous devez créer vos premières offres.
Accédez à votre dashboard, puis cliquez sur Subscribe, Offres et créez une nouvelle offre. Choisissez votre prix, vos avantages et enregistrez-la.

#3. Créez votre parcours d'abonnement

Une fois que vous avez votre première offre, vous devez créer un parcours d'abonnement.

Un parcours d'abonnement est composé d’une landing page et des formulaires d’inscription/paiement. La landing page sera le point d'entrée de votre parcours d'abonnement et vous permettra d'afficher vos offres.

Accédez à votre dashboard, cliquez sur l'onglet Subscribe, Parcours d'abonnement, et créez-en un nouveau. Pour le construire, vous pouvez choisir de partir d'un modèle ou le créer vous-même de 0. N’oubliez pas d’y intégrer une ou plusieurs offres d’abonnement.

Enregistrez votre parcours d'abonnement et n'oubliez pas de l'activer.

#Ajoutez Subscribe.js à votre site

Maintenant que votre environnement est entièrement configuré, vous pouvez commencer à intégrer Subscribe. Nous vous recommandons d'utiliser un serveur local et un simple fichier index.html pour réaliser ce guide, mais les outils de code en ligne comme CodePen ou JSFiddle fonctionnent également (bien que vous ne puissiez pas utiliser de cookies dans les iframes de ces outils).

En partant du principe que notre contenu html est le suivant :
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <div class="content">
      <h1 class="title">Un super article derrière un paywall</h1>
      <p id="excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tortor leo, sollicitudin quis posuere sed...</p>
      <p id="full-content" style="display: none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tortor leo, sollicitudin quis posuere sed, pharetra cursus mauris. Donec ultricies nibh sit amet quam feugiat, vel bibendum nisl pellentesque. In hac habitasse platea dictumst. Sed varius eget ante ac pulvinar. Suspendisse fringilla, quam ac imperdiet consequat, leo massa molestie mi, eget condimentum ligula enim ut mauris. Aliquam egestas malesuada vestibulum. Etiam ut nibh turpis. Fusce mattis blandit bibendum. Vestibulum sodales laoreet lacus ut sollicitudin. Donec tempus iaculis viverra. In congue felis quis sem porta iaculis.</p>
    </div>
    <div id="paywall" style="text-align: center;">
      <h2>Abonnez-vous pour lire cet article abonné</h2>
      <a href="https://premium.example.com">S'abonner</a>
    </div>
  </body>
</html>
Nous allons d'abord ajouter le tag Subscribe et d'ores et déjà nous préparer à vérifier si notre utilisateur connecté est abonné ou non :
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <div class="content">
      <h1 class="title">Un super article derrière un paywall</h1>
      <p id="excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tortor leo, sollicitudin quis posuere sed...</p>
      <p id="full-content" style="display: none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tortor leo, sollicitudin quis posuere sed, pharetra cursus mauris. Donec ultricies nibh sit amet quam feugiat, vel bibendum nisl pellentesque. In hac habitasse platea dictumst. Sed varius eget ante ac pulvinar. Suspendisse fringilla, quam ac imperdiet consequat, leo massa molestie mi, eget condimentum ligula enim ut mauris. Aliquam egestas malesuada vestibulum. Etiam ut nibh turpis. Fusce mattis blandit bibendum. Vestibulum sodales laoreet lacus ut sollicitudin. Donec tempus iaculis viverra. In congue felis quis sem porta iaculis.</p>
    </div>
    <div id="paywall" style="text-align: center;">
      <h2>Abonnez-vous pour lire cet article abonné</h2>
      <a href="https://premium.example.com">S'abonner</a>
    </div>


    <script src="https://assets.poool-subscribe.fr/subscribe.min.js"></script>
    <script>
      const subs = Subscribe.init('<your-app-id>');


      subs.getUser().then(user => {
        if (user && user.subscription && user.subscription.active) {
          document.querySelector('#excerpt').style.display = 'none';
          document.querySelector('#paywall').style.display = 'none';


          document.querySelector('#full-content').style.display = 'block';
        }
      });
    </script>
  </body>
</html>
Comme vous pouvez le voir, nous utilisons le script Subscribe.js.

Après l'avoir initialisé avec un appId, nous pouvons appeler directement la méthode getUser pour vérifier le statut de l'utilisateur. Si l'utilisateur s'est authentifié via votre parcours d'abonnement, l'objet user sera rempli avec tout le nécessaire pour gérer facilement l'accès au contenu premium.

ℹ️ La méthode getUser, et même les auth elements, récupèrent les données via une iframe chargée à partir de notre plateforme mais en utilisant des cookies posés sur votre sous-domaine Poool Subscribe, ou un domaine personnalisé le cas échéant, vous n'avez donc rien à faire en terme d'authentification pour le faire fonctionner. Ça marchera directement !

Vous pouvez maintenant verrouiller ou déverrouiller votre contenu premium en fonction du statut actuel de l'utilisateur Subscribe.

#Afficher un auth-element

Maintenant que nous avons notre logique d'accès au contenu premium, nous pouvons afficher un Auth Element. Un Auth Element est un petit composant qui sera créé par Subscribe là où vous le souhaitez pour afficher les boutons Connexion ou S'abonner liés à l'utilisateur actuellement authentifié.

Ceci peut être réalisé en deux étapes simples :
  • Créer un élément html qui recevra notre auth-element
  • Appeler la méthode createAuthElement
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <div class="content">
      <div id="signin"></div>
      <h1 class="title">Un super article derrière un paywall</h1>
      <p id="excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tortor leo, sollicitudin quis posuere sed...</p>
      <p id="full-content" style="display: none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tortor leo, sollicitudin quis posuere sed, pharetra cursus mauris. Donec ultricies nibh sit amet quam feugiat, vel bibendum nisl pellentesque. In hac habitasse platea dictumst. Sed varius eget ante ac pulvinar. Suspendisse fringilla, quam ac imperdiet consequat, leo massa molestie mi, eget condimentum ligula enim ut mauris. Aliquam egestas malesuada vestibulum. Etiam ut nibh turpis. Fusce mattis blandit bibendum. Vestibulum sodales laoreet lacus ut sollicitudin. Donec tempus iaculis viverra. In congue felis quis sem porta iaculis.</p>
    </div>
    <div id="paywall" style="text-align: center;">
      <h2>Abonnez-vous pour lire cet article abonné</h2>
      <a href="https://premium.example.com">S'abonner</a>
    </div>


    <script src="https://assets.poool-subscribe.fr/subscribe.min.js"></script>
    <script>
      const subs = Subscribe.init('<your-app-id>');


      subs.getUser().then(user => {
        if (user && user.subscription && user.subscription.active) {
          document.querySelector('#excerpt').style.display = 'none';
          document.querySelector('#paywall').style.display = 'none';


          document.querySelector('#full-content').style.display = 'block';
        }
      });


      const authElement = subs.createAuthElement('signin-with-subscribe-button', {
        target: '#signin'
      });
    </script>
  </body>
</html>
Comme vous pouvez le voir, nous avons ajouté un élément <div id="signin"></div> qui recevra l'auth-element une fois chargé. Ensuite, nous avons créé l'auth-element en utilisant la méthode createAuthElement et l'identifiant de notre div précédemment créée comme cible.
En moins de temps qu'il n'en faut pour le dire, vous devriez voir un bouton Connexion et un bouton Subscribe qui vous redirigeront vers votre parcours d'abonnement.

#Testez votre parcours d'abonnement

Maintenant que tout est configuré, vous pouvez tester votre parcours d'abonnement en cliquant sur le bouton S'abonner. Vous serez alors redirigé vers votre landing page, arborant une ou plusieurs offres que vous avez créées il y a quelques étapes. Cliquez sur une offre, créez un compte si vous n'en avez pas ou connectez-vous, et abonnez-vous.

ℹ️ Life Pro Tip: Si vous visitez votre site d'abonnement en mode prévisualisation, vous serez invité à payer avec des cartes de test (Stripe, ...) ou un compte sandbox (Paypal, ...).

Maintenant que vous avez souscrit à une offre, vous pouvez cliquer sur le bouton Retourner au contenu pour revenir à votre article.

Vous serez maintenant reconnu comme authentifié (l'auth-element affichera maintenant votre e-mail et un lien de déconnexion) et abonné (le contenu complet sera affiché).