FastComments.com

Personnalisations et configuration

Personnalisations et configuration

Contexte

Vous trouverez ici une documentation approfondie sur chacune des fonctionnalités et options que prend en charge le widget de commentaires.

Cette documentation couvre les concepts de base et approfondira chaque domaine de fonctionnalité, avec des guides pratiques et les pièges courants.

Des exemples de code seront fournis, avec les lignes pertinentes mises en évidence. Des captures d'écran des pages de configuration seront fournies lorsque cela s'applique.

Les exemples de code utiliseront notre bibliothèque JavaScript vanilla ; toutefois, les options de configuration utilisent exactement les mêmes noms pour toutes les versions du widget de commentaires (React, Vue, etc.).

La plupart des configurations et fonctionnalités décrites dans ce guide ne nécessitent pas d'écrire du code.

Afficher les mêmes commentaires sur différentes pages Internal Link

Comme le paramètre urlId nous permet de définir à quelle page, ou quel identifiant, les commentaires sont rattachés, nous pouvons simplement définir urlId avec la même valeur sur ces pages.

The Same Comments on Multiple Pages
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "urlId": "https://example.com/source-page"
8}];
9</script>
10

Polices personnalisées Internal Link

FastComments est conçu pour être personnalisable, et la police utilisée par ses widgets ne fait pas exception.

Par défaut, FastComments utilise la system font stack pour s'afficher au mieux sur un large éventail d'appareils.

Pour définir vos propres polices, consultez la Documentation sur le CSS personnalisé.

Vous y trouverez une méthode pour définir du CSS personnalisé, ce qui vous permettra de définir les polices de votre choix.

Comment définir la police

Pour remplacer la police, nous recommandons de définir votre CSS en utilisant les sélecteurs .fast-comments, textarea. Par exemple :

Exemple de police externe personnalisée
Copy CopyRun External Link
1
2@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
3.fast-comments, textarea {
4 font-family: 'Roboto', sans-serif;
5}
6

Prise en charge des arrière-plans sombres (mode sombre) Internal Link

Par défaut, le widget de commentaires FastComments détectera automatiquement le mode sombre sur la plupart des sites.

Lorsque le mode sombre est détecté, FastComments passera du texte noir sur fond blanc au texte blanc sur fond noir. Les images changeront également.

Au chargement de la page, le widget essaiera de déterminer la luminosité du fond de la page derrière le widget de commentaires. Cela signifie que la page peut avoir un fond blanc, mais si vous placez le widget de commentaires à l'intérieur d'un conteneur au fond noir, le mode sombre devrait toujours s'activer automatiquement afin de rendre les commentaires lisibles.

Cependant, le mécanisme de détection, qui repose sur la détermination de la « luminance », peut ne pas activer le mode sombre lorsque vous le souhaitez. Pour l'activer de force, définissez le drapeau hasDarkBackground sur true comme suit :

Forcer le mode sombre
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "hasDarkBackground": true
8}];
9</script>
10

Lier les commentaires aux pages Internal Link

Lors de l'envoi d'e-mails de notification, ou du rendu des commentaires dans des interfaces utilisateur comme la page de modération, il est utile de pouvoir faire un lien à partir du commentaire vers la page sur laquelle il se trouve.

Si URL ID n'est pas toujours un ID, alors nous devons stocker l'URL ailleurs. C'est à cela que sert la propriété "url", définie comme suit.

Définir une URL personnalisée
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "url": "https://example.com/article-5"
8}];
9</script>
10

Un cas d'utilisation courant est d'associer le fil de commentaires à un identifiant, comme un article, puis de créer un lien vers une page particulière, par exemple :

Définir ensemble l'URL personnalisée et les ID d'URL
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "url": "https://example.com/article-5",
8 "urlId": "article-5"
9}];
10</script>
11

L'URL n'est pas nettoyée des paramètres marketing courants. Par défaut, quelle que soit l'URL de la page actuelle, c'est l'URL qui est enregistrée avec le commentaire.

Déterminer quelle page afficher Internal Link

Lors de la récupération et du rendu des commentaires, le widget de commentaires doit savoir sur quelle page commencer. Par défaut, il commence par la première page et n'affiche que cette page.

Si nécessaire, la page exacte à afficher peut être transmise au widget de commentaires via le paramètre startingPage.

Specifying The Page to Render
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "startingPage": 1
8}];
9</script>
10

Notez que la numérotation des pages commence à zéro, donc l'exemple ci-dessus affiche la deuxième page.

