Add Live Commenting to Framer Sites

Primero, abra el editor de su sitio.

En nuestro ejemplo añadiremos FastComments a las páginas de nuestro blog, pero cualquier tipo de página debería funcionar.

Abrir editor

Ahora, añadamos un bloque Embed.

Ve a Insert en la esquina superior izquierda:

Haz clic en Insert

Luego desplázate hacia abajo en la barra lateral izquierda y pasa el cursor sobre Utility.

A continuación querrás hacer clic y arrastrar el bloque Utility hasta el final de tu blog.

Es importante que hagas clic y arrastres como se muestra, y no solo hacer clic en él. Si solo haces clic, Framer lo insertará fuera de tu blog y tendrás que arrastrarlo después.

Localiza el widget Embed

Arrastra y suelta el widget Embed

Ahora tendrás un widget Embed vacío, y cuando lo selecciones obtendrás una barra lateral a la derecha. Puedes expandir la barra lateral, y verás algo como esto:

Abre la configuración del Embed

Ahora cambiemos el tipo de widget Embed a HTML:

Configurar como widget HTML

Ahora estás listo para el fragmento de código de FastComments para Framer en el siguiente paso.

The Framer Live Comments FastComments snippet is below.

Fragmento de FastComments específico para Framer: Comentarios

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 // algunos proveedores cambian el fragmento de código para que sea asíncrono

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:

Fragmento de FastComments específico para Framer: Streaming Chat

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 // algunos proveedores cambian el fragmento de código para que sea asíncrono

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 supports the Framer editor, so you should see something like this once you paste the code in (you might have to click Publish):

Vista previa del widget de comentarios

Now when you view your site you should see the comment area! In the sidebar of Framer you can set the widget as full width as well, if desired.

Note that Framer limits the height of widgets and does not support auto-resizing, so we've chosen the Live Chat widget here since it is fixed height.

Podemos mejorar la posición del widget haciendo dos cosas.

Primero, en el panel izquierdo, establece la altura del widget en fill y 1fr:

Altura del widget de comentarios

A continuación, necesitamos corregir la configuración predeterminada de la página en Framer. Por defecto establece la altura de la página en un tamaño fijo, lo que puede recortar los hilos de comentarios. Así que establezcamos esto en fill, también.

Establecer la altura de la página

Puede que tengas que ajustar la altura de la página hasta obtener el resultado que deseas.

FastComments está diseñado para personalizarse para que coincida con tu sitio.

Si deseas agregar estilos personalizados o ajustar la configuración, Consulta nuestra Documentación de personalización para aprender cómo.