Send Replies
Within Code actions all response templates are available. This allows you to build and send rich template responses within your custom code.
There are two methods to send back messages to a user.
Cloud function
The first is by simply returning within the cloud function, the other is by using the async reply
method.
async payload => {
return new Message('Just saying hello')
}
It's also possible to reply with multiple messages. You might want to do that if you work with voice and speech-based interfaces.
async payload => {
return [
new Message('Cats are amazing creatures!'),
new Message('Or are you a dog person?')
]
}
Async
When you make a async call within your code it's not possible to reply with a message using the return method. Instead, we provide a simple method called reply
.
You can use 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)
}
Delays
You can send text bubbles or any other template with delays.
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
}
Below are code examples of all the various message templates we support. Check our response templates for a complete reference.
Text
async payload => {
const image = new Image({
title: "Image description",
url: "https://..."
})
return new Message('Cats are amazing creatures!')
.addResponse(image)
}
Quick Replies
In addition to text only, you can also add quick replies. In the example below 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
This example would render two bubbles on a channel like Messenger, but just a single spoken message on for example 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
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
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
Opens a webpage
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
Pressing the button will send 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
Press the 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 consist of an image, title, subtitle, and buttons:
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:
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
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
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
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 10 months ago