Introducing: AIML Rich Media Tags

Messaging has evolved considerably over the years, from text only communications (e.g., SMS) to much richer experiences involving emoji, images, GIFs, videos, location sharing, and more.

Many of these Rich Media UI elements have achieved ubiquity such that they are standard; therefore, we are pleased to announce Pandorabots’ extension to the AIML standard to include:

• Media like hyperlinks, images, GIFs, and video
• Tappable suggested Replies
• Buttons including postback, URL
• Cards and Carousels (i.e., combinations of images with titles, subtitles, and buttons)
• Typing delay and indicators

These features are, by default, optimized to work with Pandorabots’ Web Widget and have translatable parity with features from most major platforms, such as Facebook Messenger and GSMA-sanctioned RCS messaging standard.

Using New Rich Media Features in AIML

Buttons

Buttons let you guide conversations by offering users chatting with your bot a quick tap-or-click method to get to the next step in the conversation. Multiple buttons can be combined within the same message to present a quick list of options to your users. Pandorabots currently supports two varieties of button: Postback and URL buttons.

Postback Buttons

<button>
<text>Tell Me More</text>
<postback>xmoreabout foo</postback>
</button>

Postback buttons have two attributes: text, and a postback.

What the user sees on the button itself is the text, while the message your bot actually gets is the postback. Most buttons are postback buttons, and they’re incredibly useful for letting your users know what kind of information the bot has for them.

URL Buttons

<button>
<text>Visit Us</text>
<url>https://home.pandorabots.com</url>
</button>

Like postback buttons, URL buttons have a text attribute that defines what the user sees on the button itself. The other argument is the url for the location you want your bot to link your users to.

Replies

<reply>
<text>yes</text>
<postback>xsayyesto foo</postback>
</reply>

Like postback buttons, replies have two attributes, text and a postback.

The difference is that replies look and feel more like suggested responses than buttons, and are useful for letting your users quickly tap their way through a conversation.

Images and Videos

<image>https://url.for.image</image>
<video>https://url.for.video</video>

Images and Videos are especially easy to include in your AIML — just wrap an <image> or <video> tag around the url. Image tags support gifs and svgs as well as still image formats, and video tags support any html5 compatible video format.

Cards

<card>
 <title>Card Menu</title>
 <subtitle>Describe a card</subtitle>
 <image>https://url.for.image</image>
 <button>
  <text>Learn More</text>
  <postback>xlearnmoreabout cards</postback>
 </button>
</card>

A <card> tag wraps around other elements — an image tag, some number of buttons, as well as a title and subtitle, both of which contain text. The result is a menu containing all of these rich media elements!

Carousels

<carousel>
 <card>
  <title>Robots</title>
  <subtitle>Made of metal</subtitle>
  <image>https://url.for.image</image>
  <button>Tell Me More</button>
 </card>
 <card>
  <title>Humans</title>
  <subtitle>Made of carbon</subtitle>
  <image>https://url.for.image</image>
  <button>Tell Me More</button>
 </card>
</carousel>

A <carousel> tag wraps around some number of cards to create a tap-through menu organized into different sections.

Delays

<delay>3</delay>

Delays are useful for introducing a pause between parts of a response for easier reading, or for simulating the time it would take a human to read and type a response. They’re easy to use — just wrap a <delay> tag around the number of seconds you want to wait.

Splits

Some text
<split/>
More text

Splits do just what they say — they split a message into multiple parts. These will be displayed to your user as separate messages, which can be combined with delays to space out large responses. To use them, just put a <split/> between the content you want to separate.

Custom Extensions

What if you’re building on a messaging platform we don’t support, or want to develop an application that integrates another API with the Pandorabots API? Pandorabots and AIML give you a lot of flexibility to create your own custom AIML extensions — there are multiple options that our platform allows as long as you don’t create bot responses that conflict with existing AIML tags.

AIML Extensions

For example, you might have an application that wants to support handling of two different languages — you can create a bot response such as:

<category><pattern>MY NAME IS *</pattern>
<template>
<think><set name=”clientname”><star/></set></think>
 <msg lang=”en”>Your name is <star/>.</msg>
 <msg lang=”fr”>Votre nom est <star/>.</msg>
</template>
</category>
<category><pattern>JE M APPELLE *</pattern>
<template><srai>MY NAME IS <star/></srai></template>
</category>

Where <msg> is a custom tag that your application can parse and handle in specific ways. Maybe you have a language mode set in your application and only want to display the language set, or maybe your application shows both bot responses, but one language in a different color. A custom tag like the <msg> example is allowed because it does not conflict with existing AIML tags.

Input to Chatbot: My name is Rosie.
Output from Chatbot: <msg lang=“en”>Your name is Rosie.</msg>
                     <msg lang=“fr”>Votre nom est Rosie.</msg>

Using JSON

Maybe your application is best suited to receive JSON format rather than XML format. You can also use a custom tag to encapsulate JSON content, such as:

<category><pattern>XGETPREDICATES</pattern>
 <template>
 <json>
 {
   “firstname”: “<get name=”firstname” />”,
   “lastname”: “<get name=”lastname” />”,
   “birthday”: “<get name=”birthday” />”
 }
 </json>
 </template>
</category>

X-Phrases

Another example is to not use XML type format but unique phrases that your application is expecting, essentially you can design a custom protocol between your chatbot and application.

Maybe your application needs to seed the chatbot with client specific information, you can build a protocol between application and chatbot that is not sent to your application’s end-user. For example, this category allows your application to send an input your chatbot to set a predicate:

<category><pattern>XSEEDCHATBOT * *</pattern>
 <template>
  xignore
 <star/> = <set><name><star/></name><star index=”2"/></set>
 </template>
</category>

The xignore phrase can be used by your application to indicate a chatbot response that should not be sent back to the end-user.

Input to Chatbot: XSEEDCHATBOT firstname Rosie
Output from Chatbot: xignore firstname = Rosie

There is nothing inherently special about x-phrases; they can be created in any way so long as they are not utterances that would occur in normal human conversation. If you like the letter “Q”, you can create your own q-phrases!

Note that this can also be used in combination with Rich Media AIML tags! For example, your application may want to fetch product information from your database and build a product carousel:

<category><pattern>XBUILDPRODUCTCAROUSEL</pattern>
 <template>
  xsendproductlist
   xcategory catIdXXXXXXXX
   xaimlbody
 <carousel>
  <card>
  <image>xgetattribute productImageUrl</image>
  <title>xgetattribute productDisplayName</title>
  <subtitle>xgetattribute productDescription</subtitle>
  <button>
  <title>SHOP</title><url>xgetattribute productPageUrl</subtitle>
  </button>
  </card>
 </carousel> 
 xaimlbodyend
 </template>
</category>

In this example, custom phrase xsendproductlist triggers your application to fetch products from your database (or API), and other “x-phrases” are used to identify the carousel card template, and the attributes to use for each card in the carousel. The benefit of this is that chatbots can be created and updated quickly once the protocol handling has been built in your application since our platform allows for real-time chatbot updates.

Finally, check out our article about using Data Dynamically. This article explains yet another way to build a conversational interface for your application but keeping sensitive information on your own platform.

Coming Soon

Next on the roadmap is location sharing. The AIML Foundation plans to continue adding support for UI elements that become standard, using Rich Communication Services (RCS) as a basis, and Pandorabots will follow suit!