Gestion du paywall avec une connexion pop-up

Intégrer un paywall efficace est essentiel pour les sites proposant du contenu premium. L’objectif est d’offrir une expérience utilisateur fluide : après une connexion via une pop-in, l’article se débloque immédiatement, sans rechargement de page et sans faille de sécurité. Découvrez deux approches pour y parvenir, en commençant par une méthode simple en JavaScript, puis en explorant des solutions adaptées aux environnements React.

Déblocage du contenu en JavaScript

Lorsqu’un utilisateur arrive sur un article premium, il est invité à se connecter via une pop-in. L’enjeu est de débloquer l’article dès la validation du login. Utiliser uniquement access.destroy() pour supprimer le paywall cache l’interface, mais l’article reste bloqué (par soucis de sécurité). La solution optimale repose sur un changement de contexte qui adapte les règles d’accès en fonction de l’état de connexion.

Étapes de la mise en place

Interception de l’événement de connexion
- Dès que l’utilisateur valide son login via la pop-in, l’événement est capté de votre côté pour déclencher le processus de déblocage.
Rechargement du paywall en toute sécurité
- Suppression propre du paywall : On utilise access.destroy() pour réinitialiser l’instance en cours.
- Réinitialisation du paywall : On relance l’initialisation via initAccess().
Utilisation d’un contexte spécifique
- On passe à un contexte configuré dans le Dashboard (exemple : context_connected), qui débloque automatiquement l’article.
- Un widget de déblocage invisible (ou, en option, un widget interactif) assure une transition fluide sans action supplémentaire de l’utilisateur.

L'utilisateur ne se rend pas compte de ce changement. C'est une solution a court terme. Lorsque l'utilisateur va recharger la page ou naviguer, libre à vous de le rediriger dans un context plus adapté.

Là c'est spécifiquement pour contourner les mesures de sécurité en adaptant dynamiquement le contexte plutôt qu’en supprimant purement le paywall, on garantit un déblocage immédiat, sécurisé et sans rechargement de page

Pour plus de détails, retrouvez un exemple de code complet dans une sandbox : Lien.

Gestion du Paywall en React

Pour les applications développées en React, deux approches se présentent :

Approche 1 : Mécanisme simple de déblocage du contenu

Avant la connexion :
L'article affiche un contenu protégé. Par exemple le début de l'article (une preview).
Au moment du clic sur "Login" :
Dès que l’utilisateur valide son login via la pop-in, l’événement est capté de votre part. Pour déclencher le processus de déblocage. Pour mettre à jour son état pour reconnaître que l'utilisateur est connecté.
Actualisation du contenu :
Dès que l'application sait que l'utilisateur est connecté, on recharge l'article pour afficher immédiatement le contenu complet sans restrictions. Ce changement se fait instantanément pour offrir une transition fluide.

Exemple de code

import { useEffect, useRef, useState } from 'react';
import { Link } from 'react-router-dom';
import {
  useAccess,
  Paywall,
  RestrictedContent,
  Pixel,
} from '@poool/react-access';

export default () => {
  const accessRef = useRef();
  const paywallRef = useRef();

  const { config: baseConfig } = useAccess();
  const [connected, setConnected] = useState(false);
  const [config, setConfig] = useState({});

  useEffect(() => {
    accessRef.current?.recreate();
  }, [config]);

  const init = () => {
    setConfig({
      ...baseConfig,
      ...config,
    });

    if (connected) {
      accessRef.current?.destroy();
    }
  };

  const onLoginClick = async () => {
    setConnected(true);
    init();
  };

  return (
    <div className="page premium">
      <button onClick={onLoginClick}>Login</button>
      <div className="container">
        <h1>Premium post</h1>
        <p>Preview content premium for users connected.</p>
        {!connected ? (
          <>
            <RestrictedContent ref={paywallRef}>
              <p>Texte protégé</p>
            </RestrictedContent>
            <Paywall
              ref={accessRef}
              contentRef={paywallRef}
              events={{ onLoginClick }}
              config={config}
            />
          </>
        ) : (
          <p>My content</p>
        )}
      </div>
      <Pixel type="page-view" data={{ type: 'premium' }} />
    </div>
  );
};

