Add Live Chat to ClickFunnels Courses

Najpierw musimy otworzyć edytor szablonów ClickFunnels. W przypadku kursów dostęp do niego uzyskuje się, otwierając kurs i klikając Customize w prawym górnym rogu:

Dostosuj

Przejdź do Templates:

Otwórz szablony

Kursy składają się z różnych szablonów. Chcemy wyświetlać komentarze przy lekcjach, więc wybierz Default Lesson Page (na przykład):

Wybierz szablon

To wszystko! Teraz jesteś gotowy do drugiego kroku.

Teraz, gdy jesteśmy w edytorze szablonów, musimy zdecydować, gdzie chcemy wyświetlać komentarze lub czat na żywo.

W tym przykładzie dodamy go bezpośrednio pod wideo. Najedź kursorem na element, aby dodać widżet na jego końcu, a następnie kliknij ADD ELEMENT:

Dodaj element

Wybierz CUSTOM JS/HTML:

Wybierz CUSTOM JS/HTML

Otwórzmy teraz edytor kodu, w którym wkleimy nasz kod.

W następnym kroku ClickFunnels może być nieco mylący.

Ważne, aby NIE wybierać Code po najechaniu kursorem na nowy element. Zamiast tego wybierz SETTINGS:

Wybierz SETTINGS

Po prawej stronie możemy kliknąć Open Code Editor:

Kliknij Open Code Editor

Pojawi się duże okno. To tutaj wkleimy nasz kod. Skopiuj następujący fragment (użyj przycisku kopiowania w prawym górnym rogu):

Fragment kodu czatu strumieniowego ClickFunnels

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 // niektórzy dostawcy zmieniają fragment kodu, czyniąc go asynchronicznym

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

Ten fragment kodu jest przeznaczony dla naszego produktu Streaming Chat, który dobrze współgra z materiałami wideo. Jeśli zamiast tego chcesz fragment kodu widżetu Live Commenting, który najlepiej sprawdza się na zwykłych stronach lub wpisach na blogu, znajduje się on na końcu tego samouczka.

Gdy wkleimy fragment kodu do okna, powinno to wyglądać tak:

Wklej kod

Teraz musimy tylko zamknąć okno:

Zamknij

Teraz możesz podejrzeć swoje zmiany! Przesuwaj widżet i sprawdź, gdzie najbardziej Ci odpowiada.

Podgląd

Sukces! Nie zapomnij przetestować wersji mobilnej!

Sukces!

FastComments zostało zaprojektowane tak, aby można je było dostosować do Twojej witryny.

Jeśli chcesz dodać niestandardowy styl lub zmodyfikować konfigurację, Zapoznaj się z naszą dokumentacją dotyczącą dostosowywania, aby dowiedzieć się, jak.

Jeśli szukasz fragmentu kodu komentowania na żywo ClickFunnels, spróbuj tego:

Fragment kodu komentowania na żywo ClickFunnels

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 // niektórzy dostawcy zmieniają fragment kodu na asynchroniczny

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 obsługuje funkcję o nazwie Auto Play. Pozwala to zaimportować plik CSV z komentarzami i zaplanować ich odtwarzanie w określonych przesunięciach czasu w oparciu o godziny, minuty i sekundy od momentu załadowania strony.

Dodatkowo automatycznie dodaje wszystkie opublikowane komentarze z powrotem do skryptu Auto Play, we właściwym czasie, dzięki czemu skrypt wideo rośnie wraz z każdym webinarem bez żadnej pracy ręcznej.

Obecnie funkcja ta jest dostępna we wszystkich planach FastComments.

Dowiedz się więcej o zaplanowanych komentarzach tutaj

Uwaga!

Pamiętaj, że kolumna URL ID w pliku CSV musi pasować do URL kursu/wideo.