Changer de fil de commentaires sans recharger la page Internal Link

Nous avons vu comment urlId est l'identifiant de la page ou de l'article auquel les commentaires sont liés.

Aussi, pour rappel, si non défini, le urlId sera par défaut l'URL de la page actuelle.

Mais qu'en est-il des SPAs (Single-Page-Applications), où la page ou le contenu auquel les commentaires sont liés change dynamiquement sans rechargement de page ?

Angular, React, Vue, etc

Avec nos bibliothèques telles que Angular et React, il suffit de mettre à jour la propriété urlId passée au widget pour que le widget de commentaires se rafraîchisse. Vous pouvez voir cela en action pour l'application React, par exemple, ici.

VanillaJS

Si vous utilisez la bibliothèque VanillaJS, c'est légèrement plus compliqué car il n'y a pas de framework comme Angular ou React pour gérer la liaison de données ou la propagation d'état.

Lorsque vous instanciez le widget VanillaJS, il retourne des fonctions qui peuvent être appelées pour le mettre à jour.

Voici un exemple fonctionnel où nous changeons le hash de la page et mettons à jour le widget de commentaires :

Exemple de changement de hash de page
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
3<button id="change-page"></button>
4<div id="fastcomments-widget"></div>
5<script>
6 (function fastCommentsMain() {
7 let config = {
8 tenantId: 'demo'
9 };
10 let instance = window.FastCommentsUI(document.getElementById('fastcomments-widget'), config);
11
12 let page = '#page-1';
13 function getNextPage() {
14 if (page === '#page-1') {
15 return '#page-2';
16 } else {
17 return '#page-1';
18 }
19 }
20
21 let button = document.getElementById('change-page');
22 function nextPage() {
23 page = getNextPage();
24 button.innerText = 'Go to ' + getNextPage();
25 window.location.hash = page;
26 let locationString = window.location.toString();
27
28 config.url = locationString; // Nous mettons également à jour url pour que les notifications puissent renvoyer vers la bonne page
29 config.urlId = locationString;
30
31 instance.update(config);
32 }
33 nextPage();
34 button.addEventListener('click', nextPage);
35 })();
36</script>
37

Désactiver la redirection d'image Internal Link

Par défaut, FastComments permet aux utilisateurs de télécharger des images. Lorsqu'un utilisateur clique sur cette image, FastComments ouvrira, par défaut, un nouvel onglet pour afficher l'image en entier. Définir ce drapeau sur true désactive ce comportement :

Disable Image Redirect
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "disableImageRedirect": true
8}];
9</script>
10

Si vous ne prévoyez pas de gérer vous-même le clic sur l'image (voir onImageClicked), nous recommandons de combiner cela avec un style pour supprimer l'aspect cliquable de l'image.

Mettre en évidence les nouveaux commentaires Internal Link

FastComments propose plusieurs façons de mettre en évidence les nouveaux commentaires.

Tout d'abord, par défaut, les commentaires ayant déclenché une notification dans l'application (réponses, réponses dans le même fil, ou commentaires sur une page à laquelle vous êtes abonné), seront automatiquement mis en évidence avec l'avatar de l'utilisateur légèrement illuminé. La couleur peut être personnalisée via CSS en utilisant la classe is-unread.

Les commentaires publiés au cours des dernières 24 heures ont la classe 24hr appliquée qui peut être utilisée pour la mise en forme.

Enfin, tout nouveau commentaire en direct qui apparaît dans la session de l'utilisateur sera mis en évidence pendant plusieurs secondes via une animation. Cela se fait via la classe CSS is-live et peut également être personnalisée.

Modèles d'e-mail Internal Link

Les e-mails envoyés par FastComments à vos clients peuvent être personnalisés. Le modèle, la logique, et les traductions peuvent tous être modifiés. Le texte peut être personnalisé par locale, et le style peut même être changé par domaine. En savoir plus sur les modèles d'e-mails personnalisés ici.

Nouveaux commentaires en direct en bas Internal Link

Par défaut, les nouveaux commentaires en direct apparaissent en haut de la liste des commentaires au fur et à mesure qu'ils sont publiés en temps réel.

Lorsque cette option est activée, les nouveaux commentaires en direct sont ajoutés en bas de la liste. Cela affecte la façon dont les commentaires s'affichent lorsqu'ils sont publiés en direct pendant que les utilisateurs consultent le fil de discussion.

