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

Maintenant, ajoutons un bloc Embed.

Go to Insert in the top left:

Cliquez sur Insert

Then scroll the left hand sidebar down and mouse over Utility.

Next you'll want to click and drag the Utility block to the end of your blog.

It's important you click and drag as shown, and not just click it. If you just click it, then Framer will insert it outside of your blog and you'll have to drag it around later.

Localiser le widget Embed

Glisser-déposer le widget Embed

Now you'll have an empty Embed widget, and when you select it you'll get a sidebar on the right. You can expand the sidebar, and you'll see something like this:

Ouvrir les paramètres du widget Embed

Now let's change the Embed widget type to HTML:

Définir comme widget HTML

Now you're ready for the FastComments Framer Code snippet in the next step.

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.