botpress Chatbot을 자사/자신의 사이트에 게시하는 방법(Webchat)

2023년 10월 3일

개요

위챗 챗봇을 [Settings(설정)]을 하고 Shareable URL(공유 가능한 URL)를 사용하여 챗봇을 테스트하려는 사람들과 빠르게 챗봇을 공유하여 검증한 후 Embedded(내장된 스크립트)로 귀하의 웹사이트에 웹채팅을 추가합니다.

Botpress 계정 만들기, 새 챗봇 만들기와 Bot Templates(샘플 봇, 봇 템플릿) 만들기 및 게시까지 되었다면 바로
Botpress에서 웹챗 통합 설정(웹챗으로 Messaging Channels(Integrations) 하기) 로 이동하세요. 아직 샘플 챗봇을 만들지 못하셨다면 아래의 Botpress 계정 만들기부터 순서대로 따라가 주세요.

Botpress 계정 만들기, 새 챗봇 만들기

Botpress 계정 만들기, 새 챗봇 만들기는 아래의 게시글을 참조해주세요.

Botpress(botpress.com) : 2. 상세 사용법(계정 만들기, 새 챗봇 만들기 등)

Bot Templates(샘플 봇, 봇 템플릿) 만들기

이 예제에서는 AI 공개 Al Public Personality(공적 인물(공인) 따라하기 봇)을 사용하겠습니다. (I’m gonna use the AI public personality template for this example)

이용할 수 있는 샘플 봇(봇 템플릿)은 13종이 있습니다. 아래의 게시글을 참조하여 샘플 봇(봇 템플릿)들을 확인하고 만들어주세요.

Botpress(botpress.com) : 2. 상세 사용법 – Botpress Docs > Cloud > Getting Started(시작하기)

다음으로는 챗봇을 게시하고 게시되었는지 확인하십시오.(so the first thing is to make sure that you have published your chatbot)

이제 관리자 대시보드로 이동하여 채널 탭을 선택하고 웹 채팅을 열면 웹사이트에 스크립트를 추가하는 옵션이 제공됩니다.(now let’s go to the admin dashboard and select the channels tab open webchat and you will get the option for adding a script to your website)

미리 구성된 스크립트에는 웹사이트에 웹 채팅을 빠르고 쉽게 통합하는 데 필요한 모든 설정이 포함되어 있습니다.(the pre-configured script contains all the necessary settings for quick and easy integration of web chat onto your website)

Botpress에서 웹챗 통합 설정(웹챗으로 Messaging Channels(Integrations) 하기)

1. (아직 통합을 설치하지 않은 경우) Botpress Cloud에서통합 허브(새 탭에서 열림)로 이동
2. 웹챗 통합을 찾아서 연 다음 “봇에 설치” 버튼을 클릭하고 이제 봇으로 돌아갑니다.

Botpress로 구축한 웹챗을 사용하면 웹사이트나 애플리케이션에서 매력적이고 개인화된 채팅 경험을 만들 수 있습니다. 이 플랫폼을 사용하면 AI 기반 챗봇 프레임워크인 Botpress의 강력한 기능을 활용하여 웹 사이트나 애플리케이션과 원활하게 통합되는 챗봇을 구축하고 배포할 수 있습니다. 브랜드에 맞게 채팅 인터페이스의 모양과 느낌을 사용자 정의하고, 특정 요구 사항에 맞게 대화 흐름을 조정하고, 자연어 이해, 의도 인식, 대화 관리와 같은 고급 기능을 활용하세요. 웹챗을 사용하면 챗봇의 동작을 완벽하게 제어할 수 있으며 사용자에게 탁월한 대화 경험을 제공할 수 있습니다. Botpress용 Webchat을 통해 고객 참여를 높이고 의미 있는 상호 작용을 유도하세요.

구성 가능한 스크립트를 사용하여 챗봇을 맞춤 설정할 수 있습니다. 스크립트에는 웹 채팅의 모양과 동작을 조정할 수 있는 다양한 설정 및 옵션이 포함됩니다.(configurable script is that you will always need to update the script on your website whenever you make changes to the bot)

구성 가능한 스크립트의 경우 봇을 변경할 때마다 웹사이트에서 스크립트를 업데이트해야 한다는 점에 유의하십시오.(the onfigurable cript can be used to the necessary settings for quick and easy integration of web chat onto your website)

