Freshchat에서 봇 빌더와 함께 사용자 정의 JavaScript 함수 사용하기
봇 빌더는 일상적인 작업을 위한 일반적인 기능을 제공합니다. Freshchat의 기본 기능에 대해 더 알아보세요. Freshchat의 이러한 기본 기능 외에도, 봇 빌더를 열어 여러 사용자 정의 JavaScript(JS) 함수를 정의하고 생성할 수 있습니다. 이러한 함수는 봇 빌더 내에서 선언, 정의 및 호출할 수 있습니다.
Freshchat에서 봇을 위한 사용자 정의 JS 함수를 사용하는 방법은 두 가지가 있습니다:
- 봇 빌더 내에서 함수 정의하기
- 봇 빌더 내에서 구성하기
- 대화 구성하기
- 제한 사항
봇 빌더 내에서 함수 정의하기
봇 빌더 내에서 JS 함수를 정의하고 이를 봇 흐름 내의 액션의 일부로 호출할 수 있습니다. 이는 WhatsApp, Insta, Facebook Messenger 등과 같이 JS 함수를 지원하지 않는 채널에 배포된 봇에서 함수를 호출해야 할 때 특히 유용합니다.
봇 빌더 내에서 구성하기
첫 번째 단계는 사용자 정의 JS 함수를 정의하는 것입니다. 이는 봇 빌더 내에서 두 곳에서 수행할 수 있습니다:
- 대화 내에서 직접 함수 정의하기: 봇 빌더에서 함수가 필요한 대화로 이동하여 오른쪽 하단의 + 아이콘을 사용하세요.
- 또는 Flows > Configure > Custom functions > New function으로 직접 이동할 수 있습니다. 어느 쪽이든 이 화면으로 이동하게 됩니다.
JS 함수의 이름과 참조용 설명을 입력하세요. 출력 유형은 JSON 파일로 표시됩니다. 이는 웹 서버로 데이터를 전송하거나 데이터베이스에 데이터를 저장할 때와 같이 구조화된 형식으로 데이터를 전송하거나 저장해야 할 때 특히 유용합니다.
코드 편집기를 사용하여 비즈니스 사용 사례에 맞게 함수를 정의하세요. 대화, API, 속성 또는 기타 함수를 동적 값으로 사용할 수 있습니다. 또한 대화에서 함수로 속성을 전달할 수 있습니다.
전체 응답 본문을 사용자 정의 함수에 추가하고 문자열 또는 배열을 반환하는 로직을 통합할 수 있습니다. 아래는 기능을 강조하는 예제입니다.
샘플 API 페이로드
다음은 API에서 받은 샘플 API 페이로드입니다. 주문 ID를 필터링하여 $160보다 큰 값만 가진 주문을 표시해야 한다고 가정해 보겠습니다.
{
"customer": {
"id": "cust_123456789",
"name": "John Doe",
"phone": "+1234567890",
"email": "john.doe@example.com"
},
"orders": [{
"order_id": "123456789",
"created_at": "2024-06-18T12:00:00Z",
"order_status": "shipped",
"payment_status": "paid",
"total_price": "300.00",
"currency": "USD",
"order_tracking_url": "https://app.orders.com/track/123456789",
"items": [{
"item_id": "item_2001",
"name": "Bluetooth Headphones",
"quantity": 1,
"price_per_unit": "150.00",
"total_item_price": "150.00",
"currency": "USD"
},
{
"item_id": "item_2002",
"name": "Air Pods",
"quantity": 1,
"price_per_unit": "150.00",
"total_item_price": "150.00",
"currency": "USD"
}
],
"payment_info": {
"payment_id": 10101,
"payment_type": "Gift Voucher",
"payment_gateway": "GV",
"amount": "300.00",
"currency": "USD"
}
},
{
"order_id": "987654321",
"created_at": "2024-06-19T15:30:00Z",
"order_status": "processing",
"payment_status": "pending",
"total_price": "200.00",
"currency": "USD",
"order_tracking_url": "https://app.orders.com/track/987654321",
"items": [{
"item_id": "item_3001",
"name": "Smartwatch",
"quantity": 1,
"price_per_unit": "200.00",
"total_item_price": "200.00",
"currency": "USD"
}],
"payment_info": {
"payment_id": 20202,
"payment_type": "Cards",
"payment_gateway": "AmEx",
"amount": "200.00",
"currency": "USD"
}
}
]
}
아래는 이 사용 사례를 달성하기 위해 사용자 정의 함수 라이브러리에 추가할 수 있는 JS 코드입니다.
function isJSONString(str) {
try {
JSON.parse(str);
return true;
} catch (error) {
return false;
}
}
function getOrderIdsAndItemsWithHighTotalPrice(jsonData, priceThreshold) {
let inputData;
if (typeof jsonData === "string" && isJSONString(jsonData)) {
inputData = JSON.parse(jsonData);
} else {
inputData = jsonData;
}
const orderIds = [];
const items = [];
if (inputData && inputData.orders && Array.isArray(inputData.orders)) {
inputData.orders
.filter(order => parseFloat(order.total_price) > priceThreshold)
.forEach(order => {
orderIds.push(order.order_id);
const itemNames = order.items.map(item => item.name).join(", ");
items.push(itemNames);
});
}
return {
orderIds,
items
};
}
const inputValue = data['Response_body'];
const highPriceOrders = getOrderIdsAndItemsWithHighTotalPrice(inputValue, 160);
console.log("Order IDs with total price greater than 160:", highPriceOrders.orderIds);
console.log("Items for each order:", highPriceOrders.items);
return {
orderIds: highPriceOrders.orderIds,
items: highPriceOrders.items
};
주문 ID 배열을 사용자 정의 함수의 응답으로 저장하여 봇의 버튼 입력 옵션에 추가할 수 있습니다. 함수를 작성하기 전에 API를 먼저 추가하고 응답 본문을 저장하여 사용자 정의 함수에서 사용할 수 있도록 하세요. 다음은 구성을 도와줄 스크린샷입니다.
이 페이지에서 응답 매개변수에 대한 테스트를 실행하고 응답 및 해당 콘솔 로그를 확인할 수도 있습니다.
대화 구성하기
이제 함수가 정의되었으므로 봇 흐름 어디에서나 함수를 호출할 수 있습니다. 함수를 호출하려면 봇이 함수를 트리거하도록 대화에서 액션을 설정해야 합니다. 함수를 실행하려는 흐름으로 이동하세요.
새로운 액션 > 사용자 정의 함수 트리거 > 방금 구성한 사용자 정의 함수를 선택합니다. 제한 사항 최대 출력 크기는 5 KB이며, 지원되는 코드의 최대 크기는 10 KB입니다. 단일 봇에 대해 생성할 수 있는 사용자 정의 함수의 최대 수는 20개입니다. 코드에 삽입할 수 있는 모든 입력 매개변수(대화, API, 속성, 함수)의 최대 크기는 200 KB 미만이어야 합니다. 사용자 정의 함수 내에서 다음 키워드와 라이브러리는 아직 지원되지 않습니다. 가능한 한 빨리 지원할 수 있도록 작업 중입니다. eval exec export import execfile evalfile open os.system dir path child_process new Function require rimraf shelljs mv spawn fork dns promisify pickle process.* subprocess input context.* fs.* util.* vm.* .prototype eval, exec, export, import, execfile, evalfile, open, os.system, dir, path, child_process, new Function, require, rimraf, shelljs, mv, spawn, fork, dns, promisify, pickle, process.*, subprocess, input, context.*, fs.*, util.*, vm.*, .prototype, setTimeout, setInterval, new Error, runinthiscontext, constructor.constructor, sub.constructor 웹사이트에서 함수 정의하기 웹사이트에서 JS 함수를 정의하고 봇 흐름 내에서 JS 실행 액션을 사용하여 트리거할 수 있습니다. 이는 웹사이트에 배포된 함수를 봇에서 호출해야 할 때 특히 유용합니다. 이 액션은 매개변수를 해당 스크립트 함수에 전달하고 응답을 봇에 반환합니다. 간단한 JS 함수 예제를 통해 이를 설명하겠습니다: 참고: 이 스크립트에 논리로서 어떤 함수도 작성할 수 있습니다. 이는 단지 하나의 예일 뿐입니다. 봇 빌더 내 구성 첫 번째 단계는 봇 빌더의 API의 일부로 작동하도록 사용자 정의 JS 함수를 정의하는 것입니다. Flows > Configure > API 라이브러리 > 새로 추가로 이동합니다. API의 이름을 지정합니다. 이는 참조용입니다. 메서드로 JS 함수, 페이로드 유형으로 JSON을 선택합니다. JS 함수의 이름을 지정합니다. 이는 참조용입니다. URL / JS 함수 이름 필드를 사용하여 함수의 이름을 입력합니다. 이는 다른 곳에서 사용자 정의 JS 함수를 참조할 때 사용할 이름과 동일해야 합니다. 예제에서는 "print"입니다. 함수 이름은 대소문자를 구분합니다. 전달해야 하는 인수 값을 단일 라인 JSON 값으로 페이로드 내용에 입력합니다. 이러한 인수 값은 동적일 수도 있습니다. + 버튼을 사용하여 동적 값을 포함합니다. 필수 응답 매개변수 필드를 사용하여 성공 및 실패 응답 매개변수를 전달합니다. 봇은 사용자 정의 JS 함수를 호출한 후 이 입력을 스크립트에 전달합니다. 함수가 실행되면 응답 매개변수를 기대하게 됩니다. 이 응답 매개변수를 스크립트에서 봇으로 액션의 결과에 따라 전달할 수 있습니다. 페이로드 내용에 전달해야 하는 값을 수집하도록 봇을 설정할 수 있습니다. 다음과 같이 보입니다: 봇 흐름의 다른 부분에서 응답 값을 호출할 수 있습니다. 예를 들어, 고객 입력을 메시지나 질문으로 설정하는 경우, API의 내용을 삽입하거나, 이 경우 JS 함수의 결과(성공 또는 실패 응답 매개변수)를 삽입할 수 있습니다. 대화 구성 이제 함수가 정의되었으므로 봇 흐름 어디에서나 함수를 호출할 수 있습니다. 함수를 호출하려면 봇이 함수를 트리거하도록 대화에서 액션을 설정해야 합니다. 함수가 실행되기를 원하는 흐름으로 이동 > 새로운 액션 > API 트리거 > 방금 구성한 API를 선택합니다. 이렇게 하면 봇이 이 액션을 실행하여 API를 호출하고, 구성된 JS 함수를 트리거합니다. 위젯 스크립트 내 구성 봇을 열고 최신 버전인지 확인 > 게시 > 배포 메뉴로 이동 > 드롭다운에서 셀프 서비스 위젯 선택 > 저장. 오른쪽에서 위젯 배포 스크립트를 복사하고 스크립트 편집기에 이 코드를 붙여넣어 이 코드 내에 스크립트를 포함할 수 있도록 합니다. getClientParams 함수가 정의된 후 사용자 정의 JS 함수를 포함합니다. 이전에 보여드린 print 함수를 예로 들어보겠습니다. 아래와 같이 위젯 봇 스크립트 내에 정의하겠습니다: 참고: Freshchat의 최신 버전에서 위젯 코드에 JS 함수를 추가하려면, SDK 문서를 여기에서 참조하십시오. 이 함수를 봇 스크립트에 정의한 후, 봇 흐름 어디에서든 호출할 수 있습니다. 참고: JS 함수를 호출하기 위해 클라이언트 측 액션을 사용하는 경우, 사용자의 입력을 텍스트 필드로 받아야 합니다. 이는 함수가 응답을 반환하고 있음을 나타내기 위함입니다. 제한 사항 이 기능은 웹사이트에서 사용하기에 적합하지만, Facebook Messenger, WhatsApp, Instagram과 같은 타사 채널에는 적용되지 않을 수 있습니다. 웹사이트에서 커스텀 함수를 직접 사용하는 또 다른 어려움은 여러 팀(웹 개발자, 웹 디자이너, 백엔드 팀)이 시작하기 위해 협력해야 한다는 점입니다. 몇 가지 사용 사례 고객이 전화를 걸어야 하는 전화번호가 있는 경우, 예를 들어 무료 전화번호, "전화하기"라는 버튼을 만들어 고객이 탭하거나 클릭할 수 있습니다. 이는 JS 함수를 트리거하여 기본 전화 다이얼러에 무료 전화번호를 입력하게 할 수 있습니다. 이 경우, Android 기기에서 WebView가 다이얼러에 접근할 수 있는 권한이 있어야 합니다. 전화 다이얼러 권한은 매니페스트 파일 수준에서 허용되어야 합니다. 모바일 앱에 봇을 배포하고 고객을 앱의 특정 페이지로 안내하려는 경우, 앱 내에서 딥 링크를 사용하여 이를 수행할 수 있습니다.사용자 정의 JavaScript 함수를 Freshchat의 봇 빌더와 함께 사용하기
귀하의 비즈니스가 위치 기반이라면 고객에게 가장 가까운 매장을 표시하거나 해당 위치로 배송이 가능한지 확인하고 싶을 것입니다. 고객 경험을 개인화하기 위해 브라우저 데이터를 기반으로 위치를 얻을 수 있습니다.
{
"customer": {
"id": "cust_123456789",
"name": "John Doe",
"phone": "+1234567890",
"email": "john.doe@example.com"
},
"orders": [{
"order_id": "123456789",
"created_at": "2024-06-18T12:00:00Z",
"order_status": "shipped",
"payment_status": "paid",
"total_price": "300.00",
"currency": "USD",
"order_tracking_url": "https://app.orders.com/track/123456789",
"items": [{
"item_id": "item_2001",
"name": "Bluetooth Headphones",
"quantity": 1,
"price_per_unit": "150.00",
"total_item_price": "150.00",
"currency": "USD"
},
{
"item_id": "item_2002",
"name": "Air Pods",
"quantity": 1,
"price_per_unit": "150.00",
"total_item_price": "150.00",
"currency": "USD"
}
],
"payment_info": {
"payment_id": 10101,
"payment_type": "Gift Voucher",
"payment_gateway": "GV",
"amount": "300.00",
"currency": "USD"
}
},
{
"order_id": "987654321",
"created_at": "2024-06-19T15:30:00Z",
"order_status": "processing",
"payment_status": "pending",
"total_price": "200.00",
"currency": "USD",
"order_tracking_url": "https://app.orders.com/track/987654321",
"items": [{
"item_id": "item_3001",
"name": "Smartwatch",
"quantity": 1,
"price_per_unit": "200.00",
"total_item_price": "200.00",
"currency": "USD"
}],
"payment_info": {
"payment_id": 20202,
"payment_type": "Cards",
"payment_gateway": "AmEx",
"amount": "200.00",
"currency": "USD"
}
}
]
}
아래는 이 사용 사례를 달성하기 위해 사용자 정의 함수 라이브러리에 추가할 수 있는 JS 코드입니다.
function isJSONString(str) {
try {
JSON.parse(str);
return true;
} catch (error) {
return false;
}
}
function getOrderIdsAndItemsWithHighTotalPrice(jsonData, priceThreshold) {
let inputData;
if (typeof jsonData === "string" && isJSONString(jsonData)) {
inputData = JSON.parse(jsonData);
} else {
inputData = jsonData;
}
const orderIds = [];
const items = [];
if (inputData && inputData.orders && Array.isArray(inputData.orders)) {
inputData.orders
.filter(order => parseFloat(order.total_price) > priceThreshold)
.forEach(order => {
orderIds.push(order.order_id);
const itemNames = order.items.map(item => item.name).join(", ");
items.push(itemNames);
});
}
return {
orderIds,
items
};
}
const inputValue = data['Response_body'];
const highPriceOrders = getOrderIdsAndItemsWithHighTotalPrice(inputValue, 160);
console.log("Order IDs with total price greater than 160:", highPriceOrders.orderIds);
console.log("Items for each order:", highPriceOrders.items);
return {
orderIds: highPriceOrders.orderIds,
items: highPriceOrders.items
};
전체 응답 본문을 사용자 정의 함수에 추가하고 문자열 또는 배열을 반환하는 논리를 통합할 수 있습니다. 아래는 기능을 강조하기 위한 예입니다.