Loading External JavaScript Scripts into Netsapiens

This guide covers two methods for loading multiple external JavaScript files into Netsapiens portal.

Method 1: UI Config Trick

This method leverages how Netsapiens processes UI config values by injecting multiple script tags through a single configuration entry.

How It Works

Netsapiens takes the UI config value and renders it as a <script> tag in the page. By carefully formatting the value, you can inject multiple script tags at once.

Configuration

In your UI config, enter the following value (replace URLs with your actual script URLs):

YOUR_FLOWBOT_JS_URL"></script><script src="ANY_OTHER_JS_URL

Result

The above configuration will be rendered in the HTML as:

<script src="FLOWBOT_JS_URL"></script>
<script src="ANY_OTHER_JS_URL"></script>

⚠️ Important Note

While this method works for loading multiple scripts, the configuration becomes increasingly difficult to manage and maintain as you add more files. The string quickly becomes monstrous and error-prone with many nested script tags. For loading more than 2-3 scripts, consider using Method 2 instead.

Method 2: Dynamic Script Loading

This method involves loading external scripts dynamically from within another script that's already included in Netsapiens Portal page.

Implementation

Add the following JavaScript code to a script that's already loaded in Netsapiens:

(function() {
  'use strict';
  
  const FLOWBOT_SCRIPT_URL = 'YOUR_FLOWBOT_JS_URL_HERE';
  
  function loadFlowbot() {
    const script = document.createElement('script');
    script.src = FLOWBOT_SCRIPT_URL;
    script.async = true;
    
    script.onload = function() {
      console.log('Flowbot widget loaded successfully');
    };
    
    script.onerror = function() {
      console.error('Failed to load Flowbot widget from:', FLOWBOT_SCRIPT_URL);
    };
    
    document.head.appendChild(script);
  }
  
  function init() {
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', loadFlowbot);
    } else {
      loadFlowbot();
    }
  }
  
  init();
})();

⚠️ CSP Considerations

Content Security Policy (CSP) may block dynamically loaded scripts if the Netsapiens portal has strict CSP headers configured. If you encounter issues with scripts not loading:

• Check the browser console for CSP violation errors
• Verify that the external script domain is whitelisted in the CSP policy
• Contact your administrator to add the required domains to the CSP script-src directive

Comparison

Recommendations

• Use Method 1 when you need a quick, configuration-only solution for loading simple scripts
• Use Method 2 when you have exising JS imported into NS portal and need more control, error handling, or conditional loading logic