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