Adobe Experience Manager에 Asyntai AI 챗봇을 추가하는 방법

AEM 웹사이트를 위한 단계별 가이드

임베드 코드 받기

플랫폼:

1단계: 임베드 코드 가져오기

먼저 Asyntai 대시보드로 이동하여 "임베드 코드" 섹션까지 아래로 스크롤하십시오. 다음과 같은 형태의 고유 임베드 코드를 복사하십시오:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

참고: 위의 코드는 예시일 뿐입니다. 개인 위젯 ID가 포함된 고유한 임베드 코드를 대시보드에서 복사해야 합니다.

2단계: 페이지 컴포넌트를 사용하여 코드 추가 (권장)

권장 방법은 사이트 전체 설치를 위해 AEM 페이지 컴포넌트의 head 섹션에 챗봇 코드를 추가하는 것입니다:

AEM Author 인스턴스에 로그인하세요
CRXDE Lite로 이동하세요 (일반적으로 http://your-aem-instance:4502/crx/de)
페이지 컴포넌트 템플릿을 찾으세요 (일반적으로 /apps/your-project/components/page 아래)
head.html 또는 headerlibs.html 파일을 찾거나 만드세요
이 파일에 Asyntai 임베드 코드를 추가하세요
상단 메뉴에서 "모두 저장"을 클릭하세요
퍼블리시 인스턴스에 변경 사항을 복제하세요

팁: head.html 파일에 코드를 배치하면 해당 템플릿을 사용하는 모든 페이지에 챗봇이 나타납니다. 이는 사이트 전체 설치를 위한 가장 깔끔한 접근 방식입니다.

대체 방법 1: 클라이언트 라이브러리 (ClientLibs)

보다 체계적인 접근 방식을 위해 AEM의 클라이언트 라이브러리 시스템을 사용할 수 있습니다:

/apps/your-project/clientlibs 아래에 새 클라이언트 라이브러리 폴더를 만드세요
cq:clientLibraryFolder 노드 유형을 설정하세요
JavaScript 파일을 나열하는 js.txt 파일을 만드세요
이 폴더의 JavaScript 파일에 Asyntai 임베드 코드를 추가하세요
다음을 사용하여 페이지 컴포넌트에 클라이언트 라이브러리를 포함하세요:

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.js @ categories='your-category-name'}" />

참고: 이 방법은 기존 ClientLib 구조가 있는 프로젝트에 권장되며 대규모 구현을 위한 더 나은 구성을 제공합니다.

대체 방법 2: 태그 관리 (Adobe Launch)

Adobe Launch(이전 DTM) 또는 다른 태그 관리자를 사용하는 경우:

Adobe Experience Platform Launch에 로그인하세요
속성으로 이동하세요
규칙으로 이동하여 새 규칙을 만드세요
이벤트를 "Page Bottom" 또는 "DOM Ready"로 설정하세요
액션 추가: 사용자 정의 코드
Asyntai 임베드 코드를 붙여넣으세요
라이브러리를 저장하고 게시하세요

팁: Adobe Launch 사용은 타사 스크립트를 추가하기 위한 Adobe 권장 접근 방식입니다. 더 나은 제어, 테스트 기능을 제공하며 코드 배포가 필요하지 않습니다.

대체 방법 3: 경험 프래그먼트

유연하고 작성자 친화적인 구현을 위해:

AEM에서 경험 프래그먼트로 이동하세요
새 경험 프래그먼트를 만드세요
텍스트 컴포넌트 또는 HTML 컴포넌트를 추가하세요
HTML 소스 모드로 전환하세요
Asyntai 임베드 코드를 붙여넣으세요
페이지 템플릿 푸터에 이 경험 프래그먼트를 포함하세요

중요: 템플릿과 구성 요소를 수정할 수 있는 적절한 AEM 권한이 있는지 확인하세요. AEM as a Cloud Service의 경우 변경 사항이 CI/CD 파이프라인을 통해야 할 수 있습니다.

3단계: 설치 확인

변경 사항을 배포한 후 브라우저 캐시를 지우고 웹사이트를 방문하세요. 오른쪽 하단 모서리에 채팅 위젯 버튼이 보여야 합니다. 클릭하여 올바르게 열리고 작동하는지 확인하세요.

위젯이 보이지 않나요? 브라우저 콘솔(F12)에서 JavaScript 오류를 확인하세요. 코드가 퍼블리시 인스턴스에 올바르게 배포되었는지 확인하세요. AEM as a Cloud Service의 경우 변경 사항이 배포 파이프라인을 통해 성공적으로 진행되었는지 확인하세요.