Duda에 Asyntai AI 챗봇을 추가하는 방법

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

임베드 코드 받기

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

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

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

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

2단계: 사이트 설정에 코드 추가 (권장)

Duda 웹사이트의 모든 페이지에 챗봇을 추가하는 가장 쉬운 방법은 사이트 설정을 통하는 것입니다:

  1. Duda 계정에 로그인하고 웹사이트 편집기를 여세요
  2. 왼쪽 사이드바에서 \"More\"(점 3개 아이콘)를 클릭하세요
  3. "Settings"를 클릭하세요
  4. 아래로 스크롤하여 "Head HTML"을 클릭하세요
  5. "Body End HTML" 필드에 Asyntai 임베드 코드를 붙여넣으세요
  6. "Save"를 클릭하세요
  7. 오른쪽 상단의 "Publish"를 클릭하여 변경 사항을 적용하세요

팁: Body End HTML 섹션에 코드를 추가하면 페이지 콘텐츠 이후에 챗봇이 로드되어 사이트 로딩 속도에 영향을 주지 않습니다. 이 방법은 사이트의 모든 페이지에 자동으로 챗봇을 추가합니다.

대안 방법 1: HTML 위젯 (특정 페이지)

특정 페이지에만 챗봇을 추가하려면 HTML 위젯을 사용하세요:

  1. Duda 편집기에서 편집할 페이지를 여세요
  2. 왼쪽 사이드바의 위젯 패널에서 "HTML"을 검색하세요
  3. HTML 위젯을 페이지의 열 또는 행에 드래그 앤 드롭하세요
  4. 위젯을 클릭하여 편집하세요
  5. 코드 필드에 Asyntai 임베드 코드를 붙여넣으세요
  6. "Update"를 클릭하세요
  7. "Publish"를 클릭하여 변경 사항을 적용하세요

참고: HTML 위젯을 사용하면 페이지 어디에나 사용자 정의 코드를 삽입할 수 있습니다. 위젯의 시각적 위치는 챗봇이 표시되는 위치에 영향을 주지 않으며, 설정된 대로 오른쪽 하단에 표시됩니다.

대안 방법 2: 개발자 모드 (고급)

고급 사용자의 경우 개발자 모드를 사용하여 HTML에 직접 코드를 추가할 수 있습니다:

  1. Duda 편집기의 상단 바에서 Developer Mode 아이콘을 클릭하세요
  2. "Site HTML/CSS"를 클릭하여 선택 항목을 확장하세요
  3. 파일 목록에서 "body-end.html"을 클릭하세요
  4. 파일의 마지막 줄로 스크롤하세요
  5. 새 줄에 Asyntai 임베드 코드를 붙여넣으세요
  6. "Save"를 클릭하세요
  7. "Done"을 클릭하여 개발자 모드를 종료하세요
  8. "Publish"를 클릭하여 변경 사항을 배포하세요

중요: 개발자 모드는 사이트의 HTML과 CSS에 직접 접근할 수 있게 합니다. 사이트 기능이 깨지지 않도록 body-end.html 파일의 끝에만 코드를 추가하세요. 게시하기 전에 항상 변경 사항을 테스트하세요.

3단계: 설치 확인

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

위젯이 보이지 않나요? 사이트를 게시했는지 확인하세요 (저장만 한 것이 아닌지). 브라우저 캐시를 지우거나 시크릿 모드로 확인하세요. 코드가 HTTPS를 사용하는지 확인하세요 (기본적으로 사용됨). 브라우저 콘솔(F12)을 열어 JavaScript 오류가 없는지 확인하세요.