Contenu réservé

Une fois les abonnements configurés, vous pouvez utiliser le contenu réservé pour restreindre l'accès à certains contenus de votre site web aux membres payants.

Cette page explique comment utiliser le contenu réservé avec notre composant <hyvor-talk-gated-content>. Vous pouvez aussi utiliser les webhooks pour synchroniser l'état de l'utilisateur (par ex. l'abonnement) avec votre système et servir le contenu réservé depuis votre backend.

Configurer le contenu réservé

Le contenu réservé est une fonctionnalité complémentaire des abonnements. Si ce n'est pas déjà fait, configurez d'abord les abonnements sur votre site web. Il existe deux façons de configurer le contenu réservé :

Contenu réservé hébergé

Commencez par configurer des blocs de contenu réservé dans Console → Outils → Contenu réservé.

Créer du contenu réservé

Chaque bloc comporte les informations suivantes :

  • Clé : une clé unique pour identifier le bloc.
  • Contenu : le contenu que vous souhaitez montrer aux utilisateurs. Vous pouvez utiliser du HTML.
  • Barrière : il s'agit du contenu affiché aux utilisateurs qui n'ont pas accès au contenu. Vous pouvez utiliser la barrière par défaut ou une barrière personnalisée (HTML).
  • Forfait minimum : le forfait minimum requis pour accéder au contenu.

Ensuite, vous pouvez utiliser le composant <hyvor-talk-gated-content> pour afficher le contenu. Utilisez la propriété key pour indiquer la clé du bloc de contenu réservé à afficher.

<hyvor-talk-gated-content key="your-key"></hyvor-talk-gated-content>

Vous pouvez créer jusqu'à 1 000 blocs de contenu réservé hébergés par site web. Si vous en avez besoin de plus, envisagez d'utiliser le contenu réservé dynamique.

Contenu réservé dynamique

Parfois, configurer manuellement des blocs de contenu réservé dans la console Hyvor Talk n'est pas envisageable. Dans ce cas, vous pouvez utiliser le contenu réservé dynamique. Cela nécessite de chiffrer de manière sécurisée une chaîne dans votre backend et de la transmettre au composant.

Tout d'abord, vous devez configurer une clé de chiffrement pour votre site web, si ce n'est pas déjà fait. Rendez-vous dans Console → Paramètres → API → Clé de chiffrement pour configurer la clé.

Voici un exemple en JavaScript de génération de la chaîne chiffrée. Il fonctionne de la même manière que le chiffrement des attributs sécurisés dans l'embed de commentaires.

Vous trouverez des exemples pour d'autres langages dans le dépôt hyvor-talk-examples. 
// ici, nous utilisons la bibliothèque crypto-js
// vous pouvez utiliser une autre bibliothèque qui prend en charge le chiffrement AES-256-CBC
const CryptoJS = require('crypto-js');

// récupérez-la dans Console -> Paramètres -> API -> Clé de chiffrement
// ne la stockez pas dans le code source (utilisez des variables d'environnement ou un stockage sécurisé)
const ENCRYPTION_KEY = 'v4gaj6ELt8p5+aLuBeNbRW45BAkHQzAfC2sExq1Elr4=';

// convertir la clé dans un format utilisable par la bibliothèque
const key = CryptoJS.enc.Base64.parse(ENCRYPTION_KEY);

// voici l'objet de données que vous souhaitez chiffrer
const data = {
	// Timestamp UNIX actuel en secondes
	// Il sert à garantir que la requête n'est pas rejouée
	timestamp: Math.floor(Date.now() / 1000),

	// voici le contenu que vous souhaitez afficher
	// affiché uniquement aux utilisateurs ayant accès (selon le forfait minimum)
	content: '<p>Your gated content here</p>',

	// le forfait minimum requis pour accéder au contenu
	// indiquez le « Nom » du forfait exactement tel qu'il apparaît dans la console
	'minimum-plan': 'Premium',

	// (facultatif)
	// voici la barrière affichée aux utilisateurs qui n'ont pas accès
	// si elle n'est pas définie, la barrière par défaut sera utilisée
	gate: '<p>Your gate content here</p>'
};

// convertir l'objet en chaîne JSON
const json = JSON.stringify(data);

// Générer un IV (vecteur d'initialisation) aléatoire
// Il doit être nouveau pour chaque chiffrement
// Il garantit que les mêmes données chiffrées plusieurs fois donneront des résultats différents
const iv = CryptoJS.lib.WordArray.random(16);

// Chiffrer la chaîne JSON avec la clé et l'IV
const encrypted = CryptoJS.AES.encrypt(json, key, {
	iv: iv
});

// Enfin, renvoyer les données chiffrées (encodées en base64) et l'IV (encodé en base64)
return encrypted.toString() + ':' + iv.toString(CryptoJS.enc.Base64);

Ensuite, transmettez la chaîne chiffrée au composant <hyvor-talk-gated-content> à l'aide de la propriété secure.

<hyvor-talk-gated-content secure="your-encrypted-string"></hyvor-talk-gated-content>

Si vous utilisez un moteur de modèles côté backend comme PHP, vous pouvez transmettre directement la chaîne chiffrée au HTML :

<hyvor-talk-gated-content secure="<?php echo $encrypted ?>"></hyvor-talk-gated-content>

Ou, si vous appelez une API pour obtenir la chaîne chiffrée, voici un exemple de création dynamique du composant en JavaScript :

// appeler votre API backend
fetch('https://your-api.com/encrypted-string')
	.then((response) => response.json()) // en supposant que la réponse est en JSON
	.then((data) => {
		const encrypted = data.encrypted;

		// créer le composant <hyvor-talk-gated-content>
		const component = document.createElement('hyvor-talk-gated-content');
		component.setAttribute('secure', encrypted);
		document.body.appendChild(component);
	});

Espace réservé de chargement

Le chargement du contenu réservé via notre API prend quelques millisecondes. Vous pouvez voir un bref clignotement du contenu avant le chargement du contenu réservé. Pour l'éviter, vous pouvez placer un espace réservé dans le composant.

<hyvor-talk-gated-content key="your-key">
	<p>Chargement...</p>
</hyvor-talk-gated-content>

Barrière par défaut

La barrière par défaut est affichée aux utilisateurs qui n'ont pas accès au contenu, sauf si vous avez défini une barrière personnalisée dans la console Hyvor Talk.

Barrière par défaut

Vous pouvez personnaliser les textes de la barrière par défaut dans la console, ou à l'aide des attributs default-gate-title et default-gate-content.

Composant de contenu réservé

Le composant <hyvor-talk-gated-content> sert à charger du contenu réservé sur votre site web. Vous pouvez avoir jusqu'à 10 instances de ce composant sur une même page.

Attributs

Le composant <hyvor-talk-gated-content> prend en charge les attributs suivants :

Attribut
Valeur
key
Pour charger du contenu réservé hébergé par clé.
secure
Pour charger du contenu réservé dynamique à partir d'une chaîne chiffrée.
default-gate-title
Remplace le titre de la barrière par défaut (lorsque les utilisateurs n'ont pas accès).
default-gate-content
Remplace le contenu de la barrière par défaut (lorsque les utilisateurs n'ont pas accès).

Autoriser Googlebot

Dans les paramètres des abonnements, vous pouvez activer l'option « Autoriser Googlebot » pour permettre à Googlebot d'accéder au contenu réservé afin qu'il puisse être indexé par Google. C'est utile si vous souhaitez que votre contenu payant apparaisse dans les résultats de recherche Google.

Attention ! Hyvor Talk ne gère que la partie reconnaissance de Googlebot. Vous devez configurer des données structurées sur votre site web pour indiquer à Google que le contenu est derrière un paywall. Sinon, Google pourrait pénaliser votre site web pour cloaking. Consultez cet article sur Google Search Central pour plus d'informations.

Enfin, veillez à tester si Googlebot peut accéder correctement à votre contenu réservé à l'aide de l'outil d'inspection d'URL de Google Search Console.

Comment Hyvor Talk reconnaît-il Googlebot ?

Nous vérifions d'abord si l'agent utilisateur est Googlebot. Si c'est le cas, nous vérifions en outre l'adresse IP par rapport aux adresses IP de Googlebot. Si les deux vérifications réussissent, nous autorisons Googlebot à accéder au contenu.

Hyvor Talk Logo