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: XXX,
showInlineSchoolPicker: XXX, }, });


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.
  • 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.


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>


Have questions or want to develop a partnership? Send us an email.

Nitro Featured In:

Forbes
USA Today
Business Insider
CNBC
Washington Post

Can't find what you are looking for and still have questions? We are here for you.

Email Nitro