Để hiển thị cho dialogflow chúng ta có thể sử dụng rich response trong intent một cách dễ dàng. Tuỳ vào các platform bạn nhúng dialogflow vd Google Assistant, Facebook Messenger hay Viber. Các nền tảng này cho phép bạn tạo các rich response như hình ảnh, Card và nút nhấn, list các hình ảnh…
Hiển thị rich response thông qua cài đặt visual
Bạn tạo 1 intent, kéo xuống dưới có phần response. Với default response chỉ là text. Đối với response này bạn nhập nhiều câu trả lời trên từng dòng khác nhau và nó sẽ được ngẫu nhiên chọn khi intent được kích hoạt.
Tuy nhiên để hiển thị rich response thì bạn click vào dấu cộng. Chọn nền tảng chat bot tích hợp như google Assistant, Facebook messenger nếu sau này bạn tích hợp với chat của Facebook… Bạn có thể chọn nhiều nền tảng khác nhau vì Dialogflow cho phép bạn kết nối một lúc hiểu platform
Vd bạn chọn Facebook messenger. Thì nó cho phép bạn chọn một số cách hiển thị như Hình ảnh, List, Card và nút nhấn. Đơn giản nhất thì bạn cứ chọn từng cái và thiết lập để hiểu chứ giải thích dông dài cũng vậy thôi…
Hiển thị rich response thông qua Fulfillment
Khi bạn đã bật chế độ webhook cho intent thì các hiển thị response trên sẽ không được thực thi trừ khi webhook của bạn bị lỗi không thể thụ lý thì nó mới được sử dụng. Vì vậy khi bạn đã xác định phải code trong fulfillment cho các intent thì bạn cũng có thể hiển thị các rich response thông qua code
Để hiển thị text
Bạn nhớ 2 hàm welcome và Fallback? nó sử dụng Agent.add(‘nội dung hiển thị’);
function welcome(agent) {
agent.add(`Chào bạn`);
}
function fallback(agent) {
agent.add(`Mình không hiểu`);
}Lập lại câu nói của người dùng. Đôi lúc bạn cần lặp lại nguyên văn câu nói của người dùng để xác nhận. Chúng ta sử dụng phương thức Agent.query;
function repeak(agent){
let userTalk = agent.query;
agent.add(userTalk);
}Hiển thị random câu nói trong fulfillment. Nếu trong Console thì ngay mục response bạn có thể dễ dàng thêm các dòng. Và Dialogflow sẽ hiển thị ngẫu nhiên các dòng này. Tuy nhiên chúng ta cũng có thể làm tương tự ngay trên webhook inline Editor
function randomResponse(agent) {
var possibleResponse = [
'Response 1',
'Response 2',
'Response 3',
'Response 4',
'Response 5',
'Response 6'
];
var pick = Math.floor( Math.random() * possibleResponse.length );
var response = possibleResponse[pick];
agent.add( response );
}Để hiển thị hình ảnh:
Bạn cần khai báo xử dụng module này trong index.js ngay trên phần khai báo hằng số ngay phía trước hàm exports.dialogflowFirebaseFulfillment = functions.https.onRequest()
const {Card, Image, Suggestion} = require(‘dialogflow-fulfillment’);//hiển thị hình ảnh
function hienThiHinhAnh(agent) {
agent.add(new Image(‘https://phucma.com.vn/wp-content/uploads/2017/09/B%C3%BAt-x%C3%B3a-cao-c%E1%BA%A5p-artline-japan.jpg'));
}Để hiển thị card và nút nhấn
Đoạn code sau sẽ hiển thị Card với title, Hình ảnh, mô tả và 2 nút nhấn
function muaBut(agent) {
agent.add(`Bạn chọn mua cây bút Artline này đúng không a`);
agent.add(new Card({
title: `Bút Lông Kim Artline`,
imageUrl: ‘https://phucma.com.vn/wp-content/uploads/2018/09/B%C3%BAt-l%C3%B4ng-kim-m%C3%A0u-%C4%91%E1%BA%B9p.jpg',
text: `Bút lông kim Artline nổi tiếng mực nhiều và màu đẹp` }));
agent.add(new Suggestion(`chọn mua`));
agent.add(new Suggestion(`huỷ`));
}Để thụ lý khi khách hàng nhấn nút Chọn Mua hoặc Huỷ thì rất đơn giản, bạn chỉ cần tạo ra 2 intent là IChonMua và IHuy. Và training cho 2 intent này
- IChonMua bạn đặt câu training phrase là “Chọn Mua”
- IHuy thì câu training phrase là “Huỷ”.
Vì khi khách hàng nhấn nút Chọn Mua thì tương đương với việc khách hàng gõ phím là chọn mua. Như thế Intent IChonMua sẽ được kích hoat.
Mình hy vọng bạn thích bài viết này
1 thought on “Lập trình hiển thị cho Dialogflow”