Add Live Chat to ClickFunnels Courses

En este tutorial cubriremos cómo configurar FastComments Streaming Chat con un curso de ClickFunnels. También añadiremos un fragmento de código al final para Live Commenting si prefieres usar eso en su lugar.

Ten en cuenta que este tutorial es para un módulo de Curso, pero los pasos son similares para añadir comentarios a entradas de blog y páginas (simplemente edita la plantilla correspondiente).

También cubriremos brevemente cómo configurar comentarios automatizados para ayudar a fomentar la participación.

Ten en cuenta que este tutorial requiere una cuenta de FastComments. Se recomienda que te registres primero y luego vuelvas aquí. Puedes crear una cuenta aquí.

Paso uno: Encuentra la plantilla

Primero, necesitamos abrir el editor de plantillas de ClickFunnels. Para los cursos, se accede a esto abriendo el curso y haciendo clic en Customize en la esquina superior derecha:

Personalizar

Ve a Templates:

Abrir plantillas

Los cursos constan de diferentes plantillas. Queremos mostrar comentarios en las lecciones, así que selecciona Default Lesson Page (por ejemplo):

Seleccionar plantilla

¡Eso es todo! Ahora estás listo para el paso dos.

Paso dos: Agrega el código

Ahora que estamos en el editor de plantillas, debemos decidir dónde queremos mostrar los comentarios o el chat en directo.

En este ejemplo lo añadiremos directamente debajo del vídeo. Pasa el cursor sobre el elemento para añadir el widget al final, y haz clic en ADD ELEMENT:

Añadir elemento

Select CUSTOM JS/HTML:

Seleccionar CUSTOM JS/HTML

Ahora abramos el editor de código donde pegaremos nuestro código.

ClickFunnels es un poco confuso en el siguiente paso.

Es importante que NO selecciones Code cuando pases el cursor sobre el nuevo elemento. En su lugar, selecciona SETTINGS:

Seleccionar SETTINGS

Ahora, en el lado derecho podemos hacer clic en Open Code Editor:

Haz clic en Open Code Editor

Verás que se abre un gran recuadro. Aquí es donde podemos pegar nuestro código. Copia el siguiente fragmento (usa el botón de copiar en la esquina superior derecha):

Fragmento de código de chat en streaming de ClickFunnels

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() {
            // algunos proveedores cambian el fragmento de código para que sea asíncrono
            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>

Este fragmento de código es para nuestro producto Streaming Chat, que va bien con vídeos. Si quieres el fragmento de código del widget Live Commenting en su lugar, que funciona mejor con páginas normales o entradas de blog, está al final de este tutorial.

Cuando peguemos el fragmento de código en la ventana, debería verse así:

Pegar código

Ahora solo tenemos que cerrar el cuadro:

Cerrar

¡Ahora puedes previsualizar tus cambios! Siéntete libre de mover el widget y ver dónde te gusta más.

Previsualizar

¡Éxito! ¡No olvides probar en móvil!

¡Éxito!

Errores de dominio

Puede que reciba un error de autorización, como el siguiente:

Falta la configuración del dominio

Esto se debe a que FastComments no sabe que debe permitir que su cuenta se utilice en este dominio.

En este caso, la solución es sencilla. Solo tiene que añadir su sitio a su cuenta de FastComments.com.

Haga clic aquí para añadir su sitio a su cuenta.

Personalización

FastComments está diseñado para personalizarse para que coincida con su sitio.

Si desea agregar estilos personalizados o ajustar la configuración, Consulte nuestra Documentación de Personalización para saber cómo.

Extra: Fragmento de código para comentarios en vivo

Si buscas el fragmento de código de comentarios en vivo de ClickFunnels, prueba esto:

Fragmento de comentarios en vivo de ClickFunnels

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() {
            // algunos proveedores cambian el fragmento de código para que sea asíncrono
            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>

Extra: Reproducción automática de comentarios

FastComments soporta algo llamado Auto Play. Esto le permite importar un CSV de comentarios y programarlos para que se reproduzcan en desplazamientos específicos basados en horas, minutos y segundos desde la carga de la página.

También agrega automáticamente cualquier comentario publicado de nuevo al script de Auto Play, en el momento correcto, de modo que su guion de vídeo crece con cada webinar sin ningún trabajo manual.

Esto está actualmente incluido en todos los planes de FastComments.

Obtenga más información sobre Comentarios Programados aquí

¡Nota!

Recuerde que la columna URL ID en el archivo CSV debe coincidir con la URL del curso/video.

Idioma 🇪🇸 Español

Instalación de ClickFunnels

Fragmento de código para comentarios en vivo

Reproducción automática de comentarios