JS Widget Integration Documentation
Prerequisites
To use the JS Widget, your website must have a form that meets the following requirements:
- Include an email type field with the class: "zb-email".
- Define the class "zb-email" with the following styles:
- width: 100%;
- box-sizing: border-box;
- Wrap the email input in a div with the styles:
- position: absolute;
- display: inline-block;
Check the example below for more details:
How to use the ZeroBounce JS Widget integration
Step 1:
Go to https://www.zerobounce.net/members/signin and sign in with your ZeroBounce account.
Go to the left-side menu and click Integrations.
Step 2:
On the Integrations page, select JS Widget from the Integration List. You can find it under Apps/Add-Ons.
Step 3:
Enter your website URL in the field that reads “Enter your JS Widget domain name.”
Then, click New Public API Key to generate an API key linked to the domain you entered.
Step 4:
In this section, you can manage your configurations:
- Edit URL and Throttle
- URL - If the URL is changed, ensure that the script is placed on the correct JS Widget page.
- Throttle - This is the number of email validation attempts per hour that you will allow on your form.
- Change statuses
- Select the checkboxes that represent the validation criteria you want to designate as "valid" for your use case. Unselected checkboxes indicate that the associated criteria won’t be considered valid.
- Generate a new API Key
- Show/Hide API Key
- Copy API Key
- Debug Mode
- Delete
The next section provides some advanced settings for your widget:
- When the timeout limit is reached:
- Block all - The validation process will cease, and the form cannot be submitted. The user will get an error, and the submit button will be disabled.
- Allow all - The validation process will be bypassed, and the form submission will be allowed.
- For both cases, no credits are deducted since both actions prevent the validation process.
- When the throttle limit is reached:
- Block all - The validation process will cease, and the form cannot be submitted. The user will get an error, and the submit button will be disabled.
- Allow all - The validation process will be bypassed, and the form submission will be allowed.
- For both cases, no credits are deducted since both actions prevent the validation process.
- When validation is unsuccessful:
- Block all - The form submission is not allowed, and the user will get an error message.
- Allow all and record entry - The form submission will succeed regardless of the validation status, and the validation result will be available in a hidden input field with the ID "zbone_valid." - this information is not for the end user but for the client who implements the jswidget to track emails used on the form.
- For both of these options, credits are deducted as the validation process still occurs even when the user is unaware (for Allow all and record entry).
- What style type we implement:
- Default - This provides you with our default widget design, as shown below under More Information.
- Custom - This allows you to customize the widget’s style with the three available options: HTML ID, Valid Message, and Invalid Message.
- All errors presented to end users will depend on the option selected here. To get more comprehensive information about the error, we recommend using the custom error message. This way, the error will be a text message with explicit information about the error.
Step 5:
It’s recommended that you integrate the provided code snippet before closing the body tag. This implementation can be applied globally across your website or selectively targeted to specific pages where forms are present. Additionally, ensure that email input fields are appropriately configured with the specified attributes mentioned in Prerequisites: type="email" and class="zb-email".
More information
The following images illustrate how a valid and an invalid email will be displayed.
Was this page helpful?
