Abonnements

Les abonnements vous permettent de monétiser votre communauté en proposant des forfaits payants à vos utilisateurs. Vous pouvez :

Utiliser notre interface personnalisable pour afficher les forfaits et permettre aux utilisateurs de s'abonner.
Attribuer un badge aux utilisateurs payants, qui sera affiché dans les commentaires.
Ajouter du contenu réservé à votre site web, accessible uniquement aux membres.
Utiliser l'API des abonnements pour des intégrations personnalisées.
Utiliser les webhooks pour vous intégrer à d'autres services, comme un CRM.

Stripe Connect

Nos abonnements reposent sur Stripe Connect. Vos utilisateurs payants et leurs abonnements sont gérés sous un compte Stripe qui vous appartient. Cela vous permet de rester propriétaire de vos abonnements sans dépendre de nous. Si vous prévoyez de quitter Hyvor Talk, vous pouvez continuer à gérer vos abonnements sans interruption en déconnectant le compte Stripe de Hyvor Talk.

Pour utiliser les abonnements, vous devez exercer votre activité dans un pays où Stripe est disponible.

Comment ça marche

Configuration :
Allez dans Console → Paramètres → Abonnements pour activer les abonnements. On vous demandera de connecter votre compte Stripe. Stripe vous demandera de vérifier votre identité pour répondre aux exigences KYC. Une fois la vérification terminée, vous pouvez créer jusqu'à 3 forfaits et personnaliser l'interface.

Installation :
Ajoutez le code d'intégration des abonnements à votre site web. Il affichera l'interface des forfaits sur votre site web. Dans le coin inférieur droit de votre site web, les utilisateurs trouveront un bouton « S'abonner », qui ouvre la fenêtre modale des forfaits. Les utilisateurs peuvent choisir un forfait et payer directement sur votre site web.

Voici le code minimal requis pour ajouter les abonnements à votre site web :

<script async src="https://talk.hyvor.com/embed/memberships.js" type="module"></script>
<hyvor-talk-memberships website-id="YOUR_WEBSITE_ID"></hyvor-talk-memberships>

Consultez la page d'installation pour des instructions spécifiques à chaque plateforme. Voir ci-dessous les attributs pris en charge par l'élément <hyvor-talk-memberships>.

