Add Live Commenting to Bubble.io Sites

Tout d'abord, rendez-vous sur 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 Visual Elements sur votre page.

Ajouter un élément HTML

L'élément HTML nous 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 garantir 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 identifiant de locataire FastComments après l'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. Recherchez 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 importantes de dimensionnement 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 d'entrée à 100 (ou au pourcentage souhaité), vous devrez cliquer sur le menu déroulant à côté du nombre pour passer de pixels à pourcentage.

Réglez également une hauteur minimale (par exemple, 400px) pour vous assurer que le widget de commentaires dispose de suffisamment d'espace pour s'afficher correctement.

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

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

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

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

Si vous souhaitez ajouter un style personnalisé ou modifier la configuration, Consultez notre documentation sur la personnalisation pour savoir comment.