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

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