Create a Dynamic Carousel using Knowledge Base Sources

Template
Function
1
Template
Function
by
W. Williams

Output a dynamic carousel card from your Voiceflow knowledge base content.

Created:

Heading

Voiceflow APIs used:

Channels
No items found.
Created By
W. Williams
This is some text inside of a div block.
Overview
This is some text inside of a div block.
by
This is some text inside of a div block.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Heading
Based in
This is some text inside of a div block.
Heading

Function Code Snippet


export default async function main({ inputVars }) {

const response = await fetch( 'https://general-runtime.voiceflow.com/knowledge-base/query', {
method: 'POST',
headers: {
'Authorization': inputVars.voiceflowApiKey,
'accept': 'application/json',
'content-type': 'application/json'
},
body: JSON.stringify( {
'question': inputVars.question,
'synthesis': true
} )
} );

const data = response.json

// Debug data
const debug = JSON.parse( JSON.stringify( data ) )
delete debug[ 'output' ]
delete debug[ 'chunks' ]
debug.chunks = data?.chunks?.length || 0

if ( ! response.ok || data?.output == null ) return {
next: {
path: 'unknown'
},
trace: [
{
type: 'debug',
payload: {
message: 'Debug: ' + JSON.stringify( debug )
}
}
]
}

// Build carousel object
const carousel = {
'layout': 'Carousel',
'cards': []
}

data.chunks.forEach( ( chunk ) => {
if ( chunk.score >= 0.8 && chunk.source.type == 'url' ) {
carousel.cards.push( {
imageUrl: 'https://image.thum.io/get/ogImage/noanimate/' + chunk.source.url,
title: '',
description: {
text: ''
},
buttons: [
{
"name": "Read More",
"request": {
"type": "url-button",
"payload": {
"label": "Read More",
"actions": [
{
"type": "open_url",
"payload": {
"url": chunk.source.url
}
}
]
}
}
}
]
} )
}
} )

// Return carousel
return {
next: {
path: 'default'
},
trace: [
{
type: 'debug',
payload: {
message: 'Debug: ' + JSON.stringify( debug )
}
},
{
type: 'text',
payload: {
message: data.output
}
},
{
type: 'carousel',
payload: carousel
}
]
}

}
copy-icon

Explore More Templates

Build and submit a Template to have it featured in the community.

ghraphic
No items found.
No items found.