Add Live Commenting to Bubble.io Sites

Primeiro, navegue até a página/layout onde você quer adicionar o FastComments. No editor do Bubble, arraste e solte um elemento HTML da barra lateral Visual Elements na sua página.

Adicionar Elemento HTML

O elemento HTML permitirá que incorporemos o widget do FastComments diretamente no seu app Bubble.

Clique no elemento HTML que você acabou de adicionar. No editor de propriedades que aparecer, cole o código a seguir no campo HTML:

Trecho de Código de Comentários ao Vivo do 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 // o Bubble tende a alterar o trecho de código para ser assí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

Inserir o Código do FastComments

Observação: Este código inclui um mecanismo de tentativa/repetição para garantir que o FastComments seja carregado corretamente no ambiente dinâmico do Bubble. Outros trechos de código não funcionarão.

Lembre-se de substituir 'demo' pelo ID do seu tenant do FastComments após se cadastrar. Se você estiver logado no FastComments.com, isso já deverá ter sido substituído.

Para garantir que o widget de comentários seja exibido corretamente, precisamos ajustar a largura do elemento HTML. Procure a guia Layout no editor de propriedades do elemento.

Localizar configuração de largura

A guia Layout contém opções importantes de dimensionamento que ajudarão o widget de comentários a ser exibido corretamente em diferentes tamanhos de tela.

Na aba Layout, defina a largura para 100%. Isso garante que o widget de comentários ocupe toda a largura do seu contêiner e responda corretamente a diferentes tamanhos de tela.

Defina a largura para 100%

Depois de alterar o valor de entrada para 100 (ou a porcentagem desejada) você terá que clicar no menu suspenso ao lado do número para alterá-lo de pixels para porcentagem.

Além disso, defina uma altura mínima (por exemplo, 400px) para garantir que o widget de comentários tenha espaço suficiente para exibir corretamente.

Depois de fazer essas alterações, clique no botão Visualizar para ver seu widget do FastComments em ação!

Bom trabalho! Você adicionou comentários em tempo real ao seu site Bubble.io.

Se você encontrou um erro de permissão negada, ou gostaria de personalizar o FastComments, continue lendo.

O FastComments foi projetado para ser personalizado para combinar com o seu site.

Se você quiser adicionar estilos personalizados ou ajustar a configuração, Confira nossa Documentação de Personalização para saber como.