display a table - Voiceflow

Eetlevs Hi all! Any way to craft like a Table step where data collected calling an API i...

T

Tico | Voiceflow Assistant•3/3/24, 10:20 PM

Yes, you can display data collected from an API call in a table-like format using variables and blocks in Voiceflow. Here's a step-by-step guide:

API Block: Use an API block to make a request to your desired API. The API block will allow you to retrieve data from an external database.
Mapping the Response: Once you've made the API call, you'll receive a response. You can map this response to a variable. For example, if you're retrieving user profile data, you could map the response to a variable called
```
userprofile
```
userprofile
```
userprofile
```
userprofile
.
Displaying the Data: To display the data in a conversational format, you can use a Speak block. In the Speak block, you can reference the variables that you've mapped the API response to. For example, if you've mapped a user's name and email to the variables
```
name
```
```
name
```
and
```
email
```
```
email
```
, you could write in the Speak block: "The user's name is {name} and their email is {email}."
Formatting the Data: If you want to display the data in a more table-like format, you could use newline characters (
```
\n
```
```
\n
```
) to create line breaks in the Speak block. For example: "User Information:\nName: {name}\nEmail: {email}".

Remember, the Speak block in Voiceflow doesn't support actual table formatting, but you can use text and variables to create a similar effect.

Please note that the way you map the API response to variables will depend on the structure of the API response. You might need to use dot notation to access certain pieces of data in the response. For example, if the response is a JSON object that looks like this:

{ "user": { "name": "John", "email": "john@example.com" } }

{ "user": { "name": "John", "email": "john@example.com" } }

{ "user": { "name": "John", "email": "john@example.com" } }

{ "user": { "name": "John", "email": "john@example.com" } }, you would map the name to a variable with

response.user.name

response.user.name

response.user.name

response.user.name.

I hope this helps! Let me know if you have any other questions.

N

NiKo | Voiceflow•3/4/24, 8:00 AM

If you're using a Chat type agent, you can use markdown to format your response as a table.

N

NiKo | Voiceflow•3/4/24, 8:00 AM

W

wispy-oliveOP•3/13/24, 9:07 PM

This saves my life!

W

wispy-oliveOP•3/13/24, 9:08 PM

Can you do same for a chart or the likes?kinda mermaidjs

N

NiKo | Voiceflow•3/14/24, 10:22 AM

You can use mermaidjs in a chat widget extension.

import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs'
mermaid.initialize({ startOnLoad: false })

export const MermaidExtension = {
  name: 'MermaidRenderer',
  type: 'response',
  match: ({ trace }) =>
    trace.type === 'ext_mermaid' || trace.payload.name === 'ext_mermaid',
  render: ({ trace, element }) => {
    let render = document.createElement('div')
    render.id = 'graphDiv'
    const drawDiagram = async function () {
      const graphDefinition = `graph LR
      A --- B
      B-->C[fa:fa-ban Voiceflow]
      B-->D(fa:fa-spinner);`
      const { svg } = await mermaid.render('graphDiv', graphDefinition)
      render.innerHTML = svg
      element.appendChild(render)
    }
    drawDiagram()
  },
}

import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs'
mermaid.initialize({ startOnLoad: false })

export const MermaidExtension = {
  name: 'MermaidRenderer',
  type: 'response',
  match: ({ trace }) =>
    trace.type === 'ext_mermaid' || trace.payload.name === 'ext_mermaid',
  render: ({ trace, element }) => {
    let render = document.createElement('div')
    render.id = 'graphDiv'
    const drawDiagram = async function () {
      const graphDefinition = `graph LR
      A --- B
      B-->C[fa:fa-ban Voiceflow]
      B-->D(fa:fa-spinner);`
      const { svg } = await mermaid.render('graphDiv', graphDefinition)
      render.innerHTML = svg
      element.appendChild(render)
    }
    drawDiagram()
  },
}

import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs'
mermaid.initialize({ startOnLoad: false })

export const MermaidExtension = {
  name: 'MermaidRenderer',
  type: 'response',
  match: ({ trace }) =>
    trace.type === 'ext_mermaid' || trace.payload.name === 'ext_mermaid',
  render: ({ trace, element }) => {
    let render = document.createElement('div')
    render.id = 'graphDiv'
    const drawDiagram = async function () {
      const graphDefinition = `graph LR
      A --- B
      B-->C[fa:fa-ban Voiceflow]
      B-->D(fa:fa-spinner);`
      const { svg } = await mermaid.render('graphDiv', graphDefinition)
      render.innerHTML = svg
      element.appendChild(render)
    }
    drawDiagram()
  },
}

import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs'
mermaid.initialize({ startOnLoad: false })

export const MermaidExtension = {
  name: 'MermaidRenderer',
  type: 'response',
  match: ({ trace }) =>
    trace.type === 'ext_mermaid' || trace.payload.name === 'ext_mermaid',
  render: ({ trace, element }) => {
    let render = document.createElement('div')
    render.id = 'graphDiv'
    const drawDiagram = async function () {
      const graphDefinition = `graph LR
      A --- B
      B-->C[fa:fa-ban Voiceflow]
      B-->D(fa:fa-spinner);`
      const { svg } = await mermaid.render('graphDiv', graphDefinition)
      render.innerHTML = svg
      element.appendChild(render)
    }
    drawDiagram()
  },
}

More details here: https://developer.voiceflow.com/docs/render-custom-widgets-effects

Voiceflow

Custom Widgets & Effects (beta)

Render custom widgets like file upload, date pickers, and more!

W

wispy-oliveOP•3/18/24, 10:44 PM

sounds incredible!!