웹사이트에 Botpress 봇을 삽입하고 테스트하는 방법은 무엇입니까?

Botpress 봇을 만들었고 이제 프로덕션 웹 사이트에서 시각화하려고 하지만 고객에게 노출하지는 않습니다. 이것을 어떻게 달성할 수 있습니까? 이 게시물에서는 모든 웹 사이트에서 Botpress 봇을 포함하고 테스트하는 방법을 살펴봅니다.

우리는 one of my previous 게시물에서 논의한 유사한 스크립트를 사용할 것이지만 이번에는 사용자 스크립트를 관리하고 활성 웹사이트에서 스크립트를 실행하는 도구인 Tampermonkey 과 함께 사용할 것입니다.

Google Chrome Tampermonkey extension을 사용하여 내장 스크립트를 저장하겠습니다. 아래 단계를 따르십시오.

Chrome 브라우저를 사용하여 Tampermonkey Google Chrome 확장 프로그램을 설치합니다

.

설치되면 Chrome 도구 모음에 표시되어야 합니다

.

Google Chrome 도구 모음의 Tampermonkey 아이콘

원하는 웹 사이트를 열고 tampermonkey 아이콘을 클릭한 다음 드롭다운 메뉴에서 "새 스크립트 만들기..."를 클릭합니다.

Tampermonkey에서 새 스크립트 생성

Botpress 포함 스크립트를 작성할 새 탭이 열릴 것입니다. 확인하십시오
봇을 삽입하려는 웹사이트를 가리킵니다. 내 예에서는 https://aabingunz.com

를 사용하고 있습니다.

활성 웹 사이트에 대한 Tampermonkey 사용자 스크립트 템플릿

아래 스니펫에서 봇 ID 및 봇 호스트 포트 세부 정보를 교체하고 이 스니펫을 "//Your code here..."아래에 붙여넣습니다. 참고: 봇은 HTTP를 통해 제공되어야 합니다. Botpress 봇에서 HTTP를 활성화하는 방법에 대한 자습서How to enable HTTPS in Botpress?를 확인하십시오.

const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://<host>:<port>/assets/modules/channel-web/inject.js';
    document.getElementsByTagName('head')[0].appendChild(script);
    script.onload = function() {
        window.botpressWebChat.init({
            host: 'https://<host>:<port>',
            botId: '<botid>',
            extraStylesheet: 'https://<host>:<port>/assets/modules/channel-web/custom-style.css'
        });
    }

스크립트를 저장하고 Tampermonkey에서 "활성화됨"스위치를 전환하여 스크립트를 활성화합니다

.

Tampermonkey에 저장된 내 스크립트

이제 https://aabingunz.com 또는 구성한 웹 사이트를 엽니다. 봇을 보고 테스트할 수 있어야 합니다.

Tampermonkey 아이콘에 1 알림이 표시되는지 확인합니다.

그게 다야. 이것이 우리가 모든 웹사이트에 Botpress 봇을 삽입하고 테스트하는 방법입니다. Tampermonkey를 사용하여 수행할 수 있는 다른 멋진 기능이 무엇인지 의견으로 알려주세요.

이 글은 https://www.aabingunz.com에 처음 게시되었습니다. Click me 작성자의 블로그에서 읽고 내 blog에서 더 많은 Botpress 팁과 요령을 찾으십시오.