Add Live Commenting to Bubble.io Sites

Tout d'abord, accédez à la page/mise en page où vous souhaitez ajouter FastComments. Dans l'éditeur Bubble, faites glisser et déposez un élément HTML depuis la barre latérale Éléments visuels sur votre page.

Ajouter un élément HTML

L'élément HTML vous permettra d'intégrer le widget FastComments directement dans votre application Bubble.

Cliquez sur l'élément HTML que vous venez d'ajouter. Dans l'éditeur de propriétés qui apparaît, collez le code suivant dans le champ HTML :

Extrait de code pour commentaires en direct Bubble.io

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>

3<div id="fastcomments-widget" style="width: 100%;height: 100%;"></div>

4<script>

5 (function fcLoad() {

6 function tryLoad() {

7 // Bubble a tendance à modifier l'extrait de code pour le rendre asynchrone

8 const container = document.getElementById('fastcomments-widget');

9 if (!container) {

10 return waitRetry();

11 }

12 if (!window.FastCommentsUI) {

13 return waitRetry();

14 }

15 if (container.fastCommentsSetup) {

16 return;

17 }

18 window.FastCommentsUI(container, {

19 tenantId: 'demo',

20 pageTitle: top.document.title,

21 url: top.location.href,

22 urlId: top.location.pathname

23 });

24 container.fastCommentsSetup = true;

25 }

26 function waitRetry() {

27 setTimeout(tryLoad, 500);

28 }

29 tryLoad();

30 })();

31</script>

32

Insérer le code FastComments

Remarque : Ce code inclut un mécanisme de réessai pour s'assurer que FastComments se charge correctement dans l'environnement dynamique de Bubble. Les autres extraits de code ne fonctionneront pas.

N'oubliez pas de remplacer 'demo' par votre FastComments tenant ID réel après votre inscription. Si vous êtes connecté à FastComments.com, il devrait déjà être remplacé.

Pour que le widget de commentaires s'affiche correctement, nous devons ajuster la largeur de l'élément HTML. Cherchez l'onglet Mise en page dans l'éditeur de propriétés de l'élément.

Trouver le réglage de la largeur

L'onglet Mise en page contient des options de dimensionnement importantes qui aideront notre widget de commentaires à s'afficher correctement sur différentes tailles d'écran.

Dans l'onglet Mise en page, définissez la largeur à 100%. Cela garantit que le widget de commentaires occupe toute la largeur de son conteneur et s'adapte correctement aux différentes tailles d'écran.

Définir la largeur à 100%

Après avoir modifié la valeur de l'entrée à 100 (ou au pourcentage désiré), vous devrez cliquer sur le menu déroulant à côté du nombre pour le changer de pixels en pourcentage.

Définissez également une hauteur minimale (p. ex., 400px) pour vous assurer que le widget de commentaires dispose de suffisamment d'espace pour s'afficher correctement.

Après avoir effectué ces modifications, cliquez sur le bouton Aperçu pour voir votre widget FastComments en action!

Bon travail ! Vous avez ajouté la fonctionnalité de commentaires en direct à votre site Bubble.io.

Si vous avez rencontré une erreur d'autorisation, ou si vous souhaitez personnaliser FastComments, lisez la suite.

FastComments est conçu pour être personnalisé afin de s'harmoniser avec votre site.

Si vous souhaitez ajouter des styles personnalisés ou ajuster la configuration, Consultez notre documentation sur la personnalisation pour savoir comment.