Add a Custom CSS Stylesheet to Twilio Flex

The best method for adding a CSS stylesheet to Twilio Flex is to use JavaScript commands to insert your .CSS file into the page. Here's an example of what plugin code for this might look like:

var head = document.head;
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = 'http://mysite.com/files/flex.css';
head.appendChild(link);

This code will 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 in line 5, and then add your code to the the init() function of your plugin. For help adding this code to your hosted Flex instance, please see Creating Plugins for Twilio Flex.

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

Have more questions? Submit a request
Powered by Zendesk