Show

The Show action is responsible for rendering content to devices with screens.

At its most basic, a show action instructs the end device to display its body text verbatim. The show action may also wrap several properties that allow users to describe common output fields, such as subject, body, and images. These can be used to describe text with more detail to allow richer output on devices that support it.

Simple example: Show text

{
	"actions": [
		{
			"show": {
				"body": "Hello World!"
			}
		}
	]
}

Rich example: Display text and an image

{
	"actions": [
		{
			"show": {
				"body": "Twilio Owls",
				"images": [ {
				    "label": "Original Owl",
				    "url": "https://demo.twilio.com/owl.png"
				    
				}]
			}
		}
	]
}

Body

Body is a property of the Show action. The text defined by a Body property is used as the main text body for end devices that support richer text output formats. For simpler formats, the body is the only data displayed.

Images

Images is a list property of the Show action. Images specify images to attach to richer output formats. Every object has two attributes: url which points to a jpg or png file, and label which is an optional tag that can be used for slotting into rich media formats with specific positioning slots. If you test your Autopilot bot in the Simulator, images will show only if they are below 60 kB.

{
    "actions": [
        {
            "redirect": "replace-with-your-function.twil.io/dynamicshow"
        }
    ]
}

Dynamic example: Display text and an image from a Twilio Function, making your Action dynamic. Your Autopilot task may look like this:

{
    "actions": [
        {
            "redirect": "replace-with-your-function.twil.io/dynamicshow"
        }
    ]
}

Your replace-with-your-function.twil.io/dynamicshow Function could contain the following Node.js code to call dynamic JSON to display text and an image for your Autopilot task.

exports.handler = function(context, event, callback) {
    let actions = [];
    let show = {
        "show": {
            "body": "Twilio Owls", 
            "images": [{ 
                "label":"Original Owl",
                "url":"https://demo.twilio.com/owl.png"
            }]
        }
    }
    actions.push(show);
    let respObj = {
    	"actions": actions
    };
    callback(null, respObj);	
};

Example: Show HTML tags

In some cases you want the bot to respond with HTML elements to render rich media to the user. The show action supports responding HTML elements as part of the body. Note: It is the responsibility of the client to process and render these HTML elements. Even when using Programmable Chat these elements will not be automatically rendered, they need to be implemented by the front end.

{
    "actions": [
        {
            "show": {
                "body": "<b>Howdy!</b> How are you?"
            }
        }
    ]
}