Add Live Commenting to Framer Sites

D'abord, ouvrez l'éditeur de votre site.

Dans notre exemple, nous ajouterons FastComments à nos pages de blog, mais tout type de page devrait fonctionner.

Ouvrir l'éditeur

Ajoutons maintenant un bloc Embed.

Allez dans Insert en haut à gauche:

Cliquez sur Insert

Faites défiler la barre latérale gauche vers le bas et survolez Utility.

Ensuite, vous devrez cliquer et glisser le bloc Utility jusqu'à la fin de votre blogue.

Il est important de cliquer et glisser comme montré, et de ne pas simplement cliquer dessus. Si vous vous contentez de cliquer, Framer l'insérera en dehors de votre blogue et vous devrez le déplacer ensuite.

Repérer le widget Embed

Glisser-déposer le widget Embed

Vous aurez maintenant un widget Embed vide, et lorsque vous le sélectionnez, une barre latérale apparaîtra à droite. Vous pouvez développer la barre latérale, et vous verrez quelque chose comme ceci :

Ouvrir les paramètres Embed

Changeons maintenant le type du widget Embed en HTML:

Définir comme widget HTML

Vous êtes maintenant prêt pour l'extrait de code FastComments Framer à l'étape suivante.

L'extrait FastComments pour les commentaires Framer est ci‑dessous.

Extrait FastComments spécifique à Framer : commentaires

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 // certains fournisseurs modifient 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

Or, alternatively, you can use the Streaming Chat widget. The Framer Streaming Chat FastComments snippet is:

Extrait FastComments spécifique à Framer : chat en direct

Copy

1

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

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

4<script>

5 (function fcLoad() {

6

7 function tryLoad() {

8 // certains fournisseurs modifient l'extrait de code pour le rendre asynchrone

9 const container = document.getElementById('fastcomments-live-chat-widget');

10 if (!container) {

11 return waitRetry();

12 }

13 if (!window.FastCommentsLiveChat) {

14 return waitRetry();

15 }

16 if (container.fastCommentsSetup) {

17 return;

18 }

19 window.FastCommentsLiveChat(container, {

20 tenantId: 'demo',

21 pageTitle: top.document.title,

22 url: top.location.href,

23 urlId: top.location.pathname

24 });

25 container.fastCommentsSetup = true;

26 }

27 function waitRetry() {

28 setTimeout(tryLoad, 500);

29 }

30 tryLoad();

31 })();

32</script>

33

FastComments prend en charge l'éditeur Framer, donc vous devriez voir quelque chose comme ceci une fois que vous avez collé le code (vous devrez peut‑être cliquer sur Publish) :

Aperçu du widget de commentaires

Désormais, quand vous consultez votre site, vous devriez voir la zone de commentaires ! Dans la barre latérale de Framer, vous pouvez également définir le widget en pleine largeur, si vous le souhaitez.

Notez que Framer limite la hauteur des widgets et ne prend pas en charge le redimensionnement automatique, donc nous avons choisi le Chat en direct widget ici puisque sa hauteur est fixe.

Nous pouvons améliorer le positionnement du widget en faisant deux choses.

Premièrement, dans le panneau de gauche, définissez la hauteur du widget sur fill et 1fr :

Hauteur du widget de commentaires

Ensuite, nous devons corriger la configuration de page par défaut de Framer. Par défaut, elle définit la hauteur de la page à une taille fixe, ce qui peut tronquer les fils de commentaires. Réglons donc celle-ci sur fill aussi.

Définir la hauteur de la page

Il se peut que vous deviez ajuster la hauteur de la page pour obtenir le résultat souhaité.

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

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