> ## Documentation Index > Fetch the complete documentation index at: https://ai-kb.automationanywhere.com/llms.txt > Use this file to discover all available pages before exploring further. # EKB 챗봇을 웹사이트 및 앱에 통합 > 필요한 곳 어디에든 원활한 통합 EKB의 대화형 AI 챗봇을 디지털 경험에 직접 가져오세요. 웹사이트, Next.js, React.js, Angular 또는 WordPress에 추가하려는 경우 통합 프로세스는 간단하며 기존 설정에 원활하게 맞도록 설계되었습니다. 이 가이드는 각 옵션을 안내하여 사용자가 필요한 곳에서 더 스마트한 고객 참여와 실시간 지원을 제공할 수 있도록 돕습니다. ## 웹사이트에 통합 웹사이트 어딘가에 챗봇을 추가하려면 아래 HTML 스크립트를 사용하여 챗봇을 "새 창" 형식으로 추가하세요. AI 기반 챗봇으로 웹사이트를 강화하여 방문자 문의를 원활하게 처리할 수 있습니다. 이 스크립트를 HTML 코드에 추가하세요. `Your_Project_ID_Here`를 프로젝트 ID로 교체하세요. ```
theme={null} ``` 웹사이트 하단 오른쪽에 챗봇을 채팅 버블로 추가하려면 아래 HTML 스크립트를 사용하세요. 즉각적인 지원을 제공하여 사용자가 EKB 챗봇과 쉽게 상호작용할 수 있게 합니다. 이 스크립트를 HTML 코드에 추가하세요. `Your_Project_ID_Here`를 프로젝트 ID로 교체하세요. ``` ``` ## Next.js 앱에 통합 EKB 챗봇을 Next.js 앱에 채팅 창으로 통합하려면 다음 지침을 따르세요: 1. 다음 스크립트를 `rootLayout` 또는 **App 파일**에 배치하세요: ```import Script from "next/script" theme={null} export default function TalkToEKB() { return (

Talk to EKB Now

) } ``` 2. 채팅 창이 표시되려는 컴포넌트에 다음 `
` 태그를 추가하세요. `
` EKB 챗봇을 Next.js 앱에 채팅 버블로 통합하려면 다음 지침을 따르세요: 1. 다음 스크립트를 `rootLayout` 또는 **App 파일**에 배치하세요: ```import Script from "next/script" theme={null} export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } ``` 2. 이전에 챗봇을 채팅 창으로 추가한 경우 채팅 위젯을 사용하는 동안 다음 `
` 태그를 제거하세요. `
` ## React.js 앱에 통합 1. public 폴더에 있는 index.html 파일의 `` 태그에 다음 스크립트를 추가하세요. ``` ``` 2. 채팅 창이 표시되려는 페이지 또는 컴포넌트에 다음 `
` 태그를 추가하세요. ```import React from "react"; theme={null} export default function Home() { return (
Card
New Season Arrivals
); }; ``` 1. public 폴더에 있는 index.html 파일의 `` 태그에 다음 스크립트를 추가하세요. ``` ``` 2. 이전에 챗봇을 채팅 창으로 추가한 경우 채팅 위젯을 사용하는 동안 다음 `
` 태그를 제거하세요. `
` ## Angular 프로젝트에 통합 1. public 폴더에 있는 index.html 파일에 다음 스크립트를 추가하세요. ``` theme={null} Angular ``` 2. 채팅 창이 표시되려는 페이지 또는 컴포넌트에 다음 `
` 태그를 추가하세요. ```
theme={null}

EKB Chatbot

Congratulations! Your app is running. 🎉

``` 1. public 폴더에 있는 index.html 파일에 다음 스크립트를 추가하세요. ``` theme={null} Angular ``` 2. 이전에 챗봇을 채팅 창으로 추가한 경우 채팅 위젯을 사용하는 동안 다음 `
` 태그를 제거하세요. `
` ## WordPress 사이트에 통합 WordPress 사이트에 챗봇을 추가하려면 WordPress 편집기의 `Custom HTML` 블록을 사용하여 페이지에 다음 jQuery 스크립트를 추가할 수 있습니다: ``` ``` WordPress 사이트에 챗봇을 채팅 버블로 추가하려면 WordPress 편집기의 `Custom HTML` 블록을 사용하여 위의 **채팅 창** 스크립트를 페이지에 추가한 다음 다음 CSS 스크립트를 추가하세요: ```.opbcb-chat-container { theme={null} border-radius: 20px; bottom: 90px; height: 88% !important; margin-left: 20px; margin-right: 20px; margin-top: 20px; max-height: 750px; max-width: 450px; position: fixed; right: 5px; transition: all .3s ease; width: 100%; z-index: 999; top: 30px !important; } ``` 페이지의 푸터에 채팅 버블을 추가하려면 CSS 코드와 함께 푸터의 `Custom HTML` 블록에 먼저 스크립트를 추가해야 합니다.