Authentification :
par défaut, les membres se connectent à votre site web avec un compte HYVOR (autrement dit, vous pouvez utiliser HYVOR comme fournisseur d'authentification). Vous pouvez aussi configurer le SSO si vous disposez déjà d'un système d'authentification. Si l'utilisateur est déjà connecté pour commenter, la même connexion sera utilisée pour les abonnements (l'ID du site web doit être le même).

Configuration des forfaits

Pour configurer les forfaits, allez dans Console → Paramètres → Abonnements. Vous verrez un écran comme celui-ci :

Vous pouvez créer jusqu'à 3 forfaits.
Ces devises sont prises en charge :
- USD
- EUR
- GBP
Chaque forfait comporte :
- Nom : identifie le forfait
- Description (facultatif)
- Prix mensuel
- Badge (facultatif) : il sera affiché dans les commentaires à côté du nom de l'utilisateur
Le prix annuel de chaque forfait sera calculé en fonction de la remise annuelle que vous définissez.

Hyvor Talk vous permet de créer jusqu'à 3 forfaits. Chaque forfait a un prix mensuel.

Interface des forfaits

L'interface des forfaits désigne l'interface utilisateur de l'embed sur votre site web. Vous pouvez la personnaliser dans Console → Paramètres → Abonnements. La plupart des styles (couleurs, etc.) proviennent de la section Console → Paramètres → Apparence.

Bouton « S'abonner »

Le point d'entrée des abonnements est le bouton « S'abonner ». Il est toujours affiché dans le coin inférieur droit de votre site web.

Lorsque l'utilisateur clique sur le bouton, une fenêtre modale s'affiche avec la liste des forfaits que vous avez créés. L'utilisateur peut choisir un forfait et le payer.

Lorsque l'utilisateur n'est pas connecté, on lui demande de se connecter :

Fenêtre modale des forfaits - lorsque l'utilisateur n'est pas connecté

(Le bouton « Se connecter pour s'abonner » amène l'utilisateur vers la page de connexion HYVOR ou celle de votre SSO, selon vos paramètres.)

Lorsque l'utilisateur est connecté, il peut souscrire au forfait :

Fenêtre modale des forfaits - lorsque l'utilisateur est connecté

Paiement

Après avoir sélectionné un forfait, l'utilisateur doit saisir ses informations de paiement directement sur votre site web.

L'utilisateur sera redirigé vers une page externe (par ex. le site de sa banque) pour la vérification 3D Secure si nécessaire.

Confirmation du paiement

Enfin, l'utilisateur est redirigé vers la page qui a initié le paiement. Il verra un message de confirmation, que vous pouvez personnaliser dans la console.

Vous pouvez également configurer l'URL de succès du paiement dans les paramètres des abonnements pour rediriger les utilisateurs vers une page personnalisée après un paiement réussi.

Changer de forfait

Les utilisateurs peuvent changer de forfait à tout moment. Lorsqu'ils changent, le nouveau forfait prend effet immédiatement, et nous essayons de prélever aussitôt le montant calculé au prorata. Si le paiement échoue, l'abonnement de l'utilisateur passe au statut en retard de paiement (past due), et nous réessaierons le paiement plus tard.

Gérer l'abonnement

Pour mettre à jour les moyens de paiement ou résilier l'abonnement, les utilisateurs peuvent cliquer sur le bouton « Gérer l'abonnement » dans la fenêtre modale. Ils accèdent alors au tableau de bord de facturation Stripe.

Moyens de paiement pris en charge

Stripe prend en charge un large éventail de moyens de paiement. Pour les configurer, allez dans Paramètres → Paiements → Moyens de paiement dans votre tableau de bord Stripe. Parmi les moyens de paiement disponibles, Hyvor Talk ne prend en charge que ceux qui offrent une confirmation immédiate et la prise en charge des paiements récurrents.

Cela inclut :

Cartes (Visa, Mastercard, American Express, etc.)
Carte Bancaire (France)
Apple Pay*
Google Pay*
PayPal*

* Configuration supplémentaire requise (ex. : vérification du domaine, etc.)

Tarifs

Frais

Sur chaque paiement d'un utilisateur, les frais suivants sont déduits :

Frais Stripe de 1 à 3 % (voir les tarifs Stripe)
Frais Hyvor Talk
- Forfait Premium : 5 %
- Forfait Business : 3 %
- Forfait Enterprise : 0 %

Pour un exemple de paiement de 100 € avec une carte européenne,

Stripe conservera 2,25 € (2,25 %)
- 1,50 € - 1,5 %
- 0,50 € - 0,5 %, Stripe Billing
- 0,25 € - Fixe
Hyvor Talk (dans le forfait Business) conservera 3,00 € (3 %)
Vous recevrez 94,75 €

De plus, vous serez responsable de tous les impôts ou frais pouvant s'appliquer dans votre pays.

Utilisation des crédits

Chaque fois que l'élément <hyvor-talk-memberships> est chargé, il consomme un crédit. Consultez les tarifs pour plus d'informations.

Composant des abonnements

L'élément <hyvor-talk-memberships> est un Web Component qui fournit l' interface des abonnements.

Attributs
API
Events

Attributs

L'élément <hyvor-talk-memberships> prend en charge les attributs suivants :

Attribut

Valeur

website-id

L'ID de votre site web Hyvor Talk. Obligatoire.

language

Le code de langue du formulaire. Remplace la valeur par défaut de votre site web.

sso-user, sso-hash

Voir SSO sans état.

colors

light, dark ou os. Voir Styles.

Attributs `t-`

Il prend également en charge les attributs t- suivants pour remplacer les textes du composant :

t-button-subscribe
t-modal-title
t-modal-title-members
t-monthly
t-yearly
t-month-per
t-year-per
t-save-percent
t-subscribe-as
t-login-to-subscribe
t-manage-subscription
t-switch-to
t-switch-button
t-current-plan
t-new-plan
t-logged-in-as
t-manage-account
t-logout
t-will-cancel
t-past-due
t-switched
t-default-gate-title
t-default-gate-content

<hyvor-talk-memberships
	t-button-subscribe="Devenir membre"
	t-modal-title="Rejoignez notre communauté payante"
	t-modal-title-members="Vous êtes membre !"
></hyvor-talk-memberships>

API

L'élément <hyvor-talk-memberships> expose une API avec les méthodes suivantes :

api.auth.user() - Récupère les données de l'utilisateur courant. Renvoie null si l'utilisateur n'est pas connecté, ou un objet User s'il est connecté.
api.auth.logout() - Déconnecte l'utilisateur courant.
api.plans() - Récupère la liste des forfaits. Renvoie un tableau d' objets Plan.
api.modal.open() - Ouvre la fenêtre modale des forfaits.
api.modal.close() - Ferme la fenêtre modale des forfaits.

Utilisation de l'API

Voici un exemple d'utilisation de l'API :

const element = document.querySelector('hyvor-talk-memberships');
const user = element.api.auth.user();

Cependant, l'élément peut ne pas être prêt lorsque le script est exécuté. Pour vous assurer que l'élément est prêt, écoutez l'événement loaded :

const element = document.querySelector('hyvor-talk-memberships');
element.addEventListener('loaded', () => {
	const user = element.api.auth.user();
});

Objets de l'API

Objet User

interface User {
	id: number;
	type: 'hyvor' | 'sso';
	name: string;
	username: string;
	picture_url: string | null;
	bio: string | null;
	location: string | null;
	website_url: string | null;
	subscription: Subscription | null;
}

Objet Plan

{
	id: number;
	name: string;
	description: string;
	monthly_price: number;
	badge_id: number | null;
}

Objet Subscription

{
	id: number;
	is_yearly: boolean;
	status: 'active' | 'past_due';
	cancel_at: number | null;
	plan: Plan;
}

Événements

L'élément <hyvor-talk-memberships> émet les événements suivants :

loaded : lorsque le composant des abonnements est entièrement chargé.
subscription:created : lorsqu'un abonnement est créé. Le paiement est encore en attente.
subscription:success : lorsque le paiement d'un abonnement réussit.
subscription:updated : lorsque l'utilisateur passe à un autre forfait.

Voici une définition TypeScript des données des événements :

interface MembershipEvent {
	loaded: null;
	'subscription:created': {
		subscription: Subscription;
	};
	'subscription:success': {
		subscription: Subscription;
	};
	'subscription:updated': {
		subscription: Subscription;
	};
}

Pour écouter un événement, utilisez la méthode addEventListener. e.detail contiendra les données de l'événement.

const element = document.querySelector('hyvor-talk-memberships');
element.addEventListener('subscription:success', (e) => {
	console.log('Subscription success:', e.detail);
});

Notez que ces événements ne sont émis que lorsque l'utilisateur interagit avec le composant des abonnements. Pour gérer les événements asynchrones (par ex. lorsque l'utilisateur résilie un abonnement depuis le tableau de bord Stripe), ne vous fiez pas à ces événements. Utilisez plutôt les webhooks.

Abonnements

Stripe Connect

Comment ça marche

Configuration des forfaits

Interface des forfaits

Bouton « S'abonner »

Fenêtre modale des forfaits

Paiement

Confirmation du paiement

Changer de forfait

Gérer l'abonnement

Moyens de paiement pris en charge

Tarifs

Frais

Utilisation des crédits

Composant des abonnements

Attributs

Attributs t-

API

Utilisation de l'API

Objets de l'API

Objet User

Objet Plan

Objet Subscription

Événements

Attributs `t-`