ThriveCart Learn+ 코스에 댓글 추가

FastComments를 사용하면 어떤 ThriveCart Learn+ 코스에도 라이브 댓글 기능을 쉽게 추가할 수 있습니다.

설정에 문제가 있는 경우 FastComments 지원팀에서 도움을 제공할 수 있습니다.

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

1단계: 코스 준비

ThriveCart Learn+의 설계 때문에, 댓글을 표시하려는 모든 강의 페이지에 FastComments 코드를 추가해야 합니다.

같은 코드 스니펫을 모든 페이지에서 사용할 수 있으며, 별도의 댓글 스레드는 자동으로 각 개별 페이지에 연결됩니다.

에디터에서 강의를 열고 HTML 블록을 추가하는 것부터 시작하겠습니다.

왼쪽에서 HTML 블록 옵션을 볼 수 있습니다. 댓글을 표시할 페이지로 드래그하세요.

강의 열고 HTML 블록 추가

이제 새 HTML 요소를 선택하세요. 코드를 붙여넣을 수 있는 블록이 왼쪽에 나타납니다.

이제 2단계로 넘어갈 준비가 되었습니다.

2단계: 맞춤 코드 추가

Step 2에서는 코드 스니펫을 복사해야 합니다. 50번째 줄이 "demo"로 되어 있지 않은지 확인하세요 - 여기에는 귀하의 tenant id가 있어야 합니다. 보통 자동으로 채워져 있습니다.

이제 ThriveCart-Learn 전용 FastComments 코드 스니펫을 복사하겠습니다.

ThriveCart와의 통합에는 많은 기능이 포함되어 있어 코드가 꽤 큽니다. 코드 스니펫의 오른쪽 상단에 있는 복사 버튼을 클릭하세요:

ThriveCart Learn+ 댓글 코드

Copy

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
    (function () {
        let attemptsRemaining = 10;
        function tryLoad() {
            const simpleSSO = {optedInNotifications: true, optedInSubscriptionNotifications: true};
            let isAuthenticated = false;
            let profileLink = document.querySelector('.thrivecart-courses-header-profile-link');
            if (!profileLink) {
                profileLink = document.querySelector('.thrivecart-courses-header-profile'); // 미리보기에서는 클래스가 다름.
            }
            // ThriveCart가 id를 변경할 경우에 대비한 광범위한 이메일 입력 필드 선택자.
            const emailInputField = document.querySelector('input[type=email]');
            if (emailInputField && emailInputField.value) {
                isAuthenticated = true;
                simpleSSO.email = emailInputField.value;
            } else if (profileLink && !profileLink.innerText.includes('John Smith')) { // 미리보기가 작동하도록 허용 - 이메일 없음.
                attemptsRemaining--;
                if (!attemptsRemaining) {
                    return console.error('Could not load FastComments - could not determine user information (email). Please reach out to FastComments support.');
                }
                console.warn('FastComments: No user email found - waiting and trying again.');
                return setTimeout(tryLoad, attemptsRemaining < 5 ? 3000 : 100); // 인터넷 속도가 느릴 경우를 대비해 5회 시도 이후 대기 시간을 늘립니다.
            }
            if (profileLink) {
                // ThriveCart가 이미지 클래스 선택자를 변경할 경우를 대비해 원시 "img" 쿼리를 사용합니다.
                const avatarImg = profileLink.querySelector('img');
                if (avatarImg && avatarImg.src) {
                    isAuthenticated = true;
                    simpleSSO.avatar = avatarImg.src;
                }
                // ThriveCart가 프로필 이름 표시 방식을 변경할 경우에 대비해 innerText를 사용합니다.
                if (profileLink.innerText) {
                    isAuthenticated = true;
                    simpleSSO.username = profileLink.innerText;
                } else {
                    const bold = profileLink.querySelector('b');
                    if (bold && bold.innerText) {
                        isAuthenticated = true;
                        simpleSSO.username = bold.innerText;
                    }
                }
            } else {
                if (!attemptsRemaining) {
                    return console.error('Could not load FastComments - could not determine user information (user name/avatar). Please reach out to FastComments support.');
                }
                console.warn('FastComments: No user profile info found - waiting and trying again.');
                attemptsRemaining--;
                return setTimeout(tryLoad, attemptsRemaining < 5 ? 3000 : 100); // 인터넷 속도가 느릴 경우를 대비해 5회 시도 이후 대기 시간을 늘립니다.
            }
            let url;
            const selectedNavLink = document.querySelector('.tcc-browse-lesson.active a');
            if (selectedNavLink) {
                // 경우에 따라 TC가 동일 페이지에 여러 링크를 사용할 수 있으므로 중복을 제거합니다.
                url = getPathnameFromUrl(selectedNavLink.href);
            } else {
                // 마케팅 매개변수와 도메인 이름을 제거합니다.
                url = window.location.pathname;
            }
            if (url) {
                url = url.replace('/starte-hier', '');
                url = url.replace('/start-here', '');
            }
            FastCommentsUI(document.getElementById('fastcomments-widget'), {
                tenantId: 'demo',
                urlId: url,
                simpleSSO: isAuthenticated ? simpleSSO : null
            });
        }
        tryLoad();
        function getPathnameFromUrl(url) {
            try {
                const parsedUrl = new URL(url);
                // 마케팅 매개변수와 도메인 이름을 제거합니다.
                return parsedUrl.pathname;
            } catch (error) {
                console.error("Invalid URL", url, error);
                return window.location.pathname; // 기본값으로 현재 경로를 사용하므로 적어도 때때로 동작합니다
            }
        }
    })();
</script>

이제 이를 ThriveCart 편집기의 왼쪽 코드 블록에 붙여넣으세요. 다음과 같이 보일 것입니다:

코드 추가됨

이제 끝났습니다! 이제 게시하기만 하면 됩니다:

게시

이제 완료되었습니다! 미리보기할 때 강좌에서 댓글 상자를 볼 수 있으며, 실제 사용자는 다시 로그인하거나 사용자명/이메일을 두 번째로 입력하지 않고도 댓글을 남길 수 있습니다.

테스트 참고!

익명 댓글 기능이 비활성화되어 있다면(기본값은 비활성화) Preview 모드에서 John Smith 사용자로 댓글을 남길 수 없습니다. 기본 John Smith 사용자에는 이메일이 없어 인증 오류가 발생합니다. 테스트를 원하시면 쿠폰 코드를 사용하여 실제 사용자처럼 사이트를 진행해 보시길 권장합니다.

성공

성공! 이제 FastComments 댓글 위젯을 보실 수 있습니다.

성공!

ThriveCart와 함께 FastComments 설정을 완료하신 것을 축하합니다! 도메인 오류가 발생했거나 댓글 영역을 사용자화하는 방법을 알고 싶으시다면 계속 읽어보세요!

도메인 오류

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

도메인 구성 누락

일반적으로 기본 도메인인 "thrivecart.com" 대신 자체 도메인을 사용하는 경우에 발생합니다.

이는 FastComments가 해당 도메인에서 계정 사용을 허용해야 한다는 것을 인식하지 못하기 때문입니다.

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

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

맞춤 설정

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

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

언어 🇰🇷 한국어

ThriveCart Learn+ 설치