Blog overzicht

Maak een webview in 3 stappen

Webview Radioselect

Een Webview is een apart venster die binnen je chatbot geopend kan worden. Hierdoor kan de gebruiker in verschillende gevallen op een meer intuïtieve manier communiceren.

Als je 1 of meer van de volgende 5 items in je chatbot wilt opnemen, kan het verstandig zijn om een Webview te gebruiken.

Webviews worden gemaakt in cloudcode. Gebruik de volgende 3 stappen om je webview te bouwen.

1. Maak Webview item

Het maken van je webview begint met een nieuwe actie waarbij je je webview maakt. De volgende cloudcode maakt een Webview voor Radioselectie aan die 3 opties bevat:

  1. Audio
  2. Display
  3. Camera

Wanneer de gebruiker een van de items selecteert, wordt een nieuwe parameter ‘categorie’ gemaakt met de bijbehorende waarde. Na voltooiing wordt het event ‘select’ geactiveerd. Zorg ervoor dat je dat event in je ontwerp hebt.

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. Maak een knop om toegang te krijgen tot de webview

De webview is nu gemaakt, maar we tonen geen enkele link of knop naar die webweergave. Laten we een knop bouwen zodat onze gebruikers op de knop kunnen klikken om toegang te krijgen tot de webview.

...

const buttons = new Buttons('Select a category')
buttons.addButton(new Button({
  label: 'Choose category',
  type: 'webview',
  value: url
}))

...

3. Stuur een bericht terug

De laatste stap is om een bericht te maken met een knop die we kunnen teruggeven aan de gebruiker.

...

const message = new Message(`Select a category ${url}`)
message.addResponse(buttons)

return message

...

Vind de volledige code voor deze RadioSelect Webview hieronder:

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
}
Demo aanvragen