Use Flow to create webviews and improve the customer journey. This article will show how to create webviews in 3 steps.
A Webview is a separate view that can be opened within your chatbot. This allows the user to interact in a more intuitive way for several cases.
If you want to incorporate 1 or more of the following 5 items in your chatbot, it might be wise to use a Webview.
Article
Date picker
Radio select
Multiple select
Terms
Webviews are created within cloud code. Use the following 3 steps to build your Webview.
1. Create Webview item
Creating your Webview starts with a new action where you create your Webview. The following cloud code creates a Radio select Webview that contains 3 options:
Audio
Display
Camera
When the user selects one of the items, a new parameter 'category' will be created with the corresponding value. When completed, the event 'select' will be triggered. Make sure to have that event in your design.
async payload => {
const url = await webview.radioSelect.create({
ref: 'category',
title: 'Choose a category',
items: [{
title: 'Audio',
subtitle: 'Sound, music and noise',
onSelect: {
eventName: 'select',
params: new Param('category', 'audio')
}
}, {
title: 'Display',
subtitle: 'Screen, video and pixels',
onSelect: {
eventName: 'Select',
params: new Param('category', 'display')
}
}, {
title: 'Camera',
subtitle: 'Lenses, posture and flashes',
onSelect: {
eventName: 'Select',
params: new Param('category', 'display')
}
}]
})
2. Create a Button to access the Webview
The Webview is now created but we are not showing any link or button towards that Webview. Let's build a button so our users can click the button to access the Webview.
...
const buttons = new Buttons('Select a category')
buttons.addButton(new Button({
label: 'Choose category',
type: 'webview',
value: url
}))
...
3. Return a message
The last step is to create a message with a button that we can return to the user.
...
const message = new Message(`Select a category ${url}`)
message.addResponse(buttons)
return message
...
Find the complete code for this RadioSelect Webview below
async payload => {
const url = await webview.radioSelect.create({
ref: 'category',
title: 'Choose a category',
button:{
label:'Done',
},
items: [{
title: 'Audio',
subtitle: 'Sound, music and noise',
onSelect: {
eventName: 'RadioEvent',
params: new Param('category', 'audio')
}
}, {
title: 'Display',
subtitle: 'Screen, video and pixels',
onSelect: {
eventName: 'RadioEvent',
params: new Param('category', 'display')
}
}, {
title: 'Camera',
subtitle: 'Lenses, posture and flashes',
onSelect: {
eventName: 'RadioEvent',
params: new Param('category', 'display')
}
}]
})
const buttons = new Buttons('Select categories')
buttons.addButton(new Button({
label: 'Choose categories',
type: 'webview',
value: url
}))
const message = new Message(`Choose categories ${url}`)
message.addResponse(buttons)
return message
}
View full article
