Skip to main content

One-Click Integration

This button allows you to integrate Bold Penguin business insurance quotes into your website.

Installation​

There are a few different ways to install the button. You can 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​

Adding a Button Element in Your HTML​

Without a 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 a 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.

Configuring 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 (example: "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. Refer to this [Guide] (https://developers.boldpenguin.com/docs/en/api/mqs.html) 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.

Adding Custom Styles​

  • To style the button yourself, 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. The default text is Create Quote.

    • If data-bp-id is present, the button will simply open the application in Bold Penguin. The default text is View Quote.

  • Use the CDN

    • To import the package without Node Package manager, 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.
});