New Live Comments to Bottom
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "newCommentsToBottom": true
8}];
9</script>
10

Avec ce paramètre activé :

  • Les nouveaux commentaires en direct publiés par d'autres utilisateurs apparaîtront en bas de la liste des commentaires
  • Les utilisateurs verront les nouveaux commentaires s'afficher sous les commentaires existants en temps réel
  • Cela n'affecte que les mises à jour des commentaires en direct - pas le chargement initial de la page
  • Cela peut aider à maintenir la fluidité de la lecture lorsque les utilisateurs suivent une discussion

Notez que ce paramètre n'affecte que l'emplacement des nouveaux commentaires en direct au moment de leur arrivée en temps réel. Il n'affecte pas l'ordre de tri initial lors du chargement de la page.

Activer le défilement infini Internal Link

Par défaut, le widget FastComments redimensionnera sa hauteur pour afficher tous les commentaires visibles. La pagination se fait via un bouton "Afficher la suite" à la fin de la page en cours, car nous avons constaté que c'est l'interaction qui convient le mieux à la plupart des utilisateurs.

Cependant, il existe des cas où le défilement infini est préféré. Par exemple, nous utilisons cette fonctionnalité dans notre produit Stream Chat.

Nous pouvons masquer les boutons "Afficher la suite" et passer au défilement infini en définissant le drapeau enableInfiniteScrolling sur true :

Enabling Infinite Scrolling
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "enableInfiniteScrolling": true
8}];
9</script>
10

Cela nécessite également d'ajouter du CSS personnalisé. Ajoutez du CSS personnalisé pour le sélecteur .comments afin d'activer le défilement, par exemple :

Activer le défilement infini
Copy CopyRun External Link
1
2.comments {
3 max-height: 500px;
4 overflow-y: auto;
5}
6

Un exemple complet et fonctionnel serait :

Enabling Infinite Scrolling
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "enableInfiniteScrolling": true,
8 "customCSS": ".comments { max-height: 500px; overflow-y: auto; }"
9}];
10</script>
11

Dans l'exemple ci‑dessus, nous utilisons la propriété customCSS ; cependant, il est recommandé d'utiliser l'interface de configuration du widget à la place pour des raisons de performance. Voir la documentation sur le CSS personnalisé.

Afficher tous les commentaires d'un coup - Désactiver la pagination Internal Link

Pour désactiver la pagination et afficher tous les commentaires en une fois, définissez startingPage sur -1.

Render All Comments
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "startingPage": -1
8}];
9</script>
10

Empêcher les nouveaux commentaires de niveau supérieur Internal Link

Définir noNewRootComments sur true fera en sorte que le widget masque la zone de réponse racine, mais permettra toujours aux utilisateurs de répondre aux commentaires enfants. Vous pouvez, par exemple, définir ceci de façon conditionnelle au chargement de la page pour n'autoriser que certains utilisateurs à laisser des commentaires de niveau supérieur.

Prevent New Root Comments
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "noNewRootComments": true
8}];
9</script>
10

Profondeur maximale des réponses Internal Link

Par défaut, FastComments autorise un emboîtement illimité des réponses, créant une structure de fil où les utilisateurs peuvent répondre indéfiniment à des réponses.

L'option maxReplyDepth vous permet de limiter la profondeur des fils de réponses. Lorsque la profondeur maximale est atteinte, les utilisateurs ne verront plus de bouton de réponse sur les commentaires à ce niveau.

Limiter la profondeur des réponses à 2 niveaux
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "maxReplyDepth": 2
8}];
9</script>
10

Avec maxReplyDepth réglé sur 2 :

  • Les utilisateurs peuvent commenter au niveau supérieur (profondeur 0)
  • Les utilisateurs peuvent répondre aux commentaires de niveau supérieur (profondeur 1)
  • Les utilisateurs peuvent répondre à ces réponses (profondeur 2)
  • Aucune réponse supplémentaire n'est autorisée au-delà de la profondeur 2

Définir sur 1 n'autoriserait que les réponses aux commentaires de niveau supérieur, créant une structure de discussion plus plate.

Définir maxReplyDepth à 0 désactiverait toutes les réponses, n'autorisant que les commentaires de niveau supérieur. Si non spécifié, les réponses peuvent être imbriquées sans limite.

Avertir avant de quitter avec un commentaire non envoyé Internal Link

Par défaut, si un utilisateur saisit un commentaire puis rafraîchit la page, ferme l’onglet ou quitte le site avant de le soumettre, le brouillon est perdu silencieusement.

