Add Live Commenting to Framer Sites

Per prima cosa, apri l'editor del tuo sito.

Nel nostro esempio aggiungeremo FastComments alle pagine del nostro Blog, ma qualsiasi tipo di pagina dovrebbe funzionare.

Apri l'editor

Ora aggiungiamo un blocco Embed.

Vai su Insert in alto a sinistra:

Fai clic su Insert

Poi scorri verso il basso la barra laterale sinistra e passa il mouse su Utility.

Ora dovrai fare clic e trascinare il blocco Embed fino alla fine del tuo blog.

È importante fare clic e trascinare come mostrato, e non limitarsi a cliccarlo. Se lo clicchi soltanto, Framer lo inserirà al di fuori del tuo blog e dovrai spostarlo manualmente in seguito.

Individua il widget Embed

Trascina e rilascia il widget Embed

Ora avrai un widget Embed vuoto, e quando lo selezioni apparirà una barra laterale sulla destra. Puoi espandere la barra laterale e vedrai qualcosa del genere:

Apri le impostazioni del widget Embed

Ora cambiamo il tipo di widget Embed in HTML:

Imposta come widget HTML

Ora sei pronto per lo snippet di codice FastComments per Framer nel passo successivo.

Lo snippet FastComments per i Live Comments di Framer è riportato qui sotto.

Snippet FastComments specifico per Framer (Commenti)

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 // alcuni provider modificano lo snippet di codice rendendolo asincrono

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

Or, alternatively, you can use the Streaming Chat widget. The Framer Streaming Chat FastComments snippet is:

Snippet FastComments specifico per Framer (Streaming Chat)

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 // alcuni provider modificano lo snippet di codice rendendolo asincrono

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 supports the Framer editor, so you should see something like this once you paste the code in (you might have to click Publish):

Anteprima del widget dei commenti

Now when you view your site you should see the comment area! In the sidebar of Framer you can set the widget as full width as well, if desired.

Note that Framer limits the height of widgets and does not support auto-resizing, so we've chosen the Live Chat

widget here since it is fixed height.

Possiamo migliorare il posizionamento del widget facendo due cose.

Per prima cosa, nel pannello a sinistra, imposta l'altezza del widget su fill e 1fr:

Altezza del widget dei commenti

Successivamente dobbiamo correggere la configurazione predefinita della pagina di Framer. Per impostazione predefinita imposta l'altezza della pagina a una dimensione fissa, che può troncare i thread dei commenti. Quindi impostiamola anche su fill.

Imposta l'altezza della pagina

Potrebbe essere necessario regolare l'altezza della pagina per ottenerla come desideri.

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.