Bold Penguin Agent Quote Start
Button to integrate Bold Penguin business insurance quotes into your website.
Installation
Install with yarn
yarn add @boldpenguin/agent-quote-startOR with npm
npm install --save @boldpenguin/agent-quote-startOR use the CDN
Getting Started
-
Add a button element in your HTML
With no Bold Penguin ID
<!-- This button will start a quote with Bold Penguin --> <button class="boldpenguin-aqs-button" data-source-id="401a0fcb-b591-479a-8d3e-0e5e11b7e92f" ></button>
With Bold Penguin ID
<!-- This button will open the Bold Penguin Terminal using the provided `data-bp-id` --> <button class="boldpenguin-aqs-button" data-source-id="401a0fcb-b591-479a-8d3e-0e5e11b7e92f" data-bp-id="9d399556-ca32-4516-81e7-ce05f6dd0686" ></button>
Button Attributes
-
CSS Class*:
boldpenguin-aqs-button -
Source ID* (
data-source-id): Set this property with the business's database ID in your system. You'll use this in the configuration callback to retrieve business data. -
Bold Penguin ID (
data-bp-id): If your user has already created a Bold Penguin application, set this property with the Bold Penguin application ID. If this property is present, clicking the button will open the Application in Bold Penguin.
-
CSS Class*:
-
Configure the button in your code
import { configureBoldPenguinButton } from '@boldpenguin/agent-quote-start'; configureBoldPenguinButton({ appName: 'Bold Penguin Test', env: 'beta', getAnswers: async (sourceId) => { const business = await myService.getBusinessInfo(sourceId); return { mqs_first_name: business.owner.firstName, mqs_last_name: business.owner.lastName, mqs_business_name: business.name, ... } }, onSuccess: (sourceId, bpApplicationId) => { myService.saveBoldPenguinId(sourceId, bpApplicationId); console.log('Bold Penguin application created!'); } });
Options
- appName*: How the prefilled fields will display in Bold Penguin (ie "Prefilled by ${appName}")
-
env: (default = "prod") The Bold Penguin environment. Valid options are
alpha,beta, andprod - getAnswers*: A callback function which allows your system to retrieve business information. The only parameter is your button's source ID. It should return an object whose keys are Bold Penguin MQS Question Codes, and values are the answers to their corresponding questions. See this guide for a list of MQS question codes.
-
onSuccess*: a callback function which allows you to save the Bold Penguin application ID in your system. The function should have no return, and the 2 parameters are the button source ID, and the Bold Penguin application ID. Save the Bold Penguin application ID to your system so you can add it to your button as
data-bp-idlater on. -
customStyles: Set this property to
true, and we won't override the button with our own styles/text.
Add Custom Styles
If you'd like to style the button yourself, simply provide the option customStyles: true in the configureBoldPenguinButton function.
Remember to display appropriate button text for your situation:
- If the
data-bp-idis not present, the button will create a Bold Penguin application. Default text isCreate Quote. - If
data-bp-idis present, the button will simply open the application in Bold Penguin. Default text isView Quote.
Use the CDN
To import the package without Node Package manager, simply add a script element into the <head> of your HTML file.
<!-- Replace <VERSION> with the version number -->
<script src="https://unpkg.com/@boldpenguin/agent-quote-start@<VERSION>/dist/agent-quote-start.min.js"></script>To use the configureBoldPenguinButton function, use the Bold Penguin namespace added to the global window object:
window.BoldPenguin.configureBoldPenguinButton({
... // See configuration options above.
});