Add Live Chat to ClickFunnels Courses

Tout d'abord, nous devons ouvrir l'éditeur de modèles ClickFunnels. Pour les cours, cela se fait en ouvrant le cours et en cliquant sur Customize en haut à droite :

Personnaliser

Allez à Templates :

Ouvrir les modèles

Les cours se composent de différents modèles. Nous voulons afficher les commentaires sur les leçons, donc sélectionnez Default Lesson Page (par exemple) :

Sélectionner le modèle

C'est tout ! Vous êtes maintenant prêt pour l'étape deux.

Maintenant que nous sommes dans l'éditeur de modèle, nous devons décider où nous voulons afficher les commentaires, ou le chat en direct.

Dans cet exemple, nous l'ajouterons directement sous la vidéo. Survolez l'élément pour ajouter le widget à la fin, puis cliquez sur ADD ELEMENT :

Ajouter un élément

Sélectionnez CUSTOM JS/HTML :

Sélectionnez CUSTOM JS/HTML

Ouvrons maintenant l'éditeur de code où nous collerons notre code.

ClickFunnels est un peu déroutant à l'étape suivante.

Il est important de NE PAS sélectionner Code lorsque vous survolez le nouvel élément. Sélectionnez plutôt SETTINGS :

Sélectionnez SETTINGS

Maintenant, sur le côté droit, nous pouvons cliquer sur Open Code Editor :

Cliquez sur Open Code Editor

Une grande zone s'ouvrira. C'est ici que nous pouvons coller notre code. Copiez l'extrait suivant (utilisez le bouton de copie en haut à droite) :

Extrait de code du chat en streaming 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 // certains fournisseurs modifient l'extrait de code pour le rendre asynchrone

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

Cet extrait de code est pour notre produit Streaming Chat, qui convient bien aux vidéos. Si vous souhaitez plutôt l'extrait de code du widget Live Commenting, qui convient mieux aux pages classiques ou aux articles de blog, il se trouve à la fin de ce tutoriel.

Lorsque nous collons l'extrait de code dans la fenêtre, cela devrait ressembler à ceci :

Coller le code

Il ne reste plus qu'à fermer la fenêtre :

Fermer

Vous pouvez maintenant prévisualiser vos modifications ! N'hésitez pas à déplacer le widget et voir où il vous convient le mieux.

Aperçu

Succès ! N'oubliez pas de tester sur mobile !

Succès !

FastComments est conçu pour être personnalisé afin de correspondre à votre site.

Si vous souhaitez ajouter des styles personnalisés, ou ajuster la configuration, Consultez notre documentation sur la personnalisation et la configuration pour savoir comment.

Si vous cherchez l'extrait de code pour les commentaires en direct de ClickFunnels, essayez ceci :

Extrait de commentaires en direct pour 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 // certains fournisseurs modifient l'extrait de code pour le rendre asynchrone

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 prend en charge une fonctionnalité appelée Auto Play. Cela vous permet d'importer un CSV de commentaires et de les programmer pour qu'ils s'affichent à des décalages précis en heures, minutes et secondes depuis le chargement de la page.

Il ajoute également automatiquement tous les commentaires publiés dans le script d'Auto Play, au bon moment, de sorte que votre script vidéo s'enrichit à chaque webinaire sans aucun travail manuel.

Cela est actuellement inclus dans tous les plans FastComments.

En savoir plus sur les commentaires planifiés ici

Remarque !

N'oubliez pas que la colonne URL ID dans le fichier CSV doit correspondre à l'URL du cours/vidéo.