Add Live Commenting to Bubble.io Sites

Per prima cosa, vai alla pagina/layout in cui vuoi aggiungere FastComments. Nell'editor di Bubble, trascina e rilascia un elemento HTML dalla barra laterale Visual Elements sulla tua pagina.

Aggiungi elemento HTML

L'elemento HTML ci permetterà di incorporare il widget FastComments direttamente nella tua app Bubble.

Fai clic sull'elemento HTML che hai appena aggiunto. Nell'editor delle proprietà che appare, incolla il seguente codice nel campo HTML:

Snippet di codice per commenti live di 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 tende a cambiare il frammento di codice rendendolo 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

Inserisci il codice FastComments

Nota: Questo codice include un meccanismo di ritentativo per garantire che FastComments si carichi correttamente nell'ambiente dinamico di Bubble. Altri frammenti di codice non funzioneranno.

Ricorda di sostituire 'demo' con il tuo reale tenant ID di FastComments dopo esserti registrato. Se hai eseguito l'accesso su FastComments.com, dovrebbe essere già sostituito.

Per garantire che il widget dei commenti venga visualizzato correttamente, dobbiamo regolare la larghezza dell'elemento HTML. Cerca la scheda Layout nell'editor delle proprietà dell'elemento.

Trova l'impostazione della larghezza

La scheda Layout contiene opzioni di ridimensionamento importanti che aiuteranno il nostro widget dei commenti a essere visualizzato correttamente su diverse dimensioni di schermo.

Nella scheda Layout, imposta la larghezza su 100%. Questo assicura che il widget dei commenti occupi l'intera larghezza del suo contenitore e si adatti correttamente a diverse dimensioni dello schermo.

Imposta la larghezza su 100%

After changing the input value to 100 (or the desired percentage) you'll have to click the dropdown next to the number to change it from pixels to percentage.

Also, set a minimum height (e.g., 400px) to ensure the comment widget has enough space to display properly.

After making these changes, click the Preview button to see your FastComments widget in action!

Ottimo lavoro! Hai aggiunto i commenti in tempo reale al tuo sito Bubble.io.

Se hai riscontrato un errore di permesso negato, o desideri personalizzare FastComments, continua a leggere.

FastComments è progettato per essere personalizzato per adattarsi al tuo sito.

Se desideri aggiungere stili personalizzati o modificare la configurazione, Consulta la nostra documentazione sulle personalizzazioni per scoprire come.