JavaScript Widget 3.0 - Advanced Settings

This section covers all advanced configuration options for the widget and the app.

Note: If you're a first-time user, it's recommended to proceed with the default settings by clicking Continue. This will create an app with the standard configuration, allowing you to see how the widget functions on your forms.

Note: If you are updating the app settings, make sure to reload any pages where the JS widget is integrated. This ensures the widget loads with the updated settings and reflects the latest changes correctly.

Timeout

This setting defines the maximum time (in seconds) before validation times out. By default, if validation exceeds the timeout limit, the input value is considered acceptable, and form submission is not blocked. (Default: 10 seconds)

It is recommended to keep this setting at its default value, as increasing the timeout may negatively impact the user experience.

Mode

This setting controls how and when the widget triggers validation for form fields.

  • AJAX (Default): Validation is triggered when a user finishes interacting with a form field and moves focus away from it. This provides real-time feedback and is generally recommended for a smoother user experience.
  • FormSubmit: Validation is triggered only when the user clicks the submit button. This mode validates all relevant fields at once, just before form submission.

Unless you have a specific reason to validate only on submission, it's recommended to keep this setting on AJAX for immediate validation feedback.

Submit Button Selector

The Clearout JS Widget is designed to automatically detect the submit button within your form. In most cases, no manual configuration is required.

However, if the widget is unable to locate the submit button—due to non-standard markup or dynamic form rendering—you can manually specify the submit button by providing a valid jQuery selector in this field.

Use this option only when the automatic detection fails, ensuring that the widget can correctly bind validation behavior to the form submission process.

On Ready Callback (optional)

This option allows you to define a custom JavaScript function that runs once Clearout's JS Widget has fully loaded on your page.

You can use this to execute custom JavaScript or CSS as soon as the widget is initialized, enabling additional customization or functionality tailored to your needs.

                    
                      on_ready: function() {
                        // Your custom initialization code here
                        console.log('Clearout widget is ready!');

                        // Add custom styling or functionality
                        window.clearout.$('.my-form-field').addClass('some-custom-class');
                      }
                    
                  

Trigger Form Discovery on Event

Specifies when the widget should attempt to discover forms on the page, based on a defined event.

This is particularly useful for platforms like HubSpot v4, where forms are dynamically loaded and an event is emitted once they are ready

Limit Usage (optional)

This option allows you to set usage limits for your JS widget app, ensuring that validations do not exceed a specified threshold per IP or globally. This helps prevent excessive usage and protects your validation credits from being misused on pages where validations are enabled.

Default Behavior: If the usage limit is exceeded, validations will no longer be performed for the respective inputs. However, form submissions will not be blocked. This behaviour can be changed by enabling the Block Form Submission on Limit Crossed Setting on your Acceptable Values options in the previous step.

  • Per IP: Defines the maximum number of validations allowed per individual IP address.
  • Globally: Sets a usage limit for validations across the entire app.

Add Form URLs (optional)

This option lets you restrict validations to specific URLs, ensuring that your app runs validations only on approved pages.

You can also use wildcard characters (*) to define patterns instead of listing individual URLs. Pattern Examples & Interpretation:

  • https://*.clearout.io/* → Allows access to any URLs and subdomains within Clearout.io.
  • https://clearout.io/forms/* → Restricts access to URLs under /forms/ only.
  • https://clearout.io/*/forms → Grants access to any URL ending with /forms, regardless of its position in the path.

Google Recaptcha v3 (optional)

This option allows you to enable Google reCAPTCHA v3 (invisible) for your app. It is recommended to enable this option if you are using a form provider that does not support reCAPTCHA. and additionally it safeguards your app from abuse.

You can find more information about Google reCAPTCHA v3 and how generate and site key and secret key fromhere.

The reCAPTCHA threshold is the minimum score required for a interaction to be considered human-like. The default threshold is 0.5, but you can change it to a value between 0.2 and 0.8. The higher the threshold, the more stricter the reCAPTCHA check is.

Recommendation: If your form provider already supports reCAPTCHA (not required to enable here).