Add Live Chat to ClickFunnels Courses

Neste tutorial abordaremos a configuração do FastComments Streaming Chat com um curso ClickFunnels. Também adicionaremos um trecho de código no final para Comentários ao Vivo se você quiser usar isso em vez disso.

Observe que este tutorial é para um módulo de curso, mas os passos são semelhantes para adicionar comentários a posts de blog e páginas (simplesmente edite o template correspondente).

Também cobriremos brevemente a configuração de comentários automatizados para ajudar a incentivar as pessoas a interagir.

Observe que este tutorial requer uma conta FastComments. Recomenda-se que você se inscreva primeiro e depois volte aqui. Você pode criar uma conta aqui.

Passo Um: Encontre o Modelo

Primeiro, precisamos abrir o editor de templates do ClickFunnels. Para cursos, isso é acessado abrindo o curso e clicando em Customize no canto superior direito:

Personalizar

Vá para Templates:

Abrir Modelos

Os cursos consistem em diferentes modelos. Queremos exibir comentários nas aulas, então selecione Default Lesson Page (por exemplo):

Selecionar modelo

Pronto! Agora você está pronto para o segundo passo.

Passo Dois: Adicione o Código

Agora que estamos no editor de template, precisamos decidir onde queremos exibir os comentários, ou o chat ao vivo.

Neste exemplo vamos adicioná-lo diretamente abaixo do vídeo. Passe o cursor sobre o elemento para adicionar o widget ao final dele, e clique em ADD ELEMENT:

Adicionar elemento

Selecione CUSTOM JS/HTML:

Selecione CUSTOM JS/HTML

Agora vamos abrir o editor de código onde vamos colar nosso código.

O ClickFunnels fica um pouco confuso nesta próxima etapa.

É importante que você NÃO selecione Code quando passar o cursor sobre o novo elemento. Em vez disso, selecione SETTINGS:

Selecione SETTINGS

Agora, no lado direito, podemos clicar em Open Code Editor:

Clique em Open Code Editor

Você verá um grande quadrado se abrir. É aqui que podemos colar nosso código. Copie o trecho a seguir (use o botão de copiar no canto superior direito):

Trecho de código do Chat de Streaming do 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() {
            // alguns provedores alteram o trecho de código para ser assí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 trecho de código é para o nosso produto Streaming Chat, que combina bem com vídeos. Se você quiser o trecho de código do widget Live Commenting em vez disso, que funciona melhor em páginas regulares ou posts de blog, ele está no final deste tutorial.

Quando colarmos o trecho de código na janela, deve ficar assim:

Colar código

Agora só precisamos fechar a caixa:

Fechar

Agora você pode visualizar suas alterações! Sinta-se à vontade para mover o widget e ver onde você mais gosta.

Visualizar

Sucesso! Não se esqueça de testar no celular!

Sucesso!

Erros de Domínio

Você pode receber um erro de autorização, como o seguinte:

Configuração de Domínio Ausente

Isso acontece porque o FastComments não sabe que deve permitir que sua conta seja usada neste domínio.

Neste caso, a correção é simples. Você só precisa adicionar seu site à sua conta FastComments.com.

Clique aqui para adicionar seu site à sua conta.

Personalização

O FastComments foi projetado para ser personalizado para combinar com o seu site.

Se você quiser adicionar estilos personalizados, ou ajustar a configuração, Confira nossa Documentação de Personalização para saber como.

Extra: Trecho de Código para Comentários ao Vivo

Se você está procurando o trecho de código para Comentários ao Vivo do ClickFunnels, experimente isto:

Trecho de Comentários ao Vivo do 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() {
            // alguns provedores alteram o trecho de código para ser assí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: Reprodução Automática de Comentários

O FastComments oferece um recurso chamado Auto Play. Isso permite importar um CSV de comentários e agendá-los para serem reproduzidos em determinados deslocamentos com base em horas, minutos e segundos a partir do tempo de carregamento da página.

Ele também adiciona automaticamente quaisquer comentários publicados de volta ao script do Auto Play, no momento correto, para que seu vídeo script cresça a cada webinar sem nenhum trabalho manual.

Isso está atualmente incluído em todos os planos do FastComments.

Saiba mais sobre Comentários Agendados aqui

Nota!

Lembre-se de que a coluna URL ID no arquivo CSV deve corresponder ao URL do curso/vídeo.

Idioma 🇧🇷 Português (Brasil)

Instalação do ClickFunnels

Trecho de Código para Comentários ao Vivo

Reprodução Automática de Comentários