WebView를 사용하여 모바일 앱에 봇을 임베드할 수 있습니다. WebView는 네이티브 모바일 애플리케이션 내에 포함 가능한 브라우저입니다. 네이티브 모바일 애플리케이션, 즉 앱은 특정 플랫폼(Android, iOS)을 위해 특별히 설계된 언어와 UI 프레임워크로 작성됩니다. WebView는 앱에서 iframe처럼 실행되는 브라우저 엔진입니다. 앱은 WebView를 사용하여 최종 사용자에게 웹사이트를 제공합니다.
WebView는 각 모바일 플랫폼에 맞게 특별히 생성되어야 합니다. 특정 플랫폼에 대한 다음 지침을 사용하여 WebView를 생성할 수 있습니다:
WebView로 봇을 로드할 때 웹 브라우저 위젯에 대한 모든 사용자 지정을 WebView에 적용할 수 있습니다. 모바일 앱에서 봇 위젯을 사용할 때 원활한 고객 경험을 제공하기 위해 몇 가지 사용자 지정 방법이 있습니다.
WebView가 트리거될 때 위젯 확장
- 위젯을 확장하려면 다음 스크립트를 사용할 수 있습니다. 코드에서 client-hash와 bot-hash를 교체해야 합니다.
<script>
(function(d, w, c) {
if (!d.getElementById("spd-busns-spt")) {
var n = d.getElementsByTagName('script')[0],
s = d.createElement('script');
var loaded = false;
s.id = "spd-busns-spt";
s.async = "async";
s.setAttribute("data-self-init", "false");
s.setAttribute("data-init-type", "opt");
s.src = 'https://cdn.in-freshbots.ai/assets/share/js/freshbots.min.js';
s.setAttribute("data-client", "< client - hash >");
s.setAttribute("data-bot-hash", "< bot - hash > ");
s.setAttribute("data - env ", "prod ");
s.setAttribute("data - region ", " in ");
if (c) {
s.onreadystatechange = s.onload = function() {
if (!loaded) {
c();
}
loaded = true;
};
}
n.parentNode.insertBefore(s, n);
}
})(document, window, function() {
Freshbots.initiateWidget({
autoInitChat: false,
getClientParams: function() {
return {};
}
}, function(successResponse) {
Freshbots.showWidget(true);
//이 코드 줄은 고객이 페이지에 도착했을 때 위젯을 열어 둡니다.
}, function(errorResponse) {});
}); < /script>WebView에 대한 다른 사용자 지정 가능한 매개변수로는 data-init-type 매개변수가 있으며, 이는 세 가지 다른 값 중 하나로 설정할 수 있습니다. 이들은 다음과 같습니다:
- normal | s.setAttribute("data-init-type", "normal");
normal로 설정하면 성능 최적화 없이 코드를 초기화하고 실행합니다. - opt | s.setAttribute("data-init-type", "opt");
매개변수 값을 opt로 설정하면 사용 가능한 모든 성능 최적화 기술로 코드를 초기화하고 실행합니다.
- delayed | s.setAttribute("data-init-type", "delayed");
매개변수 값을 delayed로 설정하면 채팅을 초기화하지 않고 위젯을 숨긴 상태로 코드를 초기화하고 실행합니다.
delayed 매개변수는 고객이 특정 작업을 수행한 후에 채팅 위젯이 나타나도록 하고 초기 페이지나 WebView에서 코드를 실행할 수 있도록 할 때 이상적입니다.
채팅 초기화 및 위젯 표시를 위한 아래 함수 호출
- Freshbots.initiateChat();
- Freshbots.showWidget(true); 최대화된 위젯 또는 Freshbots.showWidget(false); 최소화된 위젯
봇 위젯에서 헤더 제거
- 네비게이션 바에서 위젯 사용자 정의 클릭 > 사용자 정의 CSS 적용 > 다음 CSS 코드를 적용하여 헤더를 제거합니다.
.chat - head {
visibility: hidden!important;
} - 헤더를 제거한 후에는 앱 화면에 Freshbots.hideWidget(true); 함수를 호출하는 뒤로 가기 버튼을 제공할 수 있습니다. 이 함수는 봇 위젯을 숨기고 고객을 모바일 앱으로 되돌립니다.
- 헤더를 유지하고 싶다면 CSS를 사용하여 최소화 아이콘을 숨길 수 있습니다. 이렇게 하면 채팅 위젯이 최소화되지 않고 모바일 앱 경험에서 채팅 버블이 보이지 않게 됩니다.
더 나은 컨텍스트를 위한 데이터 미리 채우기
사용자 정의 매개변수와 사용자 정의 JS 함수를 사용하여 봇을 미리 채워 고객에게 더 나은 경험을 제공할 수 있습니다. 예를 들어, 봇이 로드되기 전에 이메일 주소나 전화번호와 같은 세부 정보를 미리 채워 고객이 개인화된 경험을 즐길 수 있도록 할 수 있습니다.
추가 질문이 있는 경우 freshbots-support@freshworks.com으로 문의하십시오. 기꺼이 도와드리겠습니다.