Embeddable Penguin Custom Responses

Embeddable Penguin is a self-contained Angular Element you include on your existing website. When the form is submitted, the response appears within element on the same page.

You can override the default responses with custom success and error templates, or you can redirect to another page entirely.

Custom Templates

You can override the default success and error responses using HTML snippets stored in external files. These are not full HTML pages, but only what is displayed within the element. Here is an example success template:

assets/custom_success_template.html

  <span>
    <p>
      &#128077;
    </p>
    Your sample form was submitted successfully!
  </span

Once this file is uploaded to the web server, you can reference it using the custom_success_template attribute on the form element.

  <embeddable-penguin
    client_id="LnTzGVqAqZg5q5ueegsiEz76YBkwMouZ"
    environment="beta"
    custom_success_template="assets/custom_success_template.html"
    custom_error_template="assets/custom_error_template.html"
    answers='{"mqs_first_name":"Jane","mqs_last_name":"Doe"}'
  ></embeddable-penguin>

The form displays your custom success, (or error), messages when a prospect submits the form.

Custom Redirects

You can also redirect the form to a URL of your choosing for both success and error responses. This overrides any custom responses.

Pass these URLs using custom_success_redirect and custom_error_redirect attributes on the form element.

  <embeddable-penguin 
    environment="beta"
    client_id="LnTzGVqAqZg5q5ueegsiEz76YBkwMouZ"
    custom_success_redirect="https://www.boldpenguin.com/"
    custom_error_redirect="http://endoftheinternet.com/"
  ></embeddable-penguin>

The form redirects to your custom success, (or error), URL when a prospect submits the form.

Examples

Custom Templates

Custom Redirects
← CustomizationTerminal Overview →