웹 개발 프로젝트에 Chatwoot 통합

당신의 사이트에서 채팅 로봇이나 실시간 채팅 옵션을 실현할 생각은 없으나, 구체적인 도구를 모르거나, 채팅 로봇을 실현하는 방법, 혹은 100줄의 코드만 쓰는 것이 당신에게 지루하다고 생각하십니까?걱정 마, 찰트우드는 이 날을 구하러 왔어!
이 강좌에서 우리는 채팅을 사용하여 실시간 채팅 기능을 웹 응용 프로그램에 통합하는 방법을 배울 것이다.이 강좌에서 HTML, CSS, 자바스크립트를 사용하여 만든 간단한 weather app 을 사용합니다. 이것은 Netlify 에 배치됩니다.

그럼 차트우드는 뭐예요?
Chatwoot은 실시간 통신 채널의 고객 지원 도구로 기업이 전 채널의 수신함을 통해 탁월한 고객 서비스를 제공할 수 있도록 도와준다.Chatwoot은 한 곳에서 대화를 관리하고 관계를 맺으며 고객을 기쁘게 하는 데 필요한 모든 도구를 제공합니다.나는 무료 오픈소스 실시간 채팅 서비스에서 이 점을 발견했는데 어떻게 처음부터 채팅 로봇을 실현할 수 있는지 모르겠다.이 서비스는 나에게 매우 유용하다.
페이스북, 트위터, 왓츠앱 채널 통합, 사이트 실시간 채팅, API 채널, 모바일 앱 통합에도 사용될 수 있다.


당신은 왜 채팅 로봇이 필요합니까?
채팅 로봇은 고객이 잊혀지거나 방향을 잃지 않고 가능한 한 신속하고 순조롭게 A점에서 B점에 도착하도록 도와준다.채팅 로봇을 작은 안내서로 삼아 고객이 사이트의 정보를 조회하는 것을 돕다.채팅 로봇은 사이트의 가상 조수다.
그것들은 사용자가 사이트를 방문할 때 발생할 수 있는 흔한 고장 제거 문제를 해결하는 데 도움이 된다.이것은 원가 효과가 있는 것이다. 왜냐하면 너는 모든 고소/문제에 대리인을 지정할 필요가 없기 때문이다.그것은 사이트의 전체적인 체험을 개선시켰다.

통합 실시간 채팅 위젯
위에서 설명한 바와 같이 GitHub 저장소here를 볼 수 있는 간단한 날씨 애플리케이션을 사용할 것입니다.간단한 날씨 앱에서 채팅 로봇을 사용하면 무슨 소용이 있느냐고 물어볼 수도 있다.이 프로젝트는 기본적으로 OpenCageData API*를 사용하여 사용자의 실시간 위치를 가져옵니다. 때때로 사용자는 위치 접근을 막을 수 있습니다. 이것은 응용 프로그램의 작업을 막거나 코드에서 오류가 발견되면 실시간 채팅 상호작용 보고서를 사용할 수 있습니다.

우리 채팅 로봇을 실시합시다!!

먼저 Chatwoot에 계정을 만들어야 합니다.이 웹 사이트를 방문하십시오link.엔터프라이즈 링크를 사용하여 계정을 만듭니다.

다음은 계정을 성공적으로 만든 후 대시보드의 모양입니다.

현재 실시간 채팅 기능을 통합하려면 우리는 수신함으로 삽입 코드를 얻고 사이트를 우리의 채널로 선택할 것이다. 왜냐하면 우리는 그곳에서 채팅 로봇을 통합하고 싶기 때문이다.

받은 편지함 만들기 페이지에서 웹 사이트 세부 정보를 입력해야 합니다.계속하기 전에 올바른 사이트 URL이 있는지 확인하십시오.우리의 예는 https://weather-geo.netlify.app/이다.제목, 채널 인사말, 표어, 링크를 사용자 정의하여 채팅 로봇을 더욱 개인화시킬 수 있다.마지막 클릭Create Inbox.

프록시 추가 페이지에서 프로젝트 지원자를 현장 응답자로 선택해야 합니다.이런 상황에서 나는 틀림없다.

봐!!우리의 우편함은 준비가 다 되었다.다음 단계에서 JavaScript 코드를 복사합니다.모든 사용자에게 유일한 사이트 영패를 생성합니다. 우리는 그것을 숨겨서 사람들이 이 영패를 남용하지 않도록 합니다.

당신이 가장 좋아하는 텍스트 편집기를 엽니다. 제 예는 VS 코드입니다. 그리고 chatwoot.js라는 새 파일을 만듭니다.복사된 코드 세그먼트를 파일에 붙여넣습니다.

파일에 script 원본 위치를 포함하는 chatwoot.js 표시를 추가합니다.

<script src="src/chatwoot.js"></script>

현재 사이트 영패를 숨기려면 index.html 파일을 만드십시오.날씨와 실시간 위치에 사용되는 두 개의 API 키가 이 파일에 저장되어 있기 때문에 편집할 것입니다.config.js 파일에 config.js 를 추가하여 API 키가 저장소에 들어가지 않도록 하십시오.

현재 .gitignore 파일에서 영패를 내보내려면 chatwoot.js를 사용하십시오.

실시간 채팅 기능이 성공적으로 구현되었습니다!라이브 서버에서 구현을 로컬로 봅니다.

현재 Chatwoot dashboard에서 새로운 수신함 메시지를 볼 수 있습니다.답장을 하거나 테스트가 끝난 후에 해결된 것으로 표시할 수 있습니다.

이 작업을 로컬에서 보았습니다. Netlify와 같은 플랫폼에서 위탁 관리하려면 더 많은 절차를 거쳐야 합니다.Netlify 애플리케이션에서 저장소를 링크한 후에는 API 키와 토큰이 포함된 config.CHATWOOT_KEY 파일을 구축해야 합니다.이 작업을 수행하려면 Netlify > 배치 > 배치 설정으로 이동하여 구축 명령을 편집하십시오.

cd src && echo -e "var config = {\nWEATHER_API : 'API_KEY',\nGEOLOCATION_API : 'API_KEY',\nCHATWOOT_KEY: 'WEBSITE_TOKEN'\n}" > config.js

간단하게 말씀드리지만 config.js 폴더에 배치할 때 정확한 순서대로 src 파일을 만들고 다음 키를 포함합니다.
당신은 이제 드디어 당신의 사이트에서 Chatwoot의 기본적인 실현을 완성했습니다!!이후, 우리는 이제 성공적으로 계속 이야기를 나눌 수 있다.


결론
본고에서 우리는 Chatwoot의 기본적인 실현과 그 기능을 이해했다.더 많은 기능, 예를 들어 이벤트,Dialogflow 또는 Raas 구현을 추가하여 채팅 로봇으로서 자동 메시지를 실현할 수 있습니다.이 강좌는 단지 Chatwoot 서비스의 피상적인 부분만을 건드렸을 뿐이다.

Chatwoot에 대한 자세한 내용은 here를 참조하십시오.

해피 코딩!!