Agregar Comentarios en Vivo a Sitios Framer

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 coloca el cursor sobre Utility.

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

Es importante que hagas clic y arrastres como se muestra, y no solo lo pulses. Si solo lo pulsas, Framer lo insertará fuera de tu blog y tendrás que moverlo después.

Ubica el widget Embed

Arrastra y suelta el widget Embed

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

Abre la configuración del widget Embed

Ahora cambiemos el tipo de widget Embed a HTML:

Configura como widget HTML

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

El snippet de FastComments para Live Comments en Framer se muestra a continuación.

Snippet de Comentarios Específico para Framer de FastComments

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 // some providers change the code snippet to be async

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

O, alternativamente, puedes usar el widget de Streaming Chat. El snippet de FastComments para Streaming Chat en Framer es:

Snippet de Streaming Chat Específico para Framer de FastComments

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 // some providers change the code snippet to be async

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 es compatible con el editor de Framer, por lo que deberías ver algo como esto una vez que pegues el código (es posible que tengas que hacer clic en Publish):

Vista previa del Widget de Comentarios

Ahora, cuando veas tu sitio, ¡deberías ver el área de comentarios! En la barra lateral de Framer también puedes configurar el widget a ancho completo, si lo deseas.

Ten en cuenta que Framer limita la altura de los widgets y no admite el redimensionamiento automático, por lo que aquí hemos elegido el widget de Live Chat ya que tiene una altura fija.

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.