ClickFunnels 코스에 라이브 채팅 추가

이 튜토리얼에서는 FastComments Streaming Chat를 ClickFunnels 코스에 설정하는 방법을 다룹니다. 또한 마지막에 Live Commenting을 대신 사용하려는 경우를 위한 코드 스니펫을 추가합니다.

이 튜토리얼은 코스 모듈을 위한 것이지만, 블로그 게시물과 페이지에 댓글을 추가하는 절차도 유사합니다(해당 템플릿을 편집하면 됩니다).

또한 사람들이 참여하도록 유도하기 위한 자동 댓글 설정 방법도 간단히 다룹니다.

이 튜토리얼은 FastComments 계정이 필요합니다. 먼저 가입한 다음 여기로 돌아오는 것을 권장합니다. 여기에서 계정을 생성할 수 있습니다.

1단계: 템플릿 찾기

먼저 ClickFunnels 템플릿 편집기를 열어야 합니다. 강의의 경우, 강의를 연 다음 오른쪽 상단의 Customize를 클릭하여 접근합니다:

사용자 지정

Templates로 이동하세요:

템플릿 열기

강의는 여러 템플릿으로 구성되어 있습니다. 강의의 댓글을 표시하려고 하므로 예를 들어 Default Lesson Page를 선택하세요:

템플릿 선택

이제 완료되었습니다! 이제 2단계로 진행할 준비가 되었습니다.

2단계: 코드 추가하기

이제 템플릿 편집기에 있으므로 댓글 또는 라이브 채팅을 어디에 표시할지 결정해야 합니다.

이 예제에서는 비디오 바로 아래에 추가합니다. 위젯을 추가할 요소에 마우스를 올리고 ADD ELEMENT를 클릭하세요:

요소 추가

CUSTOM JS/HTML를 선택하세요:

CUSTOM JS/HTML 선택

이제 코드를 붙여넣을 코드 편집기를 열겠습니다.

다음 단계에서 ClickFunnels가 약간 혼란스러울 수 있습니다.

새 요소에 마우스를 올릴 때 Code를 선택하지 않는 것이 중요합니다. 대신 SETTINGS를 선택하세요:

SETTINGS 선택

이제 오른쪽에서 Open Code Editor를 클릭할 수 있습니다:

Open Code Editor 클릭

큰 사각형이 열리는 것을 보게 됩니다. 여기에 코드를 붙여넣습니다. 다음 스니펫을 복사하세요(오른쪽 상단의 복사 버튼을 사용):

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() {
            // 일부 제공자는 코드 스니펫을 비동기(async)로 변경합니다
            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>

이 코드 스니펫은 비디오와 잘 어울리는 Streaming Chat 제품용입니다. 대신 일반 페이지나 블로그 게시물에 가장 적합한 Live Commenting 위젯 코드 스니펫을 원하면 이 튜토리얼의 끝에 있습니다.

코드 스니펫을 창에 붙여넣으면 다음과 같이 보입니다:

코드 붙여넣기

이제 창을 닫기만 하면 됩니다:

닫기

이제 변경 사항을 미리보기할 수 있습니다! 위젯을 옮겨 보면서 가장 적합한 위치를 찾아보세요.

미리보기

성공했습니다! 모바일 테스트를 잊지 마세요!

성공!

도메인 오류

다음과 같은 권한 오류가 발생할 수 있습니다:

도메인 구성 누락

이는 FastComments가 이 도메인에서 귀하의 계정을 사용하도록 허용해야 한다는 사실을 알지 못하기 때문입니다.

이 경우 해결 방법은 간단합니다. FastComments.com 계정에 사이트를 추가하기만 하면 됩니다.

사이트를 계정에 추가하려면 여기를 클릭하세요.

맞춤 설정

FastComments는 귀하의 사이트에 맞게 맞춤화되도록 설계되었습니다.

커스텀 스타일을 추가하거나 구성을 조정하려면, 맞춤 설정 문서를 확인하세요에서 방법을 알아보세요.

추가: 라이브 댓글용 코드 스니펫

ClickFunnels 라이브 댓글 코드 스니펫을 찾고 있다면, 다음을 사용해 보세요:

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() {
            // 일부 제공업체는 코드 스니펫을 async로 변경합니다
            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>

추가: 댓글 자동 재생

FastComments는 Auto Play라고 하는 기능을 지원합니다. 이 기능을 사용하면 댓글이 포함된 CSV를 가져와 페이지 로드 시점부터

시간, 분, 초 단위의 특정 오프셋에 따라 재생되도록 예약할 수 있습니다.

또한 게시된 댓글을 올바른 시간에 자동으로 autoplay 스크립트에 다시 추가하므로 수동 작업 없이도 각 웨비나마다 비디오 스크립트가 성장합니다.

현재 이 기능은 모든 FastComments 요금제에 포함되어 있습니다.

예약된 댓글에 대해 자세히 알아보기

참고!

CSV 파일의 URL ID 열이 코스/비디오의 URL과 일치해야 한다는 점을 기억하세요.

언어 🇰🇷 한국어

ClickFunnels 설치

라이브 댓글 코드 스니펫

댓글 자동 재생