Add Live Chat to ClickFunnels Courses

Zuerst müssen Sie den ClickFunnels-Vorlageneditor öffnen. Bei Kursen rufen Sie diesen auf, indem Sie den Kurs öffnen und oben rechts auf Customize klicken:

Anpassen

Gehen Sie zu Templates:

Vorlagen öffnen

Kurse bestehen aus verschiedenen Vorlagen. Wir möchten Kommentare auf Lektionen anzeigen, daher wählen Sie Default Lesson Page (zum Beispiel):

Vorlage auswählen

Das war's! Nun sind Sie bereit für Schritt zwei.

Jetzt, da wir uns im Template-Editor befinden, müssen wir entscheiden, wo wir die Kommentare bzw. den Live-Chat anzeigen möchten.

In diesem Beispiel fügen wir ihn direkt unter dem Video hinzu. Fahren Sie mit der Maus über das Element, um das Widget ans Ende hinzuzufügen, und klicken Sie auf ADD ELEMENT:

Element hinzufügen

Wählen Sie CUSTOM JS/HTML:

CUSTOM JS/HTML auswählen

Öffnen wir jetzt den Code-Editor, in den wir unseren Code einfügen werden.

ClickFunnels ist bei diesem nächsten Schritt etwas verwirrend.

Es ist wichtig, dass Sie NICHT Code auswählen, wenn Sie mit der Maus über das neue Element fahren. Wählen Sie stattdessen SETTINGS:

SETTINGS auswählen

Jetzt können wir auf der rechten Seite auf Open Code Editor klicken:

Klicken Sie auf Open Code Editor

Sie sehen ein großes Feld geöffnet. Hier können wir unseren Code einfügen. Kopieren Sie den folgenden Ausschnitt (verwenden Sie die Kopierschaltfläche oben rechts):

ClickFunnels Streaming-Chat-Code-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: 500px;min-height: 780px;"></div>

4<style>

5 #fastcomments-live-chat-widget iframe {

6 min-height: 780px;

7 }

8</style>

9<script>

10 (function fcLoad() {

11 function tryLoad() {

12 // einige Anbieter ändern den Codeausschnitt, sodass er asynchron ist

13 const container = document.getElementById('fastcomments-live-chat-widget');

14 if (!container) {

15 return waitRetry();

16 }

17 if (!window.FastCommentsLiveChat) {

18 return waitRetry();

19 }

20 window.FastCommentsLiveChat(container, {

21 tenantId: 'demo'

22 });

23 }

24 function waitRetry() {

25 setTimeout(tryLoad, 500);

26 }

27 tryLoad();

28 })();

29</script>

30

Dieser Codeausschnitt ist für unser Produkt Streaming Chat, das gut zu Videos passt. Wenn Sie stattdessen den Codeausschnitt für das Live Commenting-Widget möchten, der am besten zu regulären Seiten oder Blogposts passt, finden Sie ihn am Ende dieses Tutorials.

Wenn wir den Codeausschnitt in das Fenster einfügen, sollte es so aussehen:

Code einfügen

Jetzt müssen wir nur noch das Feld schließen:

Schließen

Jetzt können Sie Ihre Änderungen in der Vorschau ansehen! Verschieben Sie das Widget nach Belieben und sehen Sie, wo es Ihnen am besten gefällt.

Vorschau

Erfolg! Vergessen Sie nicht, die Darstellung auf Mobilgeräten zu testen!

Erfolg!

FastComments wurde so konzipiert, dass es an Ihre Website angepasst werden kann.

Wenn Sie benutzerdefinierte Styles hinzufügen oder die Konfiguration anpassen möchten, sehen Sie sich unsere Dokumentation zu Anpassungen und Konfiguration an, um zu erfahren, wie.

Wenn Sie nach dem Code-Snippet für ClickFunnels Live-Kommentare suchen, probieren Sie Folgendes:

Code-Snippet für ClickFunnels Live-Kommentare

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>

3<div id="fastcomments-widget" style="min-width: 500px;min-height: 780px;"></div>

4<style>

5 #fastcomments-widget iframe {

6 min-height: 780px;

7 }

8</style>

9<script>

10 (function fcLoad() {

11 function tryLoad() {

12 // manche Anbieter ändern das Code-Snippet, sodass es asynchron ist

13 const container = document.getElementById('fastcomments-widget');

14 if (!container) {

15 return waitRetry();

16 }

17 if (!window.FastCommentsUI) {

18 return waitRetry();

19 }

20 window.FastCommentsUI(container, {

21 tenantId: 'demo'

22 });

23 }

24 function waitRetry() {

25 setTimeout(tryLoad, 500);

26 }

27 tryLoad();

28 })();

29</script>

30

FastComments unterstützt etwas, das Auto Play genannt wird. Dies ermöglicht es Ihnen, eine CSV mit Kommentaren zu importieren und diese so zu planen, dass sie zu bestimmten Zeitversätzen basierend auf Stunden, Minuten und Sekunden nach dem Laden der Seite abgespielt werden.

Es fügt außerdem automatisch alle geposteten Kommentare zur richtigen Zeit wieder in das Auto-Play-Skript ein, sodass Ihr Video-Skript mit jedem Webinar ohne manuellen Aufwand wächst.

Dies ist derzeit in allen FastComments-Plänen enthalten.

Erfahren Sie hier mehr über geplante Kommentare

Hinweis!

Denken Sie daran, dass die URL ID-Spalte in der CSV-Datei mit der URL des Kurses/Videos übereinstimmen muss.