Sending Replies
Khoros Flow provides you with all the available response templates. Use the response templates within your custom code to build and send rich template responses.
There are two methods to send back messages to a user.
- Cloud function
- Asynchronous reply method
Cloud function
The first method involves returning directly within the cloud function.
async payload => {
return new Message('Just saying hello')
}
You can also reply with multiple messages, such as voice and speech-based interfaces.
Below is an example of multiple messages.
async payload => {
return [
new Message('Cats are amazing creatures!'),
new Message('Or are you a dog person?')
]
}
Asynchronous Reply Method
When you make an asynchronous call within your code, you cannot reply with a message using a return function. To reply with a message, Khoros Flow provides a simple method called a reply
.
You can use a reply to send a single message back to a user.
async payload => {
// Send back a reply message to a user.
// Use this when you have async logic like making a request to a REST API.
const message = new Message('Just saying hello')
reply(message)
}
Examples
Below are code examples of all the various supported message templates. For a complete reference, see response templates.
Delays
You can send text bubbles or any other template with a delay.
async payload => {
const text1 = new Text('This is 1')
text1.delay = 1000 // 1 sec
const text2 = new Text('This is 2')
text2.delay = 2000
const text3 = new Text('This is 3')
text3.delay = 2000
const message = new Message("This is 1, 2, 3")
message.addResponse(text1)
message.addResponse(text2)
message.addResponse(text3)
return message
}
Text
Below is a text code example.
async payload => {
const image = new Image({
title: "Image description",
url: "https://..."
})
return new Message('Cats are amazing creatures!')
.addResponse(image)
}
Quick Replies
You can also add quick replies in addition to text only. The example below shows how the first quick reply triggers an event. The second quick reply is a text type that sends text to the platform.
async payload => {
const text = new Text('Would you like to order the cat image?')
text.addQuickReply(new QuickReply({
label: '👍',
value: 'confirm order',
type: 'event'
}))
text.addQuickReply(new QuickReply({
label: '👎',
value: 'no',
type: 'text'
}))
const message = new Message('Fallback text').addResponse(text)
return message
}
Multiple bubbles
The example below shows two message bubbles in a chat app like Messenger while delivering only a single spoken message, such as on Alexa.
async payload => {
const image1 = new Image({
title: "Image description",
url: "https://..."
})
const image2 = new Image({
title: "Image description",
url: "https://..."
})
return new Message('Cats are amazing creatures!')
.addResponse(image1)
.addResponse(image2)
}
Audio
Here is an example of how to send an audio file.
async payload => {
const audio = new audio({
title: "Cool car",
url: "https://flow.ai/audio/vw.m4a"
})
return new Message('listen to awesome audio')
.addResponse(audio)
}
Buttons
Here is an example of how to send a message with a buttons template.
async payload => {
// Send a message with a buttons template
const buttons = new Buttons("Vintage bikes and more")
// Add a button
.addButton(new Button({
label: "View website",
type: "url",
value: "https://flow.ai"
}))
// Add another button
.addButton(new Button({
label: "Special offers",
type: "postback",
value: "Show me special offers"
}))
return new Message('Visit vintagebikes.. for all our offers')
.addResponse(buttons)
}
Button types
URL
Here is an example of a button that opens a web page.
async payload => {
// Send a message with a buttons template
const buttons = new Buttons("Vintage bikes and more")
// Add a button
.addButton(new Button({
label: "View website",
type: "url",
value: "https://flow.ai"
}))
return new Message('Visit vintagebikes.. for all our offers')
.addResponse(buttons)
}
Postback
Here is a code example of how selecting a button sends a text.
// Send a message with a buttons template
const buttons = new Buttons("Vintage bikes and more")
// Add a button
.addButton(new Button({
label: "Special offers",
type: "postback",
value: "Show me the special offers"
}))
return new Message('Visit vintagebikes.. for all our offers')
.addResponse(buttons)
}
Phone number
Here is a code example of selecting a button to call a number.
async payload => {
// Send a message with a buttons template
const buttons = new Buttons("Vintage bikes and more")
// Add a button
.addButton(new Button({
label: "Call now",
type: "tel",
value: "+1 00 0000 0000"
}))
return new Message('Visit vintagebikes.. for all our offers')
.addResponse(buttons)
}
Card
A card can contain an image, title, subtitle, and buttons.
Here is a code example of creating a card.
async payload => {
// Create a button
const button = new Button({
type: 'url',
label: 'Flow.ai website',
value: 'https://flow.ai'
})
// Create a card
const card = new Card({
title: "Corporate headquarters",
subtitle: "WeWork, Toronto, Canada"
})
.addButton(button)
// Create a message with fallback speech
const message = new Message('Our corporate headquarters is at WeWork, Toronto, Canada')
message.addResponse(card)
return message
}
Carousel
A carousel is a collection of cards. Here is a code example for a carousel.
async payload => {
// Create a card
const card1 = new Card({
title: "Corporate headquarters",
subtitle: "1 Infinite Loop, Cupertino, California",
media: new Media({
url: 'http://...',
type: 'image'
})
})
.addButton(new Button({
type: 'url',
label: 'Visit website',
value: 'http://awesomecorp.com'
}))
// Create another card
const card2 = new Card({
title: "Local office",
subtitle: "1 Infinite Loop, Cupertino, California"
})
.addButton(new Button({
type: 'url',
label: 'Visit website',
value: 'http://awesomecorp.com'
}))
const carousel = new Carousel()
.addCard(card1)
.addCard(card2)
return new Message('Our corperate headquarters is at 1 Infinite Loop, Cupertino, California, our local...')
.addResponse(carousel)
}
File
Here is a code example of how to create a new file.
async payload => {
const file = new File({
title: "Cool car brochure",
url: "https://flow.ai/video/brochure.pdf"
})
return new Message('Brochure of a cool car')
.addResponse(file)
}
Image
async payload => {
const image = new Image({
title: "Image description",
url: "https://..."
})
return new Message('Images are not supported on your device!')
.addResponse(image)
}
Flow configures the message depending on the platform your customer is interacting on. The example above will show an image on the web, app, and Facebook Messenger but will speak the message on voice devices like Amazon Echo or Google Home.
new Message('Images are not supported on your device!')
Location
Here is a code example to add a location to a button.
const loc = new Location({
title: '1 Infinite Loop in Cupertino',
lat: '37.332211',
long: '-122.030778',
action: new Action({
type: 'url',
value: 'https://www.awesome.corp'
})
})
return new Message('1 Infinite Loop in Cupertino')
.addResponse(loc)
}
Video
Here is a code example to add a video file.
async payload => {
const video = new Video({
title: "Cool car",
url: "https://flow.ai/video/vw.mp4"
})
return new Message('Watch an awesome video of a cool car')
.addResponse(video)
}
Updated 20 days ago