Add Live Commenting to Framer Sites

Primeiro, abra o editor do seu site.

No nosso exemplo, vamos adicionar o FastComments às páginas do nosso blog, mas qualquer tipo de página deve funcionar.

Abrir Editor

Agora, vamos adicionar um bloco Embed.

Vá para Insert no canto superior esquerdo:

Clique em Insert

Em seguida, role a barra lateral esquerda para baixo e passe o mouse sobre Utility.

Em seguida, você vai querer clicar e arrastar o bloco Utility até o final do seu blog.

É importante que você clique e arraste como mostrado, e não apenas clique. Se você apenas clicar, o Framer o inserirá fora do seu blog e você terá que arrastá-lo depois.

Localize o widget Embed

Arraste e solte o widget Embed

Agora você terá um widget Embed vazio, e ao selecioná-lo verá uma barra lateral à direita. Você pode expandir a barra lateral, e verá algo como isto:

Abra as configurações do Embed

Agora vamos alterar o tipo do widget Embed para HTML:

Definir como Widget HTML

Agora você está pronto para o snippet de código do FastComments para Framer no próximo passo.

O trecho do FastComments para Comentários Ao Vivo no Framer está abaixo.

Trecho FastComments específico para Framer - Comentários

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 // alguns provedores alteram o trecho de código para torná-lo 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

Ou, alternativamente, você pode usar o widget de Chat em Tempo Real. O trecho do FastComments para Chat em Tempo Real no Framer é:

Trecho FastComments específico para Framer - Chat em Tempo Real

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 // alguns provedores alteram o trecho de código para torná-lo assí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

O FastComments oferece suporte ao editor Framer, então você deve ver algo assim depois de colar o código (pode ser que você precise clicar em Publish):

Visualização do Widget de Comentários

Agora, quando você visualizar seu site, deve ver a área de comentários! Na barra lateral do Framer você também pode definir o widget como largura total, se desejar.

Observe que o Framer limita a altura dos widgets e não suporta redimensionamento automático, então escolhemos aqui o widget de Chat ao Vivo, pois ele tem altura fixa.

Podemos melhorar o posicionamento do widget fazendo duas coisas.

Primeiro, no painel esquerdo, defina a altura do widget para fill e 1fr:

Altura do Widget de Comentários

Em seguida precisamos corrigir a configuração de página padrão do Framer. Por padrão ela define a altura da página para um tamanho fixo, o que pode cortar encadeamentos de comentários. Então vamos definir isto como fill, também.

Definir Altura da Página

Talvez você precise ajustar a altura da página até ficar do jeito que deseja.

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 Customização para saber como.