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 la barra laterale sinistra verso il basso e passa il mouse su Utility.

Successivamente vorrai cliccare e trascinare il blocco Utility fino alla fine del tuo blog.

È importante che tu clicchi e trascini come mostrato, e non semplicemente faccia clic. Se fai solo clic, Framer lo inserirà al di fuori del tuo blog e dovrai spostarlo 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 a destra. Puoi espandere la barra laterale e vedrai qualcosa di simile a questo:

Apri le impostazioni di Embed

Ora cambiamo il tipo del widget Embed in HTML:

Imposta come widget HTML

Ora sei pronto per lo snippet di codice FastComments per Framer nel passaggio 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.