Output

Learn more about how to return output to the user.

A big part of building a Jovo app is returning output to the user. This output could include all sorts of things, speech (for voice interfaces) or text (for visual interfaces) messages being the most prominent.

The goal of a handler is to return one or more structured output templates that get stored inside the Jovo $output array. This $output then gets translated into a native platform response in the next step of the RIDR lifecycle.

The most popular way to return output is using the $send() method:

yourHandler() {

  // ...

  return this.$send(/* output */);
}

$output is always an array, even if you only send one output template.

Learn more about ways to return output, output templates, and output classes below.

We recommend using the $send() method to return output:

yourHandler() {

  // ...

  return this.$send(/* output */);
}

You can either send a message by passing a string:

return this.$send('Hello World!');

If you want to add output elements beyond a message, you can send an output template:

return this.$send({ message: 'Hello World!' /* ... */ });

You can also send an output class:

return this.$send(SomeOutput, {
  /* output options */
});

The $send() method comes with additional features like making it possible to send multiple responses:

someHandler() {
  this.$send('Hello world!');

  // ...

  return this.$send('This is a second chat bubble.')
}

While we recommend using $send(), it is also possible to populate $output directly:

yourHandler() {

  // ...

  this.$output = [{
    message: 'Hello world',
  }];
  return;
}

You can pass a string to the $send() method:

yourHandler() {

  // ...

  return this.$send('Hello World!');
}

This will populate the message output element and is the same as the below example that sends an output template:

yourHandler() {

  // ...

  return this.$send({ message: 'Hello World!' });
}

You can directly add an output template to the $send() method:

yourHandler() {

  // ...

  return this.$send({ /* output */ });
}

This object can contain all output template elements that are described in the output template documentation.

Here is an example output that just contains a message:

yourHandler() {

  // ...

  return this.$send({ message: 'Hello World!' });
}

For more complex output, we recommend using output classes.

The below example imports an output class called SomeOutput and passes it to $send() together with potential options:

import { SomeOutput } from './output/SomeOutput';

// ...

yourHandler() {

  // ...

  return this.$send(SomeOutput, { /* output options */ });
}

The options can also override reserved properties from the output class, like the message:

import { SomeOutput } from './output/SomeOutput';

// ...

yourHandler() {

  // ...

  return this.$send(SomeOutput, { message: 'This overrides the message from SomeOutput' });
}

Learn more about reserved properties in the output classes documentation.

You can also return an array of output templates:

[
  {
    message: 'Hello world!',
  },
  {
    message: 'This is a second chat bubble.',
  },
];

This can also be done by doing multiple $send() calls in a handler.

someHandler() {
  this.$send('Hello world!');

  // ...

  return this.$send('This is a second chat bubble.')
}

Platforms that support multiple responses will display the example above in 2 chat bubbles. Synchronous platforms like Alexa will concatenate the message to a single response:

{
  message: 'Hello world! This is a second chat bubble.',
}

You can also add internationalization by storing all strings in an i18n file for each locale. This way, you can return output using the $t() method:

// Without i18n
return this.$send({ message: 'Hello World!' });

// With i18n
return this.$send({ message: this.$t('hello') });

Learn more in the i18n docs.

Output templates offer a structured format to return output to a user. These templates can be added to $send() directly or returned from an output class.

{
  message: 'Do you like pizza?',
  quickReplies: [ 'yes', 'no' ],
  listen: true,
}

Learn more about the structure of output templates here.

For better separation between logic and output, Jovo has a concept called output classes. These classes can are typically stored in an output folder. As a convention, the files are usually named like the class, for example MenuOutput.ts.

Here is an example of a HelloWorldOutput class:

import { Output, BaseOutput, OutputTemplate } from '@jovotech/framework';

@Output()
export class HelloWorldOutput extends BaseOutput {
  build(): OutputTemplate | OutputTemplate[] {
    return {
      message: 'Hello World!',
    };
  }
}

Learn more in the output classes docs.