Menu

Expand
Rate this page:

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?"
            }
        }
    ]
}
Rate this page:

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd browsing the Twilio tag on Stack Overflow.

        
        
        

        Thank you for your feedback!

        We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

        Sending your feedback...
        🎉 Thank you for your feedback!
        Something went wrong. Please try again.

        Thanks for your feedback!

        Refer us and get $10 in 3 simple steps!

        Step 1

        Get link

        Get a free personal referral link here

        Step 2

        Give $10

        Your user signs up and upgrade using link

        Step 3

        Get $10

        1,250 free SMSes
        OR 1,000 free voice mins
        OR 12,000 chats
        OR more