Add Live Chat to ClickFunnels Courses

I denne vejledning gennemgår vi opsætning af FastComments Streaming Chat med et ClickFunnels-kursus. Vi tilføjer også et kodeudsnit til sidst for Live Commenting, hvis du foretrækker at bruge det i stedet.

Bemærk, at denne vejledning er til et Course-modul, men trinene er lignende for at tilføje kommentering til blogindlæg og sider (rediger blot den tilsvarende skabelon).

Vi vil også kort gennemgå opsætning af automatiserede kommentarer for at hjælpe med at opmuntre folk til at engagere sig.

Bemærk, at denne vejledning kræver en FastComments-konto. Det anbefales, at du tilmelder dig først og derefter vender tilbage hertil. Du kan oprette en konto her.

Trin 1: Find skabelonen

Først skal vi åbne ClickFunnels-skabeloneditoren. For kurser tilgås denne ved at åbne kurset og klikke på Customize øverst til højre:

Tilpas

Gå til Templates:

Åbn skabeloner

Kurser består af forskellige skabeloner. Vi ønsker at vise kommentarer på lektioner, så vælg Default Lesson Page (for eksempel):

Vælg skabelon

Det var det! Nu er du klar til trin to.

Trin 2: Tilføj koden

Nu hvor vi er i skabeloneditoren, skal vi beslutte, hvor vi vil vise kommentarerne eller live chatten.

I dette eksempel tilføjer vi den direkte under videoen. Hold musen over det element, hvor du vil føje widgetten til, og klik på ADD ELEMENT:

Tilføj element

Vælg CUSTOM JS/HTML:

Vælg CUSTOM JS/HTML

Lad os nu åbne kodeeditoren, hvor vi indsætter vores kode.

ClickFunnels er en smule forvirrende i det næste trin.

Det er vigtigt, at du IKKE vælger Code, når du holder musen over det nye element. Vælg i stedet SETTINGS:

Vælg SETTINGS

Nu kan vi i højre side klikke på Open Code Editor:

Klik på Open Code Editor

Du vil se et stort felt åbne. Her kan vi indsætte vores kode. Kopiér følgende uddrag (brug kopiér-knappen øverst til højre):

ClickFunnels Streaming Chat-kodesnippet

Copy

<script src="https://cdn.fastcomments.com/js/embed-live-chat.min.js"></script>
<div id="fastcomments-live-chat-widget" style="width: 500px;min-height: 780px;"></div>
<style>
    #fastcomments-live-chat-widget iframe {
        min-height: 780px;
    }
</style>
<script>
    (function fcLoad() {
        function tryLoad() {
            // nogle udbydere ændrer kodesnippet til at være async
            const container = document.getElementById('fastcomments-live-chat-widget');
            if (!container) {
                return waitRetry();
            }
            if (!window.FastCommentsLiveChat) {
                return waitRetry();
            }
            window.FastCommentsLiveChat(container, {
                tenantId: 'demo'
            });
        }
        function waitRetry() {
            setTimeout(tryLoad, 500);
        }
        tryLoad();
    })();
</script>

Dette kodesnit er til vores Streaming Chat-produkt, som passer godt til videoer. Hvis du i stedet ønsker Live Commenting-widgetens kodesnit, som passer bedst til almindelige sider eller blogindlæg, ligger det i slutningen af denne vejledning.

Når vi indsætter kodesnittet i vinduet, bør det se sådan ud:

Indsæt kode

Nu skal vi blot lukke boksen:

Luk

Nu kan du forhåndsvise dine ændringer! Flyt endelig widgetten rundt og se, hvor du bedst kan lide den.

Forhåndsvis

Succes! Glem ikke at teste på mobil!

Succes!

Domænefejl

Du kan få en autorisationsfejl, som vist nedenfor:

Manglende domænekonfiguration

Det skyldes, at FastComments ikke ved, at din konto skal kunne bruges på dette domæne.

I dette tilfælde er løsningen enkel. Du skal blot tilføje dit websted til din FastComments.com-konto.

Gå her for at tilføje dit websted til din konto.

Tilpasning

FastComments er designet til at kunne tilpasses dit websted.

Hvis du gerne vil tilføje brugerdefineret styling eller justere konfigurationen, Se vores dokumentation om tilpasning og konfiguration for at lære hvordan.

Ekstra: Kodeudsnit til livekommentering

Hvis du leder efter ClickFunnels Live Commenting-kodesnippet, prøv dette:

ClickFunnels Live Commenting-kodesnippet

Copy

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<div id="fastcomments-widget" style="min-width: 500px;min-height: 780px;"></div>
<style>
    #fastcomments-widget iframe {
        min-height: 780px;
    }
</style>
<script>
    (function fcLoad() {
        function tryLoad() {
            // nogle udbydere ændrer kodesnutten til at være asynkron
            const container = document.getElementById('fastcomments-widget');
            if (!container) {
                return waitRetry();
            }
            if (!window.FastCommentsUI) {
                return waitRetry();
            }
            window.FastCommentsUI(container, {
                tenantId: 'demo'
            });
        }
        function waitRetry() {
            setTimeout(tryLoad, 500);
        }
        tryLoad();
    })();
</script>

Ekstra: Automatisk afspilning af kommentarer

FastComments understøtter en funktion kaldet Auto Play. Dette giver dig mulighed for at importere en CSV med kommentarer og planlægge, at de skal afspilles på bestemte tidsforskydninger baseret på timer, minutter og sekunder fra siden indlæses.

Det tilføjer også automatisk enhver kommentar, der er postet, tilbage i autoplay script, på det korrekte tidspunkt, så dit video script vokser med hvert webinar uden manuelt arbejde.

Dette er i øjeblikket inkluderet i alle FastComments-planer.

Læs mere om planlagte kommentarer her

Bemærk!

Husk, at kolonnen URL ID i CSV-filen skal matche URL for kurset/videoet.

Sprog 🇩🇰 Dansk

ClickFunnels-installation

Kodeudsnit til livekommentering

Automatisk afspilning af kommentarer