JBL

English

繁體中文

English

繁體中文

Appearance

JBL JS - Getting Started ​

Installation Information ​

To use this product, you need to apply for the following files and authorization key from our company:

  • jbl.js
  • jbl.es.js
  • authorizationKey

Parameters ​

NameType
authorizationKeyString

Usage Instructions ​

Using jbl.js ​

  1. Global Object:

    • jbl.js is a globally used script file. Once imported, it will automatically add the JBLWebSocket object to the window.
    • Note: The JBLWebSocket object name is fixed and cannot be changed.

  2. Steps:

    • Place jbl.js in the same folder as your index.html file.
    • Import jbl.js in your html file by adding a <script> tag in the <head> section.
    • Execute the connect method, and the data will automatically be sent back to the data center.

Example Code ​

html
<script type="text/javascript" src="https://cdn.example.com/jbl.js"></script>
<script>
    const authorizationKey = ${Product authorization key};

    // Monitor website information using the global object
    JBLWebSocket.connect(authorizationKey);
</script>

Using jbl.es.js ​

  1. Modular Design:

    • jbl.es.js supports modular imports, allowing you to customize the package name when importing, making it more flexible for your project.

  2. Steps:

    • Place jbl.es.js in a designated folder. In this example, we store it in the /assets/js folder.
    • Import jbl.es.js in the required javascript file.
    • Use the custom name to initialize and start monitoring.
    • Execute the connect method, and the data will automatically be sent back to the data center.

Example Code ​

javascript
// Import jbl.es.js with a custom name
import CustomJBL from '@/assets/js/jbl.es.js';
const authorizationKey = ${Product authorization key};

// Monitor website information using the custom object
CustomJBL.connect(authorizationKey);

Notes ​

  1. If you are using jbl.js, ensure the global object name JBLWebSocket is correct. This name is system-defined and cannot be changed.
  2. If you are using jbl.es.js, you can customize the object name during the import process to increase project flexibility.
  3. Always execute the connect method before calling other methods to ensure the monitoring functionality works properly.