Topics on this page

Tutorial: Write a plugin using BriteCore’s JavaScript library

BriteCore provides a beta JavaScript library that you can use to build your plugins.

Step 1: Find a plugin slot that will support your functionality

To create a plugin you need to find an existent plugin slot that:

  1. Is available in the UI location where you want to load your plugin.
  2. Allows for the behavior/functionality you want your plugin to support.

Note: At this point, you can add plugins only to BriteQuote risk edit pages. In BriteCore, risks are the assets protected by the insurance; for example, auto.

Step 2: Add the script tag to your plugin HTML file

Add this following script to the header of your HTML file:

View code

Step 3: Initialize the plugin

Use the BriteCorePlugin helper so your plugin can communicate with BriteCore:

View code
let plugin = new BriteCorePlugin('Plugin Name')
plugin.initialize({
'slot-name': slotInput
})

The slotInput object will vary upon the plugin slot you want to connect to.

Example: the button-row slot with a single button:

View code
let plugin = new BriteCorePlugin('Plugin Name')
plugin.initialize({
'button-row': {
buttons: [{
text: 'Lookup',
callback: lookupDetails,
visible: () => true,
enabled: () => true
}]
}
})

 

You can use the plugin’s visible and enabled functions to dynamically hide/disable it based on risk type or certain fields.

Step 4: Register the plugin in the BriteIntegrations service

Send an API call to BriteIntegrations using the /plugins/ endpoint to POST the following payload:

View code
{

"data": {

"type": "plugin",

"attributes": {

"name": "DMV_Lookup",

"plugin_slots": [

{

"location": {

"type": "bottom-row"

},

"plugin_file_path": "/app/preview/dmv-lookup-plugin/",

"slot_name": "britequote:risk-edit:button-row"

}

],

"base_url": "",

"configuration": {}

}

}

}

Available actions are POST, GET, PATCH, and DELETE. Use GET without an appended plugin_id to retrieve a list of plugins.

Parameters:

  • type: plugin
  • attributes:
    • name: Name of plugin (this isn’t what necessarily shows up on the UI)
    • plugin_slots:
      • Location:
        • type: either bottom-row or sidebar
      • Plugin_file_path: The plugin_file_path is the path appended to the base_url
    • Slot_name: britequote:risk-edit:button-row
  • base_url: Can be used to specify a fully qualified domain name (FQDN). If the base_url is empty, it will default to: integrations.britecore.com.
  • configuration: Configuration is an object of arbitrary data that gets passed into the plugin on initialization that you can use to store any configuration you don’t want to hardcode into the plugin itself. An example use case is attaching an API key.

Note: Anything stored in configuration can be seen by an (authenticated) end-user.

Sample request

View code
curl --location --request POST '<integrations..britecore.com>/plugins/' \
--header 'Authorization: Bearer ' \
--header 'Content-Type: application/vnd.api+json' \
--data-raw '{
"data": {
"type": "plugin",
"attributes": {
"name": "test_plugin",
"plugin_slots": [],
"base_url": "integrations.sales_demo.britecore.com",
"configuration": {}
}

You are now ready to deploy and test your plugin.

A note on hosting

Each plugin is an HTML document rendered in a hidden iframe. BriteCore’s UI queries for the plugins available and renders any plugin on the specified pages.

Since BriteCore’s UI is running in a browser, the hosting for the plugin must occur without credentials to a publicly available location.

Plugins often query other restricted resources. If the plugin is served from a domain that also has access to the credentials, it’s possible to use those.

Example of a hosting decision

The Example Insurance Company allows logged in agents to quote. Upon logging in, Example Insurance stores an access token in the local storage of the browser. A plugin served from https://www.exampleinsurance.com can access the local storage for that domain and use the access token to make further requests.