Google Business Messages Output

Learn more about output templates for Google Business Messages.

Jovo offers the ability to create structured output that is then translated into native platform responses.

This structured output is called output template. Its root properties are generic output elements that work across platforms. Learn more about how generic output is translated into a Google Business Messages response below.

{
  message: `Hello world! What's your name?`,
}

You can also add platform-specific output to an output template. Learn more about Google Business Messages-specific output below.

{
  // ...
  platforms: {
    googleBusiness: {
      // ...
    }
  }
}

Generic output elements are in the root of the output template and work across platforms. Learn more in the Jovo output template docs.

Below, you can find a list of generic output elements that work with Google Business Messages:

• message
• quickReplies
• card
• carousel

The generic message element contains the main response of your bot, which is usually displayed in a chat bubble:

{
  message: 'Hello world!',
}

Under the hood, Jovo translates the message into a text message (see the official Google Business Messages docs):

{
  "text": "Hello world!"
  // ...
}

It is also possible to use message as an object which contains both a speech (the spoken text on platforms like Alexa) and a text (written text to be displayed in chat bubbles). In this case, Google Business Messages uses the text element.

{
  message: {
    speech: 'Hello listener!',
    text: 'Hello reader!'
  }
}

The generic quickReplies element allows you to define small buttons that help the user answer a question faster. This concept is called suggested replies in the Google Business Messages documentation.

Quick replies can be an array of strings:

{
  // ...
  quickReplies: ['yes', 'no'],
}

Alternatively, you can use an array of objects that includes a text (what the user sees) and a value (what is passed to the bot):

{
  // ...
  quickReplies: [
    {
      text: 'oh yeah',
      value: 'yes',
    },
    {
      text: 'hell no',
      value: 'no',
    },
  ],
}

Under the hood, Jovo translates these into Google Business Messages suggested replies:

{
  "suggestions": [
    {
      "reply": {
        "text": "oh yeah",
        "postbackData": "yes"
      }
    },
    {
      "reply": {
        "text": "hell no",
        "postbackData": "no"
      }
    }
  ]
  // ...
}

The postbackData is the value that gets passed to the NLU integration to turn raw text into structured content. For quick replies that are passed as strings, the text and postbackData are the same. If the quick replies are objects, the text is used as text and the value as postbackData.

The generic card element can be used to send a Google Business Messages rich card.

Here is an example of a card with all properties that are supported by Google Business Messages:

{
  // ...
  card: {
    title: 'Hello world!',
    content: 'Welcome to the show.', // Can also use the 'subtitle' property
    imageUrl: 'https://...',
    imageAlt: 'The image displays a...',

    // Google Business Messages specific properties
    suggestions: [ /* ... */ ]
  },
}

The suggestions property is specific for Google Business Messages and described in detail below.

Under the hood, Jovo translates the card into the following rich card:

{
  "richCard": {
    "standaloneCard": {
      "cardContent": {
        "title": "Hello world",
        "description": "Sent with Business Messages.",
        "media": {
          "height": "MEDIUM",
          "contentInfo": {
            "altText": "The image displays a...",
            "fileUrl": "https://jovo-assets.s3.amazonaws.com/jovo-icon.png"
          }
        },
        "suggestions": []
      }
    }
  }
  // ...
}

Since Google Business Message rich cards don't offer a subtitle, either the content or subtitle property of the generic card element is used as a description (content is prioritized if both exist).

If no imageAlt is provided, the title is being used.

A generic carousel element is a horizontally scrollable set of card items. In Google Business Messages' definition, this is called a rich card carousel.

This is how a carousel can be defined:

{
  // ...
  carousel: {
    items: [
      {
        title: 'Hello world!',
        content: 'Welcome to the show.',
        imageUrl: 'https://jovo-assets.s3.amazonaws.com/jovo-icon.png',
        imageAlt: 'The image displays a...',
      },
      {
        title: 'Hi there!',
        content: 'This is element 2.',
        imageUrl: 'https://jovo-assets.s3.amazonaws.com/jovo-icon.png',
        imageAlt: 'The image displays a...',
      }
    ]
  },
}

The elements in the items array can contain all properties that are shown in the card section. If the array consists of only 1 item, the output is converted to a single card.

Under the hood, Jovo translates the carousel into the following rich card carousel:

{
  "richCard": {
    "carouselCard": {
      "cardWidth": "MEDIUM",
      "cardContents": [
        {
          "title": "Hello world!",
          "description": "Welcome to the show.",
          "suggestions": [],
          "media": {
            "height": "MEDIUM",
            "contentInfo": {
              "altText": "The image displays a...",
              "fileUrl": "https://..."
            }
          }
        },
        {
          "title": "Hi there!",
          "description": "This is element 2."
          // ...
        }
      ]
    }
  }
  // ...
}

It is possible to add platform-specific output elements to an output template. Learn more in the Jovo output template documentation.

For Google Business Messages, you can add output elements inside a googleBusiness object:

{
  // ...
  platforms: {
    googleBusiness: {
      // ...
    }
  }
}

These elements include:

• fallback
• suggestions
• image
• nativeResponse

Google Business Messages lets you define a message that gets displayed if the user's device/client does not support a specific feature (e.g. suggested replies) of the main message. Learn more about the fallback strategy in the official Google Business Messages docs.

You can set a fallback message like this:

{
  // ...
  platforms: {
    googleBusiness: {
      // ...
      fallback: 'Hello world!',
    }
  }
}

Under the hood, Jovo adds the fallback to the response like this:

{
  "fallback": "Hello world!"
  // ...
}

In the sections above, we've come across suggestions already. For example, quickReplies are turned into suggested replies and cards may also contain suggestions. Overall, a suggestion can be seen as a helpful prompt that guides a user in leaving a certain input or taking certain actions.

Google Business Messages offers different types of suggestions that can either be added to an element like card or to the overall message like this:

{
  // ...
  platforms: {
    googleBusiness: {
      // ...
      suggestions: [
        // ...
      ];
    }
  }
}

Each type of suggestion comes with its own set of properties, which are all added in the same way as they are detailed in the official Google Business Messages documentation:

• Suggested replies
• Suggested actions
• Authentication request suggestion
• Live agent request suggestion

You can send an image by adding the image element to your Google Business output. Learn more about images in the official Google Business Messages docs.

{
  // ...
  platforms: {
    googleBusiness: {
      // ...
      image: {
        fileUrl: 'https://...',
        thumbnailUrl: 'https://...',
        altText: 'An image that shows a...',
        forceRefresh: false,
      }
    }
  }
}

The image properties are added to the response like this:

{
  "image": {
    "contentInfo": {
      "fileUrl": "https://...",
      "thumbnailUrl": "https://...",
      "altText": "An image that shows a...",
      "forceRefresh": false
    }
  }
  // ...
}

Learn more about the properties in the official API reference.

The nativeResponse property allows you to add native elements exactly how they would be added to the Google Business message JSON.

{
  // ...
  platforms: {
    googleBusiness: {
      // ...
      nativeResponse: {
        // ...
      }
    }
  }
}

Learn more about the JSON structure in the Google Business Messages "Send messages" documentation.