봇 빌더를 사용하면 기본적으로 제공되는 여러 기능을 사용할 수 있습니다. 여기에서 기능 사용에 대해 더 알아보세요. 기본 기능으로 제공되지 않는 특정한 것이 필요하다면 사용자 정의 Javascript (JS) 함수를 사용할 수도 있습니다.
목차
간단한 JS 함수의 예를 통해 이 작업이 어떻게 수행되는지 안내해 드리겠습니다. :
print: function (a, b, c) {
console.log("print called: a:" + a + " b: " + b + " c: " +c);
}위젯 스크립트에서의 구성:
먼저 JS 코드를 위젯 스크립트에 구성해야 합니다. 봇 위젯 스크립트를 얻으려면
- <strong data-identifyelement="522">배포</strong> 메뉴로 이동 > 셀프 서비스 위젯이 선택되었는지 확인 > 오른쪽에서 위젯 배포 스크립트를 복사합니다.
- 이 코드를 스크립트 편집기에 붙여넣어 이 코드 안에 스크립트를 포함할 수 있습니다
참고: 이 스크립트에 논리로서의 함수를 작성할 수 있습니다.
- getClientParams 함수가 정의된 후 사용자 정의 JS 함수를 포함합니다.
- 이 예에서는 이전에 보여드린 print 함수를 가져와 위젯 봇 스크립트 내에 정의합니다. 아래에서 생성된 봇 위젯 스크립트를 확인할 수 있으며, print 함수에 대한 JS 코드를 포함하고 강조 표시했습니다.
- 이 함수를 봇 스크립트에 정의하면 봇 흐름 어디에서나 호출할 수 있습니다.
봇 빌더 내부에서의 구성:
- <strong data-identifyelement="548">흐름 > 구성 ></strong><strong data-identifyelement="549"> </strong><strong data-identifyelement="550" dir="ltr">API 라이브러리 > 새로 추가</strong> 버튼을 클릭합니다.
- JS 함수에 대한 (1) 이름을 제공합니다. 이는 참조용입니다.
- URL / JS 함수 이름(2) 필드에 함수의 이름을 입력합니다. 이는 봇 위젯 스크립트에서 정의한 이름과 동일해야 합니다. 예에서는 "print"입니다. 함수 이름은 대소문자를 구분합니다.
- 메서드 유형을 (3) JS 함수로 설정하고 (4) 페이로드 유형을 JSON으로 설정합니다.
- <strong data-identifyelement="566">(4) 페이로드 콘텐츠</strong>에 전달해야 할 인수 값을 JSON 단일 행 값으로 입력합니다. 이러한 인수 값은 동적일 수도 있습니다. + 버튼을 사용하여 동적 값을 포함합니다.
<strong data-identifyelement="570">(6) </strong><strong data-identifyelement="571">필요한 응답 매개변수 추가</strong> 필드에서 성공 및 실패 응답 매개변수를 전달할 수 있습니다. 봇은 함수 호출 후 입력을 스크립트로 전달합니다. 함수가 실행되면 응답 매개변수를 기대합니다. 이러한 응답 매개변수를 스크립트에서 작업 결과에 따라 봇으로 전달할 수 있습니다.
여기에서 응답 값을 봇 흐름의 다른 부분에서 호출할 수 있습니다. 예를 들어, 고객 입력을 메시지나 질문으로 설정하는 경우 API의 콘텐츠를 삽입하거나 이 경우 JS 함수의 결과(성공 또는 실패 응답 매개변수)를 삽입할 수 있습니다.
대화 설정
함수가 정의되었으므로 봇 흐름 어디에서나 함수를 호출할 수 있습니다. 함수를 호출하려면 봇이 함수를 트리거하도록 대화에서 작업을 설정해야 합니다.
- 함수를 실행하려는 흐름으로 이동 > 새 작업 > JS 함수 트리거 > 방금 구성한 API를 선택합니다.
참고: 클라이언트 측 작업을 사용하여 JS 함수를 호출하는 경우, 사용자의 입력을 텍스트 필드로 받아야 합니다. 이는 함수가 응답을 반환하고 있음을 나타내기 위함입니다.
일부 사용 사례:
- 고객이 전화를 걸어야 하는 전화번호, 예를 들어 무료 전화번호가 있는 경우, 고객이 탭하거나 클릭할 수 있는 "전화하기" 버튼을 제공할 수 있습니다. 이는 JS 함수를 트리거하여 기본 전화 다이얼러에 무료 전화번호를 채웁니다. 이 경우 Android 기기에서는 WebView가 다이얼러에 접근할 수 있는 권한이 있어야 합니다. 전화 다이얼러 권한은 매니페스트 파일 수준에서 허용되어야 합니다.
<script>
// Freshbots를 시작합니다.
(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.freshbots.ai/assets/share/js/freshbots.min.js";
s.setAttribute("data-client", "xxxxxxxxxx");
s.setAttribute("data-bot-hash", "xxxxxxxxxxx");
s.setAttribute("data-env", "prod");
s.setAttribute("data-region", "us");
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;
},
// openPhone JS 사용자 정의 함수. 번호를 함수에 전달합니다.
openPhone: function(number){
document.location.href = "tel:" + number;
return {
message: "success"
}
},
},
function (successResponse) {},
function (errorResponse) {}
);
});
</script> - 봇을 모바일 앱에 배포하고 고객을 앱의 특정 페이지로 이동시키고 싶다면, 앱 내에서 딥 링크를 사용하여 이를 수행할 수 있습니다.
<script>
function getMobileOperatingSystem() {
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
if( userAgent.match( /iPad/i ) || userAgent.match( /iPhone/i ) || userAgent.match( /iPod/i ) )
{
return 'iOS';
}
else if( userAgent.match( /Android/i ) )
{
return 'Android';
}
else
{
return 'unknown';
}
}
(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.freshbots.ai/assets/share/js/freshbots.min.js";
s.setAttribute("data-client", "xxxxxx");
s.setAttribute("data-bot-hash", "xxxxxxx");
s.setAttribute("data-env", "prod");
s.setAttribute("data-region", "us");
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;
},
// 이 앱으로 전송된 사용자 이름과 플랫폼에 따라 앱을 로드합니다.
loadDeepLink: function(userName, platform){
const deepLinkInstagramDomain = "instagram://";
const deepLinkTwitterDomain = "twitter://";
const deepLinkFacebookDomain = "facebook://";
var urls = {
instagram: `http://www.instagram.com/${userName}`,
twitter: `http://www.twitter.com/${userName}`,
facebook: `http://www.facebook.com/${userName}`
}
switch(getMobileOperatingSystem()){
case 'Android':
case 'iOS':
urls["instagram"] = `${deepLinkInstagramDomain}user?username=${userName}`;
urls["twitter"] = `${deepLinkTwitterDomain}user?username=${userName}`;
urls["facebook"] = `${deepLinkFacebookDomain}user?username=${userName}`;
break;
default:
break;
}
document.location.href = urls[platform]
return {
message: "success"
}
}
},
function (successResponse) {},
function (errorResponse) {}
);
});
</script> - 비즈니스가 위치 기반이라면 고객에게 가장 가까운 매장을 표시하거나 해당 위치로 배송이 가능한지 확인하고 싶을 수 있습니다. 이 경우 브라우저 데이터를 기반으로 위치를 가져와 고객 경험을 개인화할 수 있습니다.
<script>
// 페이지 로드 중 위치 가져오기.
var lat = 0;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
function showPosition(position) {
long = position.coords.longitude;
lat = position.coords.latitude;
}
}
// Freshbots를 시작합니다.
(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.freshbots.ai/assets/share/js/freshbots.min.js";
s.setAttribute("data-client", "xxxxxxxxxx");
s.setAttribute("data-bot-hash", "xxxxxxxxxxx");
s.setAttribute("data-env", "prod");
s.setAttribute("data-region", "us");
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;
},
// getLocation JS 사용자 정의 함수.
getLocation: function () {
if (navigator.geolocation) {
return { message: "success", lat: lat, long: long };
} else {
return { message: "not supported", lat: "NA", long: "NA" };
}
},
},
function (successResponse) {},
function (errorResponse) {}
);
});
</script>