Enter the $2,000 Nitro Scholarship now! Apply in 3 Minutes!

Widget Customizations & Options


The Nitro App can be adjusted in a few different ways, but please note that the majority of these configurations should be specified at the time of initialization with the Nitro team. 

Highlighted below are some of the app options available to use:

new NitroWidget({      
  target: document.querySelector("#nitro-widget-app"),      
  props: {        
    widgetId: "SL",
    placement: "header",
    style: "full-width",        
    siteId: "001",    
schoolId: "XXXXXXXX",
showInlineSchoolPicker: "true // false", }, });


For Reference

  • widgetId  - The type of widget to be displayed and impacts the products shown. Currently this can be either SL (private student loans) or RL (student loan refinance), but do not change this without discussing with your Nitro contact.
  • placement - Alpha numeric location of the widget on your site.
  • style - Widget layout. Note: This currently only supports full-width
  • siteId - Supplied by Nitro contact. This is key for attribution, do not change this unless requested to do so.
  • schoolId - Preselect/deep-link to a specific school. This should be an Office of Postsecondary Education Identifier (OPE ID). Upon specifying the OPE ID within the app install (SL only) the user will be taken directly to the results page for that selected school. Note: OPE ID should be 8 digits.
  • showInlineSchoolPicker - In some cases it may be useful to show the school picker on the results page above the table. This can be used in combination with schoolId. This will allow users to change schools if needed, with results changing as well. Value must be true or false.


Styling

The Nitro app also allows for some styling customizations. Our app is built using modern standards - HTML5 + CSS3. You can customize the look and feel of the widget via CSS3 variables. 

Here's a list of the supported variables:

  • --form-border-color
  • --form-background-color
  • --thead-color
  • --thead-font-color
  • --thead-font-weight
  • --cta-button-color
  • --cta-button-font-color
  • --more-button-color
  • --featured-bg-color
  • --featured-color
  • --legal-copy-color

You can specify these customizations by setting them via CSS3 styles in an external stylesheet, or directly inline as shown below:

<div id="nitro-psl-app" style="--form-border-color:#eee; --form-background-color:#fff;">

</div>

Or use our tool below

 
 

Instructions:

To embed the widget, the following code is required but please note that the majority of these configurations should be specified at the time of initialization with the Nitro team.