구성 가능한 스크립트는 챗봇을 사용자 정의하는 데 사용할 수 있습니다. 스크립트에는 웹 채팅의 모양 및 동작과 같이 조정될 수 있는 다양한 설정 및 옵션이 포함되어 있습니다. 구성 가능한 스크립트에 대해 여기서 주목해야 할 점은 . 봇을 변경할 때마다 웹사이트에항상 스크립트를 업데이트해야 한다는 것입니다

(the configurable script can be used to customize the chatbot the script includes various settings and options that can be adjusted such as the appearance and behavior of the web chat one thing to note here for the configurable script is that you will always need to update the script on your website whenever you make changes to the bot)

(아직 통합을 설치하지 않은 경우)Botpress Cloud에서 통합 허브 로 이동(새 탭에서 열림)

최초로 Intergration을 사용하는 경우, 아래와 같이 Intergration(통합)을 찾아 연결하라는 메세지가 나옵니다.

통합이 없습니다. Botpress Hub를 탐색하여 필요한 통합을 찾으세요.(You don’t have any integrations! Browse the Botpress Hub to find the integration you need.)

[webchat]을 찾아 연결해줍니다.

웹챗 통합을 찾아서 연 다음 “봇에 설치” 버튼을 클릭하고 이제 봇으로 돌아갑니다

[Install to Search your website for wwwseenbuykr]을 클릭하여 Webchat을 설치해줍니다.

웹챗 설정

WebChat 채널의 구성

[Settings], [Pre-configured], [Configurable] 이렇게 3부분으로 구성되어 있습니다. Configurable Script(구성 가능한 스크립트)를 통해 더 상세하게 Webchat을 제어할 수 있으나 가능하면 Pre-configured(사전 구성된 스크립트)가 권장됩니다.

[Settings(설정)]을 하고 Shareable URL(공유 가능한 URL)를 사용하여 챗봇을 빠르게 테스트하려는 사람들과 챗봇을 공유하여 검증한 후 Embedded(내장된 스크립트)로 귀하의 웹사이트에 웹채팅을 추가합니다.

Settings

[General], [Bot information], [Features]으로 구성되어 있습니다.

Change Bot Name, Subtitle, and Icon(1:17)

챗봇에 표시되는 부분들을 정리하였습니다. 아래의 이미지를 보고 Settings(설정) 설명을 보면 쉽습니다.

구성

[General], [Bot information], [Features]으로 구성되어 있습니다.

General

