Sending Replies

Within cloude code all reponse 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. First is by simply returning within the cloud function, the other is by using the async reply method.

(function(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.

(function(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 back a single message back to a user.

(function(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.

(function(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 reponse templates for a complete reference

Text

(function(payload) {

  const image = new Image({
    title: "Image description",
    url: "https://..."
  })

  return new Message('Cats are amazing creatures!')
    .addResponse(image)
})

Multiple bubbles

This example would render 2 bubbles on a channel like Messenger, but just a single spoken message on for example Alexa.

(function(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

(function(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

(function(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: "http://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
(function(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: "http://flow.ai"
  }))

  return new Message('Visit vintagebikes.. for all our offers')
    .addResponse(buttons)
})
Postback - Pressing the button will send text
(function(payload) {

  // 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
(function(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.

(function(payload) {
  // Create a button
  const button = new Button({
    type: 'url',
    label: 'Flow.ai website',
    value: 'http://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
})

A carousel is a collection of cards.

(function(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

(function(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

(function(payload) {

  const image = new Image({
    title: "Image description",
    url: "https://..."
  })

  return new Message('Images are not supported on your device!')
    .addResponse(image)
})

Flow.ai 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

(function(payload) {

  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

(function(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)
})