How to load external JS and external CSS

You are reading the NextGen Documentation

NextGen widgets are a new and improved way to display UGC content onsite.

From September 23rd 2025, all new widgets created will be NextGen.

Please check your widget version on the Widget List page to see if it is a Classic or NextGen widget.

You can read the Classic Widget Documentation here.

Overview

This article will demonstrate how to load external JavaScript and CSS into your widgets using our custom code editors.

Loading the External CSS

Loading the external CSS is very straight-forward. You just need to use the CSS @import.

Example

You can write the following code in your Custom CSS code editor to load Bootstrap and Font Awesome libraries.

@import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css);

Back to Top

Loading the External JavaScript

In order to load external Javascript files, you can utilise

sdk.addLoadedComponents(["https://google.com/bananas.js"])

Congratulations! You have successfully loaded external JS and CSS into your widgets.