npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@boldpenguin/agent-quote-start

v2.2.3

Published

Configurable Bold Penguin button to start quotes from any system

Downloads

359

Readme

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

  1. 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.
  2. 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.
});