Skip to main content

Storefront - Enterprise Installation and Setup


Install Storefront - Enterprise and redux state container using either npm or yarn.


npm i --save @boldpenguin/sdk-{auth,core,http,redux,requests,types,utility,web-components,websockets} redux


yarn add @boldpenguin/sdk-{auth,core,http,redux,requests,types,utility,web-components,websockets} redux


  • 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.


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";

declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent],
export class AppModule {}

Load Polyfills and Web Components

Storefront - Enterprise includes a main function that you use to load the components in the collection.

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { applyPolyfills, defineCustomElements } from '@boldpenguin/sdk-web-components/dist/loader';

applyPolyfills().then(() => {
defineCustomElements().then(() => {
import('@boldpenguin/sdk-core').then(() => {
<header className="navbar navbar-dark bg-dark">
<h1 className="navbar-brand">Storefront - Enterprise</h1>
<App />
// 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 {
} from "@boldpenguin/sdk-web-components/dist/loader";
if (environment.production) {
applyPolyfills().then(() => {


Once loaded, you will need to initialize Storefront - Enterprise 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 Storefront - Enterprise:

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

Initialization Options

Option ParameterDescriptionOptional?DefaultAllowed
clientIdStorefront - Enterprise API KeyNo
envBold Penguin backend environmentYesprodalpha, beta, prod
googleApiTokenAPI token if you would like to use google places autocompleteYesNone (autocomplete will be disabled)
optionsWeb components configurationYesSee below
analyticsAnalytics configurationYesAnalytics disabled by defaultSee Storefront - Enterprise Analytics

Web components options

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

import { QuoteRequestRequestTypes } from "@boldpenguin/sdk-types";
import { init } from "@boldpenguin/sdk-core";

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

clientId: environment.clientId,
env: environment.environmentFlag,
googleApiToken: environment.googleApiToken,
options: customComponentsOptions,

Default web component options

Component OptionsDescriptionDefault
enableQuestionSetNavigationEnables the ability to navigate using the <bp-sdk-question-set-navigation>true
enableOfflineQuotesStorefront - Enterprise will fetch offline carriers that have an appetite for the current application formfalse
quoteStatusFilterAn array of statuses of quotes returned from the backend that the front-end should display (see Quote Request Types for valid options)[QuoteRequestRequestTypes.completed]


Minimum elements

These are the minimum elements required to load Storefront - Enterprise. You must layer additional elements to create and load application forms or provide other functionality.​

<bp-sdk-message-container />
<bp-sdk-question-set-navigation-container />
<bp-sdk-question-set-container />
<bp-sdk-quote-request-container />
bp-sdk-rootRegisters bp-sdk-core and hosts redux instance
bp-sdk-message-containerDisplays alerts and information related to the application form
bp-sdk-question-set-navigation-containerFacilitates navigation of application form
bp-sdk-question-set-containerDisplays active question set
bp-sdk-quote-request-containerDisplays quote results


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

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

<label for="app-form-id">App Form ID:</label>
<button type="button" (click)="handleAppFormLoad()">Load App Form</button>
<button type="button" (click)="newAppForm()">New App Form</button>