Skip to main content
Feedback

Adding CSS and Javascript to custom players

warning

The content on this page is outdated and will not receive updates. For the most up-to-date feature, refer to Setting up and managing flows.

You can add custom CSS styling and Javascript into a player.

Using CSS/Javascript to customize a player

You can add CSS and Javascript to a player by either linking to external CSS/Javascript files, or by adding CSS/Javascript directly inline into the player.

Once you have created custom CSS style classes, you can then directly apply these to components and containers in the page builder, so that they are then applied when the Flow is run in a browser.

Linking to external CSS and Javascript files

The most efficient way of organizing your CSS and Javascript is to separate these into files that you can link to and load in the player. This approach keeps the code/styling separate from the player code, allowing easier maintenance and re-use across multiple players.

You can link files in a player by adding a customResources property into the player code:

  1. Create a new custom player. Refer to Creating a custom player.

  2. Edit the player on the Players page.

  3. Search for and find the 'manywho' object.

  4. Add a new 'CustomResources' property to the object, and insert your file link url(s). The URL must support cross-origin resource sharing (CORS). For example:

    CustomResources code

    customResources: ['https://s3.amazonaws.com/flow-ui-components/all.js', 'https://s3.amazonaws.com/flow-ui-components/all.css'],

  5. Save the player.

Adding CSS/Javascript inline in a player

Javascript and CSS can also be added directly inline in the player if required using the normal <style> and <script> HTML tags. Unlike linking to an external file however, this means that any changes required to the CSS/Javascript will require updating the player each time.

If you are adding CSS inline in a player, best practice is to insert your new <style> tag just inside the <body> tag at the end of the player; this ensures your custom styles are lower in the 'cascade' than the default CSS styles being inserted from the core platform.

On this Page