SUPPORT.TWILIO.COM END OF LIFE NOTICE: This site, support.twilio.com, is scheduled to go End of Life on February 27, 2024. All Twilio Support content has been migrated to help.twilio.com, where you can continue to find helpful Support articles, API docs, and Twilio blog content, and escalate your issues to our Support team. We encourage you to update your bookmarks and begin using the new site today for all your Twilio Support needs.

Add a Custom CSS Stylesheet to Twilio Flex

The best method for adding a CSS stylesheet to Twilio Flex is to use the helper method loadCSS (which is provided in flex-plugin) to insert your CSS file into the page. Here's an example of what the plugin code for this might look like:

loadCSS('http://mysite.com/files/flex.css');

This code will add your CSS file (flex.css in the example here) as a stylesheet to the current document.

To make this code work, you'll only need to update the URL for your .CSS file, and then add your code to the init() function of your plugin. For help adding this code to your hosted Flex instance, please see Creating Plugins for Twilio Flex.

Further information about component styling within a plugin can be found in the Creating & Styling Custom Components section of the Twilio docs.

Notice: The CSS file must be accessible by Twilio's proxy servers. Local files on your desktop are likely inaccessible via these methods, but your stylesheet may be uploaded to Twilio Assets for use here.

 

Have more questions? Submit a request
Powered by Zendesk