Live reacties toevoegen aan Framer-sites

Open eerst de editor voor je site.

In ons voorbeeld voegen we FastComments toe aan onze blogpagina's, maar elk type pagina zou moeten werken.

Editor openen

Laten we nu een Embed-blok toevoegen.

Ga naar Insert linksboven:

Klik op Insert

Scroll vervolgens naar beneden in de linkerzijbalk en beweeg de muis over Utility.

Vervolgens wil je klik en sleep het Embed-blok naar het einde van je blog.

Het is belangrijk dat je klik en sleep zoals getoond, en het niet alleen aanklikt. Als je het alleen aanklikt, voegt Framer het buiten je blog in en moet je het later verplaatsen.

Zoek Embed-widget

Sleep en plaats Embed-widget

Nu heb je een lege Embed-widget, en wanneer je deze selecteert verschijnt er een zijbalk aan de rechterkant. Je kunt de zijbalk uitvouwen, en je ziet iets zoals dit:

Open Embed-instellingen

Laten we nu het type van het Embed-widget wijzigen naar HTML:

Instellen als HTML-widget

Je bent nu klaar voor het FastComments Framer-codefragment in de volgende stap.

Het FastComments-fragment voor Framer Live Comments staat hieronder.

FastComments Framer-specifiek Reactiesfragment

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 // sommige providers wijzigen het codefragment zodat het asynchroon wordt

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

Of je kunt in plaats daarvan de Streaming Chat-widget gebruiken. Het FastComments-fragment voor Framer Streaming Chat is:

FastComments Framer-specifiek Streaming Chat-fragment

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 // sommige providers wijzigen het codefragment zodat het asynchroon wordt

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 ondersteunt de Framer-editor, dus je zou iets dergelijks moeten zien zodra je de code plakt (mogelijk moet je op Publish klikken):

Voorbeeld van de reacties-widget

Wanneer je nu je site bekijkt, zou je het reactiegebied moeten zien! In de zijbalk van Framer kun je het widget ook op volledige breedte instellen, indien gewenst.

Houd er rekening mee dat Framer de hoogte van widgets beperkt en geen automatische grootte-aanpassing ondersteunt, daarom hebben we hier gekozen voor de Live Chat-widget omdat deze een vaste hoogte heeft.

We kunnen de positionering van de widget verbeteren door twee dingen te doen.

Ten eerste: stel in het linkerpaneel de hoogte van de widget in op fill en 1fr:

Hoogte Comment Widget

Vervolgens moeten we de standaard Framer paginaconfiguratie aanpassen. Standaard wordt de paginahoogte op een vaste grootte ingesteld, waardoor commentaarthreads kunnen worden afgesneden. Dus laten we dit ook instellen op fill.

Paginahoogte Instellen

Mogelijk moet je experimenteren met de paginahoogte om het naar wens te krijgen.

FastComments is ontworpen om aangepast te worden zodat het bij uw site past.

Als u aangepaste styling wilt toevoegen, of de configuratie wilt aanpassen, Bekijk onze documentatie over aanpassingen en configuratie om te leren hoe.