L'arrivée des nouveaux scripts Poool offre de nouvelles opportunités pour vos walls !
Dans cet article, on vous explique comment mettre plusieurs walls sur une page.
🚨 Certains cas d'usage nécessitent l'intervention de votre équipe technique et la nouvelle intégration Paywall V5.
Nous vous invitons à consulter également l'article 👉 Qu'est-ce qui change avec la nouvelle version du script Poool.
Pour votre équipe technique, la documentation technique sera disponible sous quelques jours 👉 Doc Technique
L'élément cible
Petit nouveau dans la configuration d'un wall, l'élément cible ou "target" va vous permettre d'afficher vos walls là où vous le souhaitez sur vos pages.
Par défaut, le wall s'affiche dans une "boîte" qui porte le nom "poool-widget". Si on traduit cela en HTML : le wall s'affiche dans une div portant l'id "poool-widget". C'est donc l'élément cible par défaut.
💡 Vous avez dit "sélecteur CSS" ?
Un sélecteur CSS est un mot-clef qui permet de désigner une catégorie
d'éléments HTML de la page.
En l'occurence ici, on utilisera les sélecteurs de classe et d'id pour
cibler les éléments portants ces sélecteurs.
Utiliser l'élément cible pour un wall
Si vous souhaitez simplement afficher votre wall à un autre endroit que celui par défaut (la div portant l'id "poool-widget"), vous pouvez le faire depuis votre dashboard.
Nous vous invitons à consulter notre article 👉 Comment mettre un wall par-dessus mon contenu? qui vous expliquera comment faire à travers un cas d'usage précis.
Plusieurs walls avec le même widget
Grâce au nouveau script Access.js et l'élément cible, vous allez pouvoir afficher votre wall à plusieurs endroits votre page en même temps.
Pour rappel, un scénario est composé d'une ou plusieurs étapes et 1 étape correspond à 1 widget.
Dans notre exemple, nous paramétrons 1 scénario avec en premier widget "Inscription Newsletter" avec "Article offert" en alternative. Nous souhaitons que le wall s'affiche d'abord sur toute la largeur de l'écran (dans la div "#fullscreen"), puis à la fin de l'article (dans la div "#poool-widget").
Paramétrage d'un scénario dans le Dashboard
Voici le scénario que nous avons paramétré pour notre exemple:
🚨 Ne paramétrez pas d'élément cible dans les widgets
Intégration au code
Dans le code de notre page, nous configurons nos deux walls comme suit:
Vue lecteur
Côté lecteur, je retrouve bien 2 fois mon wall :
Plusieurs walls avec des widgets différents
De la même manière, votre équipe technique pourra afficher plusieurs walls différents dans votre page.
Pour avoir des walls avec différents widgets, il faudra, au choix :
appeler un contexte de type Valeur Personnalisée
forcer un widget
appeler un groupe personnalisé
Si nous reprenons notre exemple précédent, nous souhaitons que le premier wall affiche "Inscription Newsletter", comme paramétré dans le scénario. En revanche, cette fois-ci nous souhaitons que le second wall affiche un widget "Abonnement", sans alternative.
Option 1 : Appeler un contexte de type Valeur Personnalisée
Dans votre Dashboard, il faudra au préalable créer un contexte de type Valeur Personnalisée et un ou plusieurs scénarios pour les groupes qu'il contient.
Pour notre exemple, nous avons créé un contexte "abonnement" qui n'utilise pas la segmentation native:
Nous avons également créé le scénario suivant avec une seule action :
Voici le code que nous avons intégré à notre page :
Option 2 : Forcer le widget
Vous pouvez personnaliser le widget forcé directement dans le code, par exemple modifier ses textes.
Voici le code que nous avons intégré à notre page:
Option 3 : Appeler un groupe personnalisé
Dans votre Dashboard, il faudra au préalable créer un groupe personnalisé et un scénario.
Pour notre exemple, nous avons créé un groupe personnalisé "abonnement" dans notre contexte par Défaut :
Nous avons également créé le scénario suivant avec une seule action :
Voici le code que nous avons intégré à notre page :
Résultat côté lecteur
Quelle que soit la méthode choisie, voici le résultat côté lecteur :
Nous avons bien nos 2 walls différents ✨