Add Live Chat to ClickFunnels Courses

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

Personnaliser

Allez dans Templates :

Ouvrir les modèles

Les cours se composent de différents modèles. Nous souhaitons 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èles, 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 auquel vous voulez ajouter le widget, 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 la droite, nous pouvons cliquer sur Open Code Editor:

Cliquez sur Open Code Editor

Une grande fenêtre 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 pour le 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, adapté 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 pour 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 pour savoir comment.

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

Extrait de commentaires en direct 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 qu'il soit 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 planifier pour qu'ils se déclenchent à 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 Auto Play, au bon moment, de sorte que votre vidéo script s'enrichisse à chaque webinaire sans aucun travail manuel.

Cela est actuellement inclus dans tous les forfaits FastComments.

En savoir plus sur les commentaires programmés ici

Remarque !

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