Add Live Commenting to Framer Sites

Met FastComments kunnen we eenvoudig live reacties toevoegen aan elke site die met Framer is gebouwd.

In deze tutorial behandelen we alleen het installeren van de Live Commenting-widget. Als u hulp nodig heeft bij het installeren van andere widgets, of bij het instellen van SSO, neem gerust contact op via een supportticket.

Stap 1: Open de editor

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

Stap 2: Voeg een embed-blok toe

Laten we nu een Embed blok toevoegen.

Ga naar Insert linksboven:

Klik op Insert

Scroll vervolgens de linkerzijbalk naar beneden en ga met de muis over Utility.

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

Het is belangrijk dat je klik en sleep doet zoals getoond, en niet alleen klikt. Als je er alleen op klikt, zal Framer het invoegen buiten je blog en moet je het later verplaatsen.

Vind het Embed-widget

Sleep en zet het Embed-widget neer

Nu heb je een leeg Embed-widget, en wanneer je het selecteert krijg je een zijbalk aan de rechterkant. Je kunt de zijbalk uitvouwen, en je ziet zoiets als dit:

Open Embed-instellingen

Laten we nu het type van het Embed widget veranderen naar HTML:

Instellen als HTML-widget

Nu ben je klaar voor de FastComments Framer Code snippet in de volgende stap.

Stap 3: Kopieer en plak Framer-specifieke FastComments-code

Het FastComments-fragment voor Framer Live Comments staat hieronder.

FastComments Framer-specifiek Reactiesfragment

Copy

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<div id="fastcomments-widget" style="width: 100%;height: 100%;"></div>
<script>
    (function fcLoad() {
        function tryLoad() {
            // sommige providers wijzigen het codefragment zodat het asynchroon wordt
            const container = document.getElementById('fastcomments-widget');
            if (!container) {
                return waitRetry();
            }
            if (!window.FastCommentsUI) {
                return waitRetry();
            }
            if (container.fastCommentsSetup) {
                return;
            }
            window.FastCommentsUI(container, {
                tenantId: 'demo',
                pageTitle: top.document.title,
                url: top.location.href,
                urlId: top.location.pathname
            });
            container.fastCommentsSetup = true;
        }
        function waitRetry() {
            setTimeout(tryLoad, 500);
        }
        tryLoad();
    })();
</script>

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

<script src="https://cdn.fastcomments.com/js/embed-live-chat.min.js"></script>
<div id="fastcomments-live-chat-widget" style="width: 100%;height: 100%;"></div>
<script>
    (function fcLoad() {
        function tryLoad() {
            // sommige providers wijzigen het codefragment zodat het asynchroon wordt
            const container = document.getElementById('fastcomments-live-chat-widget');
            if (!container) {
                return waitRetry();
            }
            if (!window.FastCommentsLiveChat) {
                return waitRetry();
            }
            if (container.fastCommentsSetup) {
                return;
            }
            window.FastCommentsLiveChat(container, {
                tenantId: 'demo',
                pageTitle: top.document.title,
                url: top.location.href,
                urlId: top.location.pathname
            });
            container.fastCommentsSetup = true;
        }
        function waitRetry() {
            setTimeout(tryLoad, 500);
        }
        tryLoad();
    })();
</script>

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.

Stap 4: Pas de hoogte van widget en pagina aan

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

First, on the left pane, set the widget's height to fill and 1fr:

Hoogte van de Comment-widget

Next we need to fix the default Framer page config. By default it sets the page height to a fixed size, which can cut off comment threads. So let's set this to fill, too.

Paginahoogte instellen

Het kan nodig zijn om te experimenteren met de paginahoogte om het naar wens te krijgen.

Domeinfouten

U kunt een autorisatiefout krijgen, zoals hieronder:

Domeinconfiguratie ontbreekt

Dit komt omdat FastComments niet weet dat uw account op dit domein gebruikt mag worden.

In dit geval is de oplossing eenvoudig. U hoeft alleen uw site aan uw FastComments.com-account toe te voegen.

Klik hier om uw site aan uw account toe te voegen.

Aanpassingen

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.

Taal 🇳🇱 Nederlands