ClickFunnels 코스에 실시간 채팅 추가

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

사용자 지정

Templates로 이동하세요:

템플릿 열기

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

템플릿 선택

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

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

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

요소 추가

CUSTOM JS/HTML를 선택하세요:

CUSTOM JS/HTML 선택

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

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

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

SETTINGS 선택

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

Open Code Editor 클릭

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

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

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

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

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

코드 붙여넣기

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

닫기

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

미리보기

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

성공!

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

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

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

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

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

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

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

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

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

참고!

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