Skip to main content

Embeddable Penguin Customization

Embeddable Penguin is a self-contained Custom Element you include on your existing website. Though it is written in StencilJS, the element is compatible with other frameworks and even static HTML. It fully supports form validation and applies the appropriate classes to the form input fields based on current state.

You can also include a field to collect email addresses or add Field Labels to the form fields.

Style​

To prevent unintentional style conflicts, the Embeddable Penguin element is encapsulated in a Shadow Dom, and cannot be styled with traditional css classes or ids.

Instead, the child elements are given part attributes, and can be styled using the part css pseudo-element syntax.

List of Part Attributes​

  • ep-wrapper - The div element which wraps the Embeddable Penguin content.
  • ep-img-wrapper - The div element which wraps the logo image (only if the optional img_url property is provided)
  • ep-logo-img - The img element in which the logo image is displayed (only if the optional img_url property is provided)
  • ep-form-element - This form element which contains the Embeddable Penguin html form.
  • ep-button-submit - The button element which submits the form.
  • ep-input-wrapper - The span element which wraps the list of fields shown in the form.
  • ep-field - The embeddable-penguin-field custom element for each field.
  • ep-input-label - The label for each individual field (only if the optional show_text property is provided)
  • ep-input-text - The input element for text questions for first name, last name, email, etc.
  • ep-input-select - The select element for the coverage type select field.
  • ep-input-checkbox - The input element for checkbox questions, specifically the TCPA consent question.
  • ep-validation-error - The span element which contains validation error text
  • ep-checkbox-label - The label element which contains the text of a checkbox question

Style Example​

Here is a sample CSS file reflecting typical form styling:

embeddable-penguin {
  width: 300px;
  display: block;
  font-size: 1.2rem;
  font-family: sans-serif;
}

embeddable-penguin::part(ep-input-text),
embeddable-penguin::part(ep-input-select) {
  padding: 10px 10px;
  margin: 8px 0;
  box-sizing: border-box;
  width: 100%;
  font-size: 1.2rem;
  border: 1px solid grey;
  border-radius: 0.25rem;
}

embeddable-penguin::part(ep-button-submit) {
  background-color: #6200EA;
  color: white;
  padding: 10px 10px;
  font-size: 1.2rem;
  border-radius: 0.25rem;
  margin-bottom: 8px;
}

embeddable-penguin::part(ep-button-submit):disabled {
  background-color: lightgrey;
}

embeddable-penguin::part(ep-checkbox-label) {
  font-size: .75rem;
}

embeddable-penguin::part(ep-validation-error) {
  color: red;
  font-size: .85rem;
  margin-bottom: 8px;
}

Collect Email​

You can include an optional field to collect email addresses by adding the attribute collect_email="true" to the embeddable-penguin element:

  <embeddable-penguin client_id="LnTzGVqAqZg5q5ueegsiEz76YBkwMouZ" collect_email="true" />

Field Labels​

You can include optional field labels in the form by adding the attribute show_text="true" to the embeddable-penguin element:

  <embeddable-penguin client_id="LnTzGVqAqZg5q5ueegsiEz76YBkwMouZ" show_text="true" />