Skip to main content

Embeddable Penguin

The Embeddable Penguin contact form allows your website's visitors to request assistance in finding commercial insurance for their businesses. It is a self-contained, self-validating form you embed directly into your existing web page. It co-exists within your existing front-end web frameworks and is customizable via cascading style sheets (CSS).

Implementation​

After completing the prerequisites, do the following:

  • Add a <script> element of type module in the head of your HTML document
    • Import the defineCustomElements() function from https://cdn.boldpenguin.com/embeddable-penguin/loader/index.js.
    • Call defineCustomElements()
  • Add the <embeddable-penguin> element at the point the form should appear in your page.
<!doctype html>
<html lang="en">
  <head>
    <!-- The link element is optional: it preloads the js entry file before it's needed -->
    <link rel="modulepreload" href="https://cdn.boldpenguin.com/embeddable-penguin/loader/index.js">
    <script type="module">
      import { defineCustomElements } from 'https://cdn.boldpenguin.com/embeddable-penguin/loader/index.js';
      defineCustomElements();
    </script>

    <meta charset="utf-8">
    <base href="/">
  </head>

  <body>
    <h2>Contact us for assistance getting commercial insurance!</h2>
    <embeddable-penguin environment="beta" client_id="LnTzGVqAqZg5q5ueegsiEz76YBkwMouZ" />
  </body>
</html>
  • Run npm install @boldpenguin/embeddable-penguin
  • Where the app starts, often in src/index.tsx, import the embeddable penguin dependencies and call the defineCustomElements method
    • If you didn't create your app using create-react-app, do this in whichever file calls ReactDOM.render()
  • Add the <embeddable-penguin> element at the point the form should appear in your app.
// src/index.tsx
import '@boldpenguin/embeddable-penguin`;
import { defineCustomElements } from '@boldpenguin/embeddable-penguin/dist/loader`;

defineCustomElements();

In Component:

<embeddable-penguin environment={envName} client_id={clientId} />
  • Run npm install @boldpenguin/embeddable-penguin
  • In src/main.ts, import the embeddable penguin dependencies and call the defineCustomElements method
  • Add the <embeddable-penguin> element at the point the form should appear in your app.
// src/main.ts
import '@boldpenguin/embeddable-penguin`;
import { defineCustomElements } from '@boldpenguin/embeddable-penguin/dist/loader`;

defineCustomElements();

In Component:

<embeddable-penguin [environment]="envName" [client_id]="clientId" />

Element Parameters​

embeddable-penguin​

  • client_id
    • You will be assigned a unique client_id for each of our environments. The client_id is your identifier within the Bold Penguin Exchange.
    • Type: String
    • Required: Yes
  • environment
    • Defaults to prod if not provided.
    • Valid inputs are beta or prod
    • Required: No
  • answers
    • You can pre-populate answers to the form questions using an in-line JSON document.
    • Type: JSON String
    • Required: No
  • img_url
    • A URL to the client's logo image
    • Can be any mime type of image/*
    • Required: No
  • show_text
    • Turn on field labels for the form
    • Type: Boolean String ("true"/"false")
    • Required: No
  • collect_email
    • Include an email field in the form
    • Type: Boolean String ("true"/"false")
    • Required: No
  • custom_success_template
    • The URI of a file containing the HTML snippet that replacesthe default success response.
    • Type: URI string
    • Required: No
  • custom_error_template
    • The URI of a file containing the HTML snippet that replaces the default error response.
    • Type: URI string
    • Required: No
  • custom_success_redirect
    • The URL to redirect to on successful submission.
    • Type: URL string
    • Required: No
  • custom_error_redirect
    • The URL to redirect to if there is an error on submission.
    • Type: URL string
    • Required: No