WordPress

이 가이드에서는 공식 플러그인으로 WordPress 사이트에 Quickchat AI Widget을 추가하는 방법을 설명합니다.

선택적으로 사용할 수 있는 설정 도구

• Widget 코드 검사하기. 붙여 넣은 코드를 입력한 Scenario ID와 비교합니다. 웹사이트를 가져오지는 않습니다.

• 배포 방식 비교하기. 명시한 채널, 웹사이트 접근 권한, 필요한 기능을 Quickchat AI 설정 옵션과 비교합니다. 웹사이트나 계정을 검사하지는 않습니다.

준비 사항

• 플러그인을 설치할 수 있는 WordPress 사이트(버전 6.0 이상)
• Quickchat AI Agent 플러그인(WordPress 플러그인 디렉터리에서 무료 제공)
• Quickchat AI 앱의 시나리오 ID

소요 시간: 약 2분

---

1단계: 플러그인 설치

WordPress 관리자에서 Plugins → Add New로 이동하여 Quickchat AI Agent를 검색하고 Install Now, Activate를 차례로 클릭하세요.

WordPress.org의 Quickchat AI Agent 페이지에서 설치하거나 Plugins → Add New → Upload Plugin에서 플러그인 ZIP을 업로드할 수도 있습니다.

---

2단계: Scenario ID 입력

활성화 후 Settings → Quickchat AI Agent로 이동하여 Scenario ID를 붙여 넣고 Save Changes를 클릭하세요.

Scenario ID를 찾는 위치

Quickchat AI 앱에 로그인하고 채널 → 내 웹사이트 → 설치에서 Scenario ID를 복사하세요. 시나리오 URL에서도 확인할 수 있습니다. https://app.quickchat.ai/i/your-scenario-id의 마지막 부분입니다.

---

3단계: 사이트에서 확인

사이트의 공개 화면을 열고 페이지 오른쪽 아래에 Quickchat AI 채팅 bubble이 표시되는지 확인하세요.

완료되었습니다!

WordPress 사이트에서 Quickchat AI 에이전트가 작동합니다 🎉

색상, 위치, 실행 버튼 크기, 환영 메시지, AI 동작 등 모든 Widget 설정은 Quickchat AI 앱의 채널 → 내 웹사이트에서 관리합니다. 변경 사항은 사이트에 자동으로 적용됩니다. 외형과 텍스트 옵션 전체는 웹사이트 가이드를 참고하세요.

---

문제 해결

채팅 Widget이 표시되지 않습니다

사이트에 채팅 bubble이 보이지 않으면 WP Rocket, LiteSpeed Cache, W3 Total Cache, Autoptimize 같은 캐시 또는 최적화 플러그인이 Widget 로더 스크립트를 캐시하거나 지연시키는 경우가 많습니다.

캐시, 최소화/결합, defer, JavaScript 지연 실행 등 모든 캐시 및 최적화 기능에서 로더를 제외하세요.

https://bubble.quickchat.ai/chat.js

예를 들어 WP Rocket에서는 이 URL을 Excluded JavaScript Files, Excluded from Deferred, Delay JavaScript Execution에 추가하세요. 제외한 뒤 사이트 캐시를 지우고 페이지를 새로고침하세요.

캐시를 지워도 표시되지 않습니다

다음 순서로 확인하세요.

• Scenario ID를 다시 확인하세요. Quickchat AI 앱의 채널 → 내 웹사이트 → 설치에서 다시 복사하여 Settings → Quickchat AI Agent에 불필요한 공백 없이 붙여 넣으세요.
• 플러그인이 활성화되어 있는지 확인하세요. Plugins에서 Quickchat AI Agent가 활성화 상태인지 확인하세요.
• 광고 차단기를 확인하세요. 브라우저 개인정보 보호 확장 프로그램이 Widget을 숨길 수 있습니다. 다른 브라우저를 사용하거나 확장 프로그램을 꺼보세요.
• 공개 화면을 확인하세요. Widget은 WordPress 관리자 내부가 아닌 공개 사이트에 표시됩니다.

”Quickchat AI Agent” 설정 페이지를 찾을 수 없습니다

WordPress 관리자의 Settings → Quickchat AI Agent에 있습니다. 없다면 플러그인이 아직 활성화되지 않은 것입니다. Plugins에서 Quickchat AI Agent를 찾아 Activate를 클릭하세요.

WooCommerce, Elementor, Divi, 페이지 빌더와 함께 사용할 수 있나요?

가능합니다. 플러그인은 테마의 푸터를 통해 사이트 전체에 Widget을 불러오므로 추가 설정 없이 WooCommerce와 모든 테마 또는 페이지 빌더와 함께 작동합니다.

Widget을 일시적으로 숨기거나 제거하려면 어떻게 하나요?

제거하려면 Quickchat AI Agent 플러그인을 비활성화하세요. 플러그인은 유지하면서 에이전트를 오프라인으로 전환하려면 앱의 채널 → 내 웹사이트 → 설치에서 사용 범위 및 접근 권한을 끄세요.

---

Widget 스크립트를 수동으로 추가하는 방법

플러그인을 설치하고 싶지 않다면 짧은 스크립트로 WordPress에 Quickchat AI Widget을 추가할 수 있습니다.

1. Widget 스크립트 가져오기

1. Quickchat AI 앱에 로그인하세요.
2. 채널 → 내 웹사이트 → 설치로 이동하세요.
3. Widget 스크립트를 복사하세요.

<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("init", "YOUR_SCENARIO_ID_HERE");
</script>

2. 사이트에 추가하기

설정에 맞는 방법을 사용하여 닫는 </body> 태그 바로 앞에 스크립트를 붙여 넣으세요.

• WPCode, Insert Headers and Footers 같은 코드 스니펫 플러그인: 푸터/본문 섹션에 스크립트를 붙여 넣고 저장하세요.
• 테마의 footer.php: Appearance → Theme File Editor에서 </body> 바로 앞에 붙여 넣으세요. 테마 업데이트가 변경 사항을 덮어쓰지 않도록 하위 테마를 사용하세요.

테마 푸터가 포함된 모든 페이지에 Widget이 표시됩니다.

팁

공식 플러그인이 같은 작업을 대신 처리하고 테마 업데이트 후에도 유지되므로 대부분의 사이트에 권장합니다.

도움이 필요하면 contact@quickchat.ai로 문의하세요.