Aggiungi commenti in tempo reale ai siti Framer

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 di seguito.

Snippet Commenti FastComments Specifico per Framer

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 // some providers change the code snippet to be 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

In alternativa, puoi utilizzare il widget Streaming Chat. Lo snippet FastComments per lo Streaming Chat di Framer è:

Snippet Streaming Chat FastComments Specifico per Framer

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 // some providers change the code snippet to be async

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 supporta l'editor di Framer, quindi una volta incollato il codice dovresti vedere qualcosa di simile (potresti dover cliccare su Publish):

Anteprima del Widget Commenti

Ora, quando visualizzerai il tuo sito, dovresti vedere l'area dei commenti! Nella barra laterale di Framer puoi anche impostare il widget a larghezza piena, se desiderato.

Tieni presente che Framer limita l'altezza dei widget e non supporta il ridimensionamento automatico, quindi qui abbiamo scelto il widget Live Chat poiché ha un'altezza fissa.

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.