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 웹사이트의 모든 페이지에 챗봇을 추가하는 가장 쉬운 방법은 사이트 설정을 통하는 것입니다:
- Duda 계정에 로그인하고 웹사이트 편집기를 여세요
- 왼쪽 사이드바에서 \"More\"(점 3개 아이콘)를 클릭하세요
- "Settings"를 클릭하세요
- 아래로 스크롤하여 "Head HTML"을 클릭하세요
- "Body End HTML" 필드에 Asyntai 임베드 코드를 붙여넣으세요
- "Save"를 클릭하세요
- 오른쪽 상단의 "Publish"를 클릭하여 변경 사항을 적용하세요
팁: Body End HTML 섹션에 코드를 추가하면 페이지 콘텐츠 이후에 챗봇이 로드되어 사이트 로딩 속도에 영향을 주지 않습니다. 이 방법은 사이트의 모든 페이지에 자동으로 챗봇을 추가합니다.
대안 방법 1: HTML 위젯 (특정 페이지)
특정 페이지에만 챗봇을 추가하려면 HTML 위젯을 사용하세요:
- Duda 편집기에서 편집할 페이지를 여세요
- 왼쪽 사이드바의 위젯 패널에서 "HTML"을 검색하세요
- HTML 위젯을 페이지의 열 또는 행에 드래그 앤 드롭하세요
- 위젯을 클릭하여 편집하세요
- 코드 필드에 Asyntai 임베드 코드를 붙여넣으세요
- "Update"를 클릭하세요
- "Publish"를 클릭하여 변경 사항을 적용하세요
참고: HTML 위젯을 사용하면 페이지 어디에나 사용자 정의 코드를 삽입할 수 있습니다. 위젯의 시각적 위치는 챗봇이 표시되는 위치에 영향을 주지 않으며, 설정된 대로 오른쪽 하단에 표시됩니다.
대안 방법 2: 개발자 모드 (고급)
고급 사용자의 경우 개발자 모드를 사용하여 HTML에 직접 코드를 추가할 수 있습니다:
- Duda 편집기의 상단 바에서 Developer Mode 아이콘을 클릭하세요
- "Site HTML/CSS"를 클릭하여 선택 항목을 확장하세요
- 파일 목록에서 "body-end.html"을 클릭하세요
- 파일의 마지막 줄로 스크롤하세요
- 새 줄에 Asyntai 임베드 코드를 붙여넣으세요
- "Save"를 클릭하세요
- "Done"을 클릭하여 개발자 모드를 종료하세요
- "Publish"를 클릭하여 변경 사항을 배포하세요
중요: 개발자 모드는 사이트의 HTML과 CSS에 직접 접근할 수 있게 합니다. 사이트 기능이 깨지지 않도록 body-end.html 파일의 끝에만 코드를 추가하세요. 게시하기 전에 항상 변경 사항을 테스트하세요.
3단계: 설치 확인
변경 사항을 게시한 후 새 브라우저 탭이나 시크릿 창에서 웹사이트를 여세요. 오른쪽 하단에 채팅 위젯 버튼이 보여야 합니다. 클릭하여 올바르게 열리고 작동하는지 확인하세요.
위젯이 보이지 않나요? 사이트를 게시했는지 확인하세요 (저장만 한 것이 아닌지). 브라우저 캐시를 지우거나 시크릿 모드로 확인하세요. 코드가 HTTPS를 사용하는지 확인하세요 (기본적으로 사용됨). 브라우저 콘솔(F12)을 열어 JavaScript 오류가 없는지 확인하세요.
Weebly