Back to Blog

How to create a Webview in 3 steps

Webview Radioselect
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.

Webviews are created within cloud code. Use the following 3 steps to build your Webview.

1. Create Webview item

Creating you Webview starts with a new action where you create your Webview. The following cloud code creates a Radio select Webview that contains 3 options:

  1. Audio
  2. Display
  3. Camera

When the user selects one of the items, a new parameter ‘category’ will be created with coresponding 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
}
Start for freeContact us