Activer warnOnUnsavedComment à true fait que le navigateur demande à l’utilisateur de confirmer avant de quitter la page tant qu’une zone de commentaire ou une modification en cours contient du texte. Une fois le commentaire soumis, le texte est effacé, donc aucune invite n’est affichée.

Avertir sur le commentaire non enregistré
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "warnOnUnsavedComment": true
8}];
9</script>
10

L’invite utilise la boîte de dialogue native du navigateur. Les navigateurs modernes affichent leur propre libellé et ignorent le texte personnalisé, de sorte que le message ne peut pas être modifié.

Cette option charge une petite extension à la demande, elle n’ajoute donc rien au widget pour les sites qui ne l’activent pas.

Vue d'ensemble du Single Sign On (SSO) Internal Link

Le SSO, ou authentification unique (single-sign-on), est un ensemble de conventions permettant à vous ou à vos utilisateurs d'utiliser FastComments sans avoir à créer un autre compte.

En supposant que vous n'autorisiez pas les commentaires anonymes, un compte est requis pour commenter avec FastComments. Nous rendons ce processus d'inscription très simple - l'utilisateur indique simplement son e-mail lorsqu'il commente. Cependant, nous comprenons que même cela représente une friction supplémentaire que certains sites souhaitent éviter.

Nous pouvons réduire cette friction en n'ayant qu'un seul flux de connexion pour l'ensemble de votre site.

Comment l'obtenir ?

Tous les types de comptes ont actuellement accès au SSO. Cependant, le nombre maximum d'utilisateurs SSO variera selon votre formule. Comme pour les autres fonctionnalités, les formules Pro et supérieures offrent un support de développement direct.

Comparons les options, puis détaillons chacune d'elles.

Migrations d'utilisateurs et de commentaires

Lors d'une migration depuis une plateforme avec SSO comme Disqus, vous avez déjà des utilisateurs et leurs commentaires.

Les commentaires sont importés dans le cadre de votre migration, soit via l'API, notre interface d'importation, ou le support client. L'interface d'importation est préférée si elle prend en charge la plateforme depuis laquelle vous migrez, car elle intègre la gestion des erreurs, l'extraction et le téléversement des avatars et médias, ainsi qu'un système de suivi des traitements par lots.

Les utilisateurs eux-mêmes sont ajoutés automatiquement lors de la première consultation des fils de commentaires. Alternativement, ils peuvent être pré-ajoutés via l'API, mais ce travail n'offre pas de nombreux avantages.

Si les commentaires sont importés et que les utilisateurs SSO ne sont pas ajoutés manuellement via l'API, alors les commentaires seront automatiquement migrés vers le compte de l'utilisateur lors de sa première création, quand il consulte n'importe quel fil de commentaires. Il pourra ensuite gérer, modifier et supprimer les commentaires qu'il a initialement écrits.

La migration automatique se fait via l'e-mail ou le nom d'utilisateur. Certaines plateformes ne fournissent pas les e-mails lors de l'export, comme Disqus, nous utilisons donc le nom d'utilisateur dans ce cas.

  • Tant que vous transmettez un nom d'utilisateur correspondant et un e-mail dans le payload SSO, nous ajouterons l'e-mail aux objets de commentaires individuels afin que les notifications et les mentions fonctionnent.

Si vous souhaitez importer vos commentaires et vos utilisateurs en une seule fois, travaillez avec le support pour migrer les commentaires vers les comptes respectifs des utilisateurs après que les utilisateurs ont été importés via l'API.

Pour résumer, le chemin le plus simple pour la migration est :

  1. Importer les commentaires.
    1. Les avatars et autres médias sont migrés automatiquement si vous utilisez l'interface d'importation dans Manage Data -> Imports.
  2. Configurer le SSO Sécurisé ou Simple.
  3. Laisser la migration se faire automatiquement par utilisateur lors de leur première connexion.
    1. Cela ajoute généralement moins d'une seconde au temps de chargement de la page si l'utilisateur a moins de 50 000 commentaires.

Utilisateurs WordPress

Si vous utilisez notre plugin WordPress, il n'y a aucun code à écrire ! Rendez-vous simplement sur la page Admin du plugin, cliquez sur SSO Settings, puis sur Enable.

Cela vous amènera à un assistant en un seul clic qui créera votre clé API, l'enverra à votre installation WordPress et activera le SSO. Nous avons consolidé tout cela en un seul clic pour vous.

