Add Live Commenting to Bubble.io Sites

Primero, navega a la página/diseño donde quieres añadir FastComments. En el editor de Bubble, arrastra y suelta un elemento HTML desde la barra lateral Visual Elements en tu página.

Añadir elemento HTML

El elemento HTML nos permitirá incrustar el widget de FastComments directamente en tu aplicación de Bubble.

Haz clic en el elemento HTML que acabas de añadir. En el editor de propiedades que aparece, pega el siguiente código en el campo HTML:

Fragmento de código para comentarios en vivo de Bubble.io

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 // Bubble suele cambiar 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

Insertar el código de FastComments

Nota: Este código incluye un mecanismo de reintento para asegurar que FastComments se cargue correctamente en el entorno dinámico de Bubble. Otros fragmentos de código no funcionarán.

Recuerda reemplazar 'demo' con el ID de tenant real de FastComments después de registrarte. Si has iniciado sesión en FastComments.com, ya debería estar reemplazado.

Para asegurarnos de que el widget de comentarios se muestre correctamente, necesitamos ajustar el ancho del elemento HTML. Busque la pestaña Diseño en el editor de propiedades del elemento.

Encontrar la configuración de ancho

La pestaña Diseño contiene opciones importantes de tamaño que ayudarán a que nuestro widget de comentarios se muestre correctamente en diferentes tamaños de pantalla.

En la pestaña Diseño, establece el ancho en 100%. Esto asegura que el widget de comentarios ocupe todo el ancho de su contenedor y responda correctamente a los diferentes tamaños de pantalla.

Establecer el ancho al 100%

Después de cambiar el valor de entrada a 100 (o al porcentaje deseado) tendrás que hacer clic en el desplegable junto al número para cambiarlo de píxeles a porcentaje.

Además, establece una altura mínima (p. ej., 400px) para asegurarte de que el widget de comentarios tenga suficiente espacio para mostrarse correctamente.

Después de realizar estos cambios, haz clic en el botón Vista previa para ver tu widget de FastComments en acción!

¡Buen trabajo! Has añadido comentarios en vivo a tu sitio de Bubble.io.

Si te has encontrado con un error de permiso denegado, o te gustaría personalizar FastComments, sigue leyendo.

FastComments está diseñado para personalizarse y adaptarse a su sitio.

Si desea agregar estilos personalizados, o ajustar la configuración, Consulte nuestra Documentación de Personalización para saber cómo.