Add Live Commenting to Framer Sites

Tout d'abord, ouvrez l'éditeur de votre site.

Dans notre exemple, nous allons ajouter FastComments aux pages de notre blog, mais tout type de page devrait fonctionner.

Ouvrir l'éditeur

Now, ajoutons un bloc Embed.

Allez dans Insert en haut à gauche:

Cliquez sur Insert

Ensuite, faites défiler la barre latérale gauche vers le bas et survolez Utility.

Ensuite, vous devrez cliquer et faire glisser le bloc Embed jusqu'à la fin de votre blog.

Il est important que vous cliquiez et fassiez glisser comme montré, et pas seulement que vous cliquiez dessus. Si vous vous contentez de cliquer, Framer l'insérera en dehors de votre blog et vous devrez le déplacer ensuite.

Repérez le widget Embed

Glisser-déposer le widget Embed

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

Ouvrez les paramètres du widget Embed

Changeons maintenant le type de 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 Framer Live Comments se trouve ci-dessous.

Extrait FastComments spécifique à Framer — Widget de 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, vous devriez donc voir quelque chose comme ceci une fois que vous aurez collé le code (il se peut que vous deviez cliquer sur Publish) :

Aperçu du widget de commentaires

Maintenant, lorsque 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, nous avons donc choisi le Live Chat widget ici car il a une hauteur fixe.

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

First, on the left pane, set the widget's height to fill and 1fr:

Hauteur du widget de commentaires

Next we need to fix the default Framer page config. By default it sets the page height to a fixed size, which can cut off comment threads. So let's set this to fill, too.

Définir la hauteur de la page

You may have to play with the page height to get it how you want it.

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

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