Bold Penguin SDK Installation and Setup

Installation

Install the Bold Penguin SDK and Redux state container using either npm or yarn.

npm

npm i --save @boldpenguin/sdk redux

yarn

yarn add @boldpenguin/sdk redux

Prerequisites

• clientId
  • Your account team will provide you with a unique Client ID per Bold Penguin environment.
• googleApiToken
  • Your Google API key for use with street view.
  • This is used to assist in populating address information.

You will need to define these properties to connect to the Bold Penguin backend. You can do this by including them during initialization, or by placing them in environment.ts, .environment, or the equivalent file for your framework.

Example

export const environment = {
  production: false,
  clientId: "my-app-id",
  googleApiToken: "ABCxxxx123xXxabc99999abcXXXXXXXXXXM7WEE",
};

Framework Integration

Include the Custom Elements in your Framework

The steps for including the custom elements will vary based on your framework. You can follow the examples below for Angular and React. For other frameworks, or to use the components without a framework, you can find more examples in the Stencil.js documentation. ​

// src/declarations.d.ts

declare namespace JSX {
  interface IntrinsicElements {
    "bp-sdk-root": any;
    "bp-sdk-question-set-navigation-container": any;
    "bp-sdk-question-set-container": any;
    "bp-sdk-quote-request-container": any;
    "bp-sdk-message-container": any;
    "bp-sdk-analytics-container": any;
  }
}

// src/app/app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Load Polyfills and Web Components

The Bold Penguin SDK includes a main function that you use to load the components in the collection.

Note: If you are using Vite to bundle/serve your application, you should import from @boldpenguin/sdk/vite in place of @boldpenguin/sdk in your application.

React

// src/index.js
​
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { applyPolyfills, defineWebComponents } from '@boldpenguin/sdk'; // See note above if using Vite
​
applyPolyfills().then(() => {
  defineWebComponents().then(() => {
      ReactDOM.render(
        <React.StrictMode>
          <header className="navbar navbar-dark bg-dark">
            <h1 className="navbar-brand">Storefront - My Agency</h1>
          </header>
          <App />
        </React.StrictMode>,
        document.getElementById('root')
      );
  });
});

Angular

// src/main.ts
import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";
import { environment } from "./environments/environment";
import {
  applyPolyfills,
  defineCustomElements,
} from "@boldpenguin/sdk"; // See note above if using Vite
if (environment.production) {
  enableProdMode();
}
applyPolyfills().then(() => {
  defineCustomElements(window);
  platformBrowserDynamic().bootstrapModule(AppModule);
});

Initialization

Once loaded, you will need to initialize the Bold Penguin SDK and establish the websocket connections to the Bold Penguin backend. Note that initialization of the window object must complete before using any of the underlying web components. These two steps can consume the environment information you defined above or you can supply the prerequisite information directly.

Bold Penguin supports connection to the following pre-defined backend environments:

• alpha
• beta
• prod

To initialize the Bold Penguin SDK:

import { init } from "@boldpenguin/sdk";
init({
  clientId: environment.clientId,
  env: environment.environmentFlag,
  googleApiToken: environment.googleApiToken,
});

Initialization Options

Option Parameter	Description	Optional?	Default	Allowed
clientId	Bold Penguin SDK API Key	No
env	Bold Penguin backend environment	Yes	prod	alpha, beta, prod
googleApiToken	API token if you would like to use google places autocomplete	Yes	None (autocomplete will be disabled)
options	Web components configuration	Yes	See below
analytics	Analytics configuration	Yes	Analytics disabled by default	See Bold Penguin SDK Analytics

Web components options

You can optionally pass an object of the following shape while initializing the Bold Penguin SDK. If you don't, the default options will be used:

import { init, QuoteRequestRequestTypes } from "@boldpenguin/sdk";

const customComponentsOptions = {
  enableQuestionSetNavigation: true,
  enableOfflineQuotes: false,
  quoteStatusFilter: [QuoteRequestRequestTypes.completed],
};

init({
  clientId: environment.clientId,
  env: environment.environmentFlag,
  googleApiToken: environment.googleApiToken,
  options: customComponentsOptions,
});

Default web component options

Component Options	Description	Default
enableQuestionSetNavigation	Enables the ability to navigate using the <bp-sdk-question-set-navigation>	true
enableOfflineQuotes	The Bold Penguin SDK will fetch offline carriers that have an appetite for the current application form	false
quoteStatusFilter	An array of statuses of quotes returned from the backend that the front-end should display (see Quote Request Types for valid options)	[QuoteRequestRequestTypes.completed]

HTML

Minimum elements

These are the minimum elements required to load the Bold Penguin SDK. You must layer additional elements to create and load application forms or provide other functionality.​

<bp-sdk-root>
  <bp-sdk-message-container />
  <bp-sdk-question-set-navigation-container />
  <bp-sdk-question-set-container />
  <bp-sdk-quote-request-container />
</bp-sdk-root>

Name	Functionality
bp-sdk-root	Registers bp-sdk-core and hosts redux instance
bp-sdk-message-container	Displays alerts and information related to the application form
bp-sdk-question-set-navigation-container	Facilitates navigation of application form
bp-sdk-question-set-container	Displays active question set
bp-sdk-quote-request-container	Displays quote results

​

Example

  <div>
    <bp-sdk-root>
      <bp-sdk-analytics-container>
        <bp-sdk-message-container>
        <div>
          <div>
            <aside>
              <bp-sdk-question-set-navigation-container />
            </aside>
            <main>
              <section >
                <bp-sdk-question-set-container />
              </section>
              <section>
                <bp-sdk-quote-request-container />
              </section>
            </main>
          </div>
        </div>
      </bp-sdk-analytics-container>
    </bp-sdk-root>
  </div>

From here you can layer in controls to create and load forms or other components as necessary.

<div>
  <label for="app-form-id">App Form ID:</label>
  <input
    type="text"
    id="app-form-id"
    name="app-form-id"
    [ngModel]="appFormId"
    (ngModelChange)="updateAppForm($event)"
  />
</div>
<div>
  <button type="button" (click)="handleAppFormLoad()">Load App Form</button>
  <button type="button" (click)="newAppForm()">New App Form</button>
</div>