Bot name
Avatar URL : 이 url을 넣어도 어떤 경우 아바타가 깨지는 경우가 있습니다. botpress의 discord 채널(https://discord.botpress.com/t/15612132/hello-i-have-questions-about-the-widget-avatar-i-put-an-avat?threads%5Bquery%5D=Avatar)을 살펴보면 저희만 겪는 문제는 아닌데, 해결책을 모르겠습니다. [Configurable Script(구성 가능한 스크립트)]를 이용하여 botpress 문서중 Webchat( https://botpress.com/docs/cloud/channels/webchat/ )을 참조하여 수동으로 스크립트를 넣어주어도 아바타가 깨지는 문제는 해결을 못하였습니다.

Bot description
Composer placeholder : 대화를 시작하는 첫 문장입니다.
Stylesheet URL

Bot information

사이트주소, 연락처, 이메일, 이용약관, 개인 정보 정책 페이지를 연결할 수 있습니다. 채팅창에서 우측 최상단에 i를 클릭하였을때 표시됩니다.

Features

웹채팅 페이지 헤더에 옵션이 추가됩니다.

Show Bot Information(봇 정보 표시), Show “Created with Botpress”(“Botpress로 생성됨” 표시), Clear conversation on exit(종료 시 대화 지우기), Allow user to delete conversation(사용자가 대화를 삭제하도록 허용)로 구성되어 있습니다.

Show Bot Information(봇 정보 표시) : 활성화하면 챗봇을 클릭했을때 챗봇이 표시되지 않고 바로 이미지(이미지-1)처럼 챗봇 정보가 표시됩니다.
Show “Created with Botpress”(“Botpress로 생성됨” 표시)
Clear conversation on exit(종료 시 대화 지우기) : 이 기능을 사용할때도 botpress의 summary 기능이 살아있는지는 나중에 확인후 업데이트하겠습니다.
Allow user to delete conversation : 사용자가 대화를 삭제하도록 허용할지 허용하지 않을 지를 선택할 수 있습니다.

Pre-configured(사전 구성된 스크립트)

Shareable URL(공유 가능한 URL)

공유 가능 링크를 사용하여 챗봇을 빠르게 테스트하려는 사람들과 챗봇을 공유할 수 있습니다 .

Embedded(내장된 스크립트)

이 스크립트는 귀하의 웹사이트에 웹채팅을 추가합니다. 스크립트를 복사하여 <body></body>HTML 페이지의 태그에 붙여넣을 수 있습니다. 이 방법은 귀하의 웹사이트에 웹채팅을 추가하는데 권장되는 방법입니다.

Configurable Script(구성 가능한 스크립트)

Configurable Script(구성 가능한 스크립트)를 사용하고 싶은 경우에는 document중 Webchat 을 참조하세요.

웹 채팅 페이지의 헤더에 옵션이 추가됩니다. Bot 정보 표시 “Botpress로 생성됨” 표시 종료 시 대화 지우기사용자가 대화를 삭제하도록 허용(These will add options to the header of the webchat page.Show Bot InformationShow “Created with Botpress”Clear conversation on exitAllow user to delete conversation)

워드프레스 사이트에 코드 넣기

내장된 스크립트에서 스크립트를 복사하여 <body></body>HTML 페이지에 넣어줍니다.

Header and Footer plugin으로 간단히 넣을 수 있습니다.

Header and Footer plugin(워드프레스 플러그인, 사이트 소유권확인, 애널리틱스 분석코드, 구글 애드워즈의 리마케팅 태그를 편집할 수 있는 플러그인)

Trouble Shooting(문제해결)

웹사이트에 챗봇이 표시되지 않는 문제 : 워드프레스 bethme를 사용하는 경우

Sticky arrow 확인 요망

워드프레스 테마로 bethme를 사용하는 경우에도 botpress AI챗봇은 잘 작동합니다. 그런데, 게시글(post)에서 게시글(post) 하단에 아래의 이미지와 같이 이전 게시글과 다음 게시글로 안내하는 Sticky arrow가 있는 경우, Sticky arrow때문에 AI챗봇이 보여지지 않습니다.

이 경우, Betheme로 이동하여 [Global] -> [Navigation & share] -> [Navigation]의 [Option]에서 [Sticky arrows]를 풀어주시면 AI챗봇이 잘 보이고 잘 작동합니다.

모바일에서 User, Wishlist, Cart에 가려 botpress 챗봇을 이용할 수 없는 경우

모바일에서 파랑색 네모처럼 botpress 챗봇이 User, Wishlist, Cart에 가려 이용할 수 없는 경우에는

[Shop] -> [General] -> [Mobile]로 이동하여 [Sticky shop menu] 메뉴를 [Hide]로 변경해주세요.

링크 공유

마지막으로 다른 사람들과 챗봇을 공유하고 피드백을 얻기 위한 공유 가능한 링크를 얻습니다.( and lastly you get the shareable link to share your chatbot with others and get feedback)

이 예제에서는 미리 구성된 스크립트를 사용하겠습니다.(I’m gonna use the pre-configured script for this example)

이 튜토리얼에서는 기본 HTML 템플릿을 사용하고 있습니다. (for this tutorial I am using a basic HTML template )

이 페이지를 실행하려면 VS Code의 Live Server를 사용하겠습니다.(I’m going to use the vs codes live server to run this page)

미리 구성된 스크립트를 이 HTML 페이지의 본문 태그에 붙여 넣습니다. 이렇게 하면 WordPress 웹 채팅을 웹사이트에 성공적으로 통합할 수 있습니다.(let’s paste the pre-configured script in the body tag of this HTML page this way you have successfully integrated the WordPress web chat to your website)

또한 챗봇을 다른 사람들과 공유하려면 Studio로 이동하여 공유 버튼을 클릭하면 됩니다.(moreover if you want to share your chatbot with others you can simply go to studio and click the share button)

이 동영상이 마음에 들기를 바랍니다.(I hope you like this video)

at about building 부분은 예제의 제목으로, 챗봇을 만들기 위한 튜토리얼이라는 것을 나타냅니다.

the body tag of this HTML page this way

you have successfully integrated the

WordPress web chat to your website

moreover if you want to share your

chatbot with others you can simply go to

studio and click the share button

Search your website(웹사이트 검색이 가능한) chatbot 만들기

www.aiforu.kr만 Knowledge Base로 추가하고 시도해 보아주세요.

24.1.20에 Microsoft Azure유류로 가입하여 이용해보려고 하였으나 과금 체계를 찾을 수 없어 포기하였습니다.

Botpress 계정 만들기, 새 챗봇 만들기는 아래의 게시글을 참조해주세요.

Botpress(botpress.com) : 2. 상세 사용법(계정 만들기, 새 챗봇 만들기 등)

사실 이 샘플 챗봇이 Bing API 키를 넣을 것으로 요구하는 것이지 저는 Bing을 통해 검색할 필요는 전혀 없습니다.

Bing Web Search API key 발급을 도저히 할 수가 없습니다. 이하는 혹시 몰라 남겨둡니다. Bing Web Search API key 없이 www.aiforu.kr 웹서핑=딥런닝으로 잘 운영되면 삭제해주세요.

1. 웹사이트 검색 봇을 시작하기 전에 검색 애플리케이션에 연결해야 합니다. 봇에 Bing API 키가 없습니다. https://www.microsoft.com/en-us/bing/apis/bing-web-search-api에서 생성 단계를 수행하면 됩니다.

2. 리소스가 생성되면 리소스 개요를 열고 “키를 관리하려면 여기를 클릭하세요”를 누르세요.

3. API 키를 복사하려면 키 1 옆에 있는 “클립보드에 복사”를 클릭하세요.

4. Botpress로 돌아가서 “Chatbot 설정”으로 이동합니다.

5. “Bot Variables(봇 변수)”에서 “bing-search-api-key”를 클릭한 다음 “Default Value(기본값)”을 클릭하고 Bing에서 받은 Api 키를 붙여넣습니다. 그런 다음 변경 사항이 반영되도록 페이지를 새로 고치세요. 위의 지침에 따라 검색 봇을 시작하고 실행하세요! 궁금한 점이 있으면 채팅(왼쪽 하단)하세요. 🙂

Before you get started with your website search bot, you need to connect with with a search application.

Your bot is missing your bing api key. You can get by going through the steps to create it here : https://www.microsoft.com/en-us/bing/apis/bing-web-search-api

Once it’s created, open your resource’s overview and hit “click here to manage keys”
Click “Copy to clipboard” next to Key 1 to copy the api key.
Back in Botpress, go to “Chatbot Settings”
Under “Bot Variables”, click “bing-search-api-key”, then “Default Value” and paste the Api key you got from Bing. Afterwards, refresh the page so that the changes can be reflected.

Follow the instructions above to get your search bot up and running! Chat with us (bottom left) if you have any questions. 🙂

Bing Web Search API는 어떻게 발급받을 수 있을까요

Bing Web Search API는 Microsoft Azure에서 제공하는 API로, Bing 검색 결과를 웹 애플리케이션에 통합할 수 있습니다. Bing Web Search API를 발급받으려면 다음 단계를 따르세요.

Microsoft Azure에 계정을 만듭니다.
Azure Portal(https://portal.azure.com/)에 로그인합니다.
https://portal.azure.com/#create/microsoft.bingsearch
Bing Web Search를 검색하고 만들기를 클릭합니다. 입력사항들은 영어로 작성하셔야 합니다.
Bing Web Search API 페이지에서 API 키 탭을 클릭합니다.
새 키 만들기를 클릭합니다.
키 이름을 입력하고 만들기를 클릭합니다.

새 키가 생성되면 키 탭에서 키를 복사합니다. 이 키는 Bing Web Search API를 호출할 때 사용됩니다.

Bing Web Search API를 사용하려면 다음 단계를 따르세요.

Azure Portal에서 검색 > API & 서비스 > Bing Web Search를 클릭합니다.
사용 탭을 클릭합니다.
키 탭에서 키를 클릭합니다.
복사한 키를 입력하고 연결을 클릭합니다.
테스트 탭을 클릭합니다.
쿼리 입력란에 검색어를 입력하고 검색을 클릭합니다.

검색 결과가 표시됩니다.

Bing Web Search API의 자세한 내용은 Microsoft Docs: https://docs.microsoft.com/en-us/azure/cognitive-services/bing-web-search/overview를 참조하세요.

상희 김

검색엔진최적화, 인바운드마케팅, 유튜브최적화 전문