Skip to main content

Introduction

Pingback offers customizable and secure embeddable forms for easy integration into your website, eliminating the need to build forms from scratch.

These forms are designed to seamlessly collect data from your users with minimal effort.

Explore various implementations and get inspired by visiting our Demos page.

Setup​

Insert the following script tag in the <head> or <body> section of your HTML file to integrate Pingback into your website:

<script src="https://widget.pingback.com"></script>

Usage​

Embedding a Form​

Insert the below HTML snippet where you want the form to appear on your page:

<pb-embeddable-form channel_id="your_channel_id"></pb-embeddable-form>

Replace your_channel_id with the actual channel ID. If you're unsure of the channel ID, contact our support team.

Options​

All attributes can be set up without writing any code. Simply visit the Embed page in your Pingback account and copy the code snippet provided.

For those who want to dive deeper, you can customize the appearance and behavior of the form by adding additional attributes to the <pb-embeddable-form> tag. Below are some of the options you can configure:

Identity​

  • form_id: Unique ID of the form, used to associate the form with a specific action or context. Default value is pb-ef-form.
  • form_class: CSS class that applies specific styles to that form.

Behavior​

  • channel_id: ID for the channel to use.
  • segment_id: (Optional) ID for the segment to use.
  • product_id: (Optional) ID for the product to use.

Customizing​

  • locale: Sets the form language (default: pt). Available languages: pt, en, es.
  • call_to_action: Text for the submit button (default: "Inscrever").
  • thanks_message: Message post form submission (default: "Inscrição realizada com sucesso!"). Use redirect_url to redirect users post submission.
  • redirect_url: (Optional) URL to redirect users after form submission.
  • theme_mode: light (default) or dark.
  • theme_color: Choose from predefined colors:
    • purple-classic (default)
    • mint
    • cyan
    • teal
    • blue
    • navy-blue
    • magenta
    • pink
    • indigo
    • green
    • lime
    • dark-green
    • scarlet
    • crimson
    • red
    • salmon
    • bronze
    • yellow
    • orange
    • black

Field Options​

Email is a required field and if you set <pb-embeddable-form /> without attributes, it will show email field by default. To pass other fields, you can use the following code as an example:

<pb-embeddable-form
  fields='[{"id":"name","label":"Name","type":"name"},{"id":"email","label":"E-mail","type":"email"},{"id":"phone","label":"Phone","type":"phone"}]'
></pb-embeddable-form>

Types name, email and phone has some preset fields behavior.

Custom Fields​

You can add custom fields to the form by using the ones that are available in your channel. If you don't know the available fields, you can ask our support team.

You can add custom fields using the attribute fields as well, like in the code below:

<pb-embeddable-form
  fields='[{"id":"email","label":"E-mail","type":"email"},{"id":"1","label":"Custom Text","type":"text","placeholder":"type something"},{"id":"2","label":"Select an option","type":"dropdown","placeholder":"Some option","helper":"helper","options":["option 1","option 2"]}]'
>
</pb-embeddable-form>

The available attributes are:

AttributeDescriptionPossible Values
idThe ID of the custom field.string
typeThe type of the custom field.text, dropdown, email, name, phone
labelThe label of the custom field.string
helperThe helper text for the custom field. Optional.string
optionsThe options for the custom field. Required for fields of type dropdown. Example: ["Option 1", "Option 2", "Option 3"].Array<string> (only for dropdown)
requiredIndicates whether the field is mandatory. The default value is false.true, false
placeholderThe placeholder text for the custom field. Optional.string

Callbacks​

It is possible to pass the following attributes as callbacks when submitting the form values:

  • on_success: Receives formData as param with all fields values.
  • on_error: Receives formData and errorMessage.

Example:

<script>
  function successFn(formData) {
    console.log(formData);
  }
  function errorFn(formData, errorMessage) {
    console.log(formData, errorMessage);
  }
</script>
<pb-embeddable-form
  on_success="successFn"
  on_error="errorFn"
></pb-embeddable-form>

If you want to use callbacks in a React application, it is not possible to pass the attributes as functions directly. Instead, you can use event listeners like this:

useEffect(() => {
  const form = document.getElementById(FORM_ID);
  if (form) {
    form.addEventListener(`${FORM_ID}-submit:success`, (event) => {
      console.log(event.detail.formData);
      // do something on success
    });

    form.addEventListener(`${FORM_ID}-submit:error`, (event) => {
      console.log(event.detail.formData, event.detail.error);
      // do something on error
    });
  }

  return () => {
    if (form) {
      form.removeEventListener(`${FORM_ID}-submit:success`, onSubmit);
      form.removeEventListener(`${FORM_ID}-submit:error`, onSubmit);
    }
  };
}, [onSubmit]);

Support​

If you have any questions or need help, please contact our support team.