Notez que si vous installez le plugin pour la première fois, vous devrez suivre le processus de configuration avant de voir la page d'administration avec le bouton SSO Settings.

WordPress SSO - Modérateurs

Notez qu'actuellement, pour que le badge « Modérateur » s'affiche à côté de vos modérateurs lorsqu'ils commentent avec le plugin WordPress FastComments, ils doivent également être ajoutés comme modérateurs dans le tableau de bord FastComments et avoir leur e-mail vérifié.

Intégrations personnalisées

Pour les intégrations personnalisées, il existe deux options.

Option Un - SSO Sécurisé

Avec le SSO Sécurisé, FastComments sait que l'utilisateur qui commente, vote et lit les commentaires est un utilisateur réel de votre site.

Tant que vous créez un payload valide, l'utilisateur aura toujours une expérience de commentaire fluide.

Avec le SSO Sécurisé, le payload SSO est créé côté serveur à l'aide de l'authentification HMAC puis transmis au widget côté client.

Avec le SSO Sécurisé, le compte de l'utilisateur est complètement séparé du reste de la base d'utilisateurs FastComments. Cela signifie que si nous avons deux partenaires, la Société A et la Société B, chacune peut avoir un utilisateur SSO avec le nom d'utilisateur « Bob ».

Prérequis

  • Des connaissances de base en développement backend.
  • Des connaissances de base dans la gestion des clés API secrètes.
  • Des connaissances de base en développement d'API ou en rendu côté serveur.

Avantages

  • Sécurisé.
  • Expérience de commentaire fluide.

Inconvénients

  • Nécessite un développement backend.

Mise à jour des données utilisateur

Avec le SSO Sécurisé, chaque fois que vous transmettez le payload de l'utilisateur SSO, nous mettons à jour son utilisateur avec les dernières informations. Par exemple, si l'utilisateur a un nom d'utilisateur X et que vous transmettez Y dans le payload SSO, son nom d'utilisateur deviendra Y.

Si vous souhaitez supprimer des valeurs avec cette approche, définissez-les sur null (pas undefined).

API du SSO Sécurisé

Nous fournissons également une API pour interagir avec les utilisateurs SSO. Voir la documentation.

Notez que lors de l'utilisation du SSO Sécurisé, les utilisateurs sont automatiquement créés en arrière-plan au chargement de la page. Vous n'avez pas besoin d'importer vos utilisateurs en masse.

Option Deux - SSO Simple

L'alternative au SSO Sécurisé est de simplement transmettre les informations de l'utilisateur au widget de commentaires.

Fournir un e-mail avec le SSO Simple n'est pas obligatoire, mais sans cela, leurs commentaires s'afficheront comme « Non vérifié ».

Note ! Depuis début 2022, les noms d'utilisateur avec le SSO Simple n'ont plus besoin d'être uniques sur l'ensemble de FastComments.com.

Idéalement, le SSO Simple ne devrait être choisi que lors du développement sur une plateforme qui ne fournit pas d'accès backend.

Prérequis

  • Des connaissances de base en développement côté client.
  • Connaître au moins l'e-mail de l'utilisateur.

Avantages

  • Simple.
  • Toute l'activité reste vérifiée.
  • L'utilisateur ne saisit jamais son nom d'utilisateur ou son e-mail.

Inconvénients

  • Moins sécurisé que le SSO Sécurisé car le payload côté client pourrait être forgé pour devenir n'importe quel utilisateur.

API du SSO Simple

Les utilisateurs créés automatiquement via le flux SSO Simple sont stockés en tant qu'objets SSOUser. Ils peuvent être consultés et gérés via l'API SSOUser. Voir la documentation.

Intégrations personnalisées - Migration depuis Disqus SSO Internal Link

Les principales différences entre Disqus et FastComments Secure SSO sont que Disqus utilise SHA1 pour le chiffrement tandis que nous utilisons SHA256.

Cela signifie que la migration depuis Disqus est simple - changez l'algorithme de hachage utilisé de SHA1 à SHA256 et mettez à jour les noms des propriétés transmis à l'UI.

Intégrations personnalisées - Migration depuis Commento SSO Internal Link

Commento utilise une approche SSO radicalement différente - ils exigent que vous disposiez d'un endpoint qu'ils invoquent pour authentifier l'utilisateur. FastComments est l'inverse - encodez simplement et hachez les informations de l'utilisateur en utilisant votre clé secrète et transmettez-les.

Rappels Internal Link

