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-start

OR with npm

npm install --save @boldpenguin/agent-quote-start

OR use the CDN

Getting Started

Add a button element in your HTML

With no Bold Penguin ID
```

<button class="boldpenguin-aqs-button"
  data-source-id="401a0fcb-b591-479a-8d3e-0e5e11b7e92f"
></button>
```
With Bold Penguin 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.
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, and prod
- 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-id later 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-id is not present, the button will create a Bold Penguin application. Default text is Create Quote.
If data-bp-id is present, the button will simply open the application in Bold Penguin. Default text is View 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.
});