Add Live Commenting to Framer Sites

Først skal du åbne editoren for dit websted.

I vores eksempel vil vi tilføje FastComments til vores blog-sider, men enhver type side bør fungere.

Åbn editor

Nu skal vi tilføje en Embed-blok.

Gå til Insert øverst til venstre:

Klik på Insert

Rul derefter sidebjælken i venstre side ned og hold musen over Utility.

Dernæst skal du klikke og trække Utility-blokken til slutningen af din blog.

Det er vigtigt, at du klikker og trækker som vist, og ikke kun klikker på den. Hvis du kun klikker, indsætter Framer den uden for din blog, og du bliver nødt til at trække den på plads senere.

Find Embed-widget

Træk og slip Embed-widgeten

Nu har du en tom Embed-widget, og når du vælger den, får du et sidepanel til højre. Du kan udvide sidepanelet, og du vil se noget lignende dette:

Åbn Embed-indstillinger

Lad os nu ændre Embed-widget-typen til HTML:

Indstil som HTML-widget

Nu er du klar til FastComments Framer-kodesnippet i næste trin.

Framer Live Comments FastComments-udsnittet er vist nedenfor.

FastComments Framer-specifikt kommentarudsnit

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 // nogle udbydere ændrer kodeudsnittet til at være 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

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

FastComments Framer-specifikt streaming-chat-udsnit

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 // nogle udbydere ændrer kodeudsnittet til at være 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 understøtter Framer-editoren, så du bør se noget lignende, når du indsætter koden (du skal muligvis klikke på Publish):

Forhåndsvisning af kommentar-widget

Når du nu besøger dit site, bør du se kommentarsektionen! I sidebjælken i Framer kan du også angive widget'en til fuld bredde, hvis du ønsker det.

Bemærk, at Framer begrænser højden af widgets og ikke understøtter automatisk ændring af størrelse, så vi har valgt Live Chat-widget'en her, da den har en fast højde.

Vi kan forbedre widget'ens placering ved at gøre to ting.

Først, i venstre panel, sæt widget'ens højde til fill og 1fr:

Kommentar-widget højde

Dernæst skal vi rette standard Framer-sidekonfigurationen. Som standard sætter den sidehøjden til en fast størrelse, hvilket kan afskære kommentartråde. Så lad os sætte denne til fill også.

Indstil sidehøjde

Du kan blive nødt til at justere sidehøjden for at få den, som du ønsker.

FastComments er designet til at kunne tilpasses, så det matcher dit site.

Hvis du gerne vil tilføje brugerdefineret styling eller justere konfigurationen, se vores tilpasningsdokumentation for at lære hvordan.