Tilføj live-kommentarer til Framer-sider

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 i øverste venstre hjørne:

Klik på Insert

Rul ned i venstre sidepanel og før musen over Utility.

Derefter skal du klikke og trække Embed-blokken til slutningen af din blog.

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

Find Embed-widget

Træk og slip Embed-widget

Nu vil du have 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

Nu skifter vi Embed widget-typen til HTML:

Indstil som HTML-widget

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

FastComments Framer Live Comments-snippeten er nedenfor.

FastComments Framer-specifik kommentar-snippet

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

Alternativt kan du bruge Streaming Chat-widgetten. FastComments Framer Streaming Chat-snippeten er:

FastComments Framer-specifik Streaming Chat-snippet

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 understøtter Framer-editoren, så du bør se noget i stil med dette, når du indsætter koden (du skal muligvis klikke på Publish):

Forhåndsvisning af kommentar-widget

Når du nu ser dit websted, bør du se kommentarområdet! I Framers sidebjælke kan du desuden indstille widgetten til fuld bredde, hvis ønsket.

Bemærk, at Framer begrænser højden på widgets og ikke understøtter automatisk tilpasning af størrelsen, så vi har valgt Live Chat-widgetten her, da den har 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.