Toutes les bibliothèques pour le widget de commentaires (actuellement Angular, React, Vue) supportent les callbacks.

Les callbacks sont spécifiés dans l'objet de configuration, avec la même signature pour chaque bibliothèque.

Les callbacks pris en charge sont :

  • onInit
  • onAuthenticationChange
  • onRender
  • commentCountUpdated
  • onReplySuccess
  • onVoteSuccess
  • onImageClicked
  • onOpenProfile
  • onCommentSubmitStart
  • onCommentsRendered

Les signatures exactes se trouvent dans les définitions TypeScript.

Voici un exemple avec tous les callbacks utilisés :

Exemples de callbacks
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5 window.fcConfigs = [{
6 target: '#fastcomments-widget',
7 tenantId: 'demo',
8 onInit: function () {
9 console.log('Library started to fetch comments!');
10 },
11 onAuthenticationChange: function (eventName, userObj) {
12 console.log('User authenticated!', eventName, userObj);
13 },
14 onRender: function () {
15 console.log('Render event happened!');
16 },
17 commentCountUpdated: function (newCount) {
18 console.log('New comment count:', newCount);
19 },
20 onReplySuccess: function (comment) {
21 console.log('New comment saved!', comment);
22 },
23 onVoteSuccess: function (comment, voteId, direction, status) {
24 console.log('New vote saved!', comment, voteId, direction, status);
25 },
26 onImageClicked: function (src) {
27 console.log('Image clicked!', src);
28 },
29 onOpenProfile: function (userId) {
30 console.log('User tried to open profile', userId);
31 // return true; // return true pour empêcher le comportement par défaut (ouverture du profil utilisateur sur fastcomments.com).
32 },
33 onCommentSubmitStart: function(comment, continueSubmitFn, cancelFn) {
34 console.log('Trying to submit comment', comment);
35 setTimeout(function() { // émulation d'un comportement asynchrone (appel d'API, etc).
36 if(confirm('Should submit?')) {
37 continueSubmitFn();
38 } else {
39 cancelFn('Some optional error message');
40 }
41 }, 1000);
42 },
43 onCommentsRendered: function(comments) {
44 // comments est trié selon le tri par défaut de la page qui peut être "Most Relevant" (ex : le plus voté, etc.) ou "Newest First"
45 const topCommentInList = comments[0];
46 console.log('First Comment Rendered:', topCommentInList.avatarSrc, topCommentInList.commenterName, topCommentInList.commentHTML);
47 }
48 }];
49</script>
50

Titres de page Internal Link

Le titre actuel de la page est associé à l'urlId spécifié et enregistré pour être utilisé dans les outils de modération.

Par défaut, il est récupéré depuis document.title.

Si vous le souhaitez, vous pouvez spécifier votre propre titre de page comme suit :

Specifying The Page Title
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "pageTitle": "Article 42"
8}];
9</script>
10

Le compteur de commentaires et le comptage de toutes les réponses imbriquées Internal Link

Le nombre de commentaires affiché en haut du widget de commentaires peut soit afficher tous les commentaires "de premier niveau", c'est-à-dire les réponses qui sont des réponses directement à la page ou à l'article lui-même, soit il peut s'agir d'un décompte de tous les commentaires imbriqués.

Par défaut, c'est true — il s'agit du décompte de ce dernier cas — tous les commentaires. Dans les anciennes versions du widget de commentaires la valeur par défaut est false.

Nous pouvons modifier le comportement, de sorte qu'il s'agisse d'un décompte de tous les commentaires imbriqués en définissant le drapeau countAll sur true.

Counting All Comments
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "countAll": true
8}];
9</script>
10

Si nous voulions que le décompte reflète uniquement les commentaires de premier niveau, nous réglons le drapeau sur false.

Counting Top Level Comments
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "countAll": false
8}];
9</script>
10

Cela ne peut actuellement pas être personnalisé sans modifications du code.

Mentionner les IDs de groupe Internal Link

Une liste d'ids à utiliser pour l'autocomplétion des @mentions. Utile lorsque vous souhaitez empêcher de taguer des utilisateurs qui n'ont pas de groupes communs.

Si spécifié, seuls les utilisateurs appartenant à d'autres groupes seront proposés dans l'autocomplétion après avoir tapé le caractère @.

Limit Groups for Mentions
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "mentionGroupIds": [
8 "yxZAhjzda",
9 "QT19nXbqB"
10 ]
11}];
12</script>
13