À noter que, dans certains cas et selon votre méthode de blocage, le contenu peut se retrouver dans le code source de la page.

Approche 2 : Gestion du contexte et changement dynamique

Cette approche adopte la même logique que la version JavaScript pour débloquer le contenu premium. Plutôt que de supprimer le paywall, on modifie dynamiquement le contexte d'accès dès la connexion de l'utilisateur, passant à un état « context_connected » défini dans le Dashboard.

Comment ça marche ?

Interception du Login :
Dès que l’utilisateur valide son login via la pop-in, l’événement est capté de votre part. Pour déclencher le processus de déblocage. Pour mettre à jour son état pour reconnaître que l'utilisateur est connecté.
Changement de Contexte :
Le contexte d'accès est modifié, autorisant immédiatement l'affichage du contenu complet sans rechargement de page. Cette démarche, identique à la version JavaScript, permet de respecter les règles de sécurité tout en offrant une transition fluide.
Expérience Utilisateur Optimale :
Un widget de déblocage (invisible ou interactif) assure la transition sans que l'utilisateur ne perçoive le changement, garantissant ainsi une navigation sécurisée et personnalisée.

Cette méthode allie sécurité, personnalisation et fluidité, tout en offrant une solution élégante pour accéder instantanément au contenu premium après connexion.

Exemple de Code

import { useEffect, useRef, useState } from 'react';
import { Link } from 'react-router-dom';
import {
  useAccess,
  Paywall,
  RestrictedContent,
  Pixel,
} from '@poool/react-access';

export default () => {
  const accessRef = useRef();
  const paywallRef = useRef();

  const { config: baseConfig } = useAccess();
  const [connected, setConnected] = useState(false);
  const [config, setConfig] = useState({});

  useEffect(() => {
    accessRef.current?.recreate();
  }, [config]);

  const init = () => {
    setConfig({
      ...baseConfig,
      ...config,
      context: connected ? 'context_connected' : '',
    });

    if (connected) {
      accessRef?.current?.destroy();
    }
  };

  const onLoginClick = async () => {
    setConnected(true);
    init();
  };

  return (
    <div className="page premium">
      <button onClick={() => onLoginClick()}>Login</button>
      <div className="container">
        <h1>Premium post</h1>
        <p>This is a premium post (with a paywall), it
        contains exactly 10 paragraphs of lorem ipsum
        </p>
        <>
          <RestrictedContent ref={paywallRef}>
            <p>My content</p>
          </RestrictedContent>
          <Paywall
            ref={accessRef}
            contentRef={paywallRef}
            events={{ onLoginClick }}
            config={config}
          />
        </>
      </div>
      <Pixel type="page-view" data={{ type: 'premium' }} />
    </div>
  );
};

Le choix entre ces deux approches React dépendra principalement des exigences spécifiques de votre projet :

Approche 1 : Optez pour cette méthode si vous recherchez une solution simple et rapide à implémenter.

Approche 2 : Préférez cette option pour une gestion plus fine des droits d’accès et une personnalisation avancée, grâce à la modification dynamique du contexte.

Pour plus de détails, retrouvez un exemple de code complet sur GitHub : Lien vers le repo.

Conclusion Générale

Que vous utilisiez du JavaScript classique ou React, la clé d’un déblocage fluide et sécurisé réside dans l’adaptation du contexte du paywall plutôt que dans sa suppression brute. Grâce à des widgets (invisible ou interactif) dans des contextes préconfigurés dans le Dashboard Poool, l’utilisateur bénéficie d’un accès immédiat au contenu premium dès sa connexion.

Si vous avez des questions ou des suggestions, n’hésitez pas à nous contacter !