Developer ForumDeveloper BlogAtlas
Guides

Sending Replies

Suggest Edits

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