Skip to main content

How to Integrate Bold Penguin One-Click with Your Application

Introduction​

The Bold Penguin One-Click Integration package allows you to quickly and easily integrate Bold Penguin into your new or existing web application or CRM tool.

With the One-Click Integration package you can configure a button to start a new quote or view an existing quote using Bold Penguin.

One-Click Integration on NPM

Installation​

Install using yarn

yarn add @boldpenguin/agent-quote-start

Install using npm

npm install @boldpenguin/agent-quote-start

Getting Started​

Add a button element to 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 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

    • Set this property with the business's database ID in your system. You'll use this in the configuration callback to retrieve business data.
    • data-source-id

  • Bold Penguin 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.
    • data-bp-id

Configure the button in your code​

import { configureBoldPenguinButton } from '@boldpenguin/agent-quote-start';

configureBoldPenguinButton({
 appName: 'Penguin CRM 🐧',
 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 open the application in Bold Penguin. Default text is View Quote.

Use the CDN​

To import the package using a CDN, 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.
});