JavaScript Widget - Overview

Clearout JavaScript Widget comes handy for non-developers to easily integrate real-time verification to all kinds of online forms. This will let a user capture all valid prospects right at the time of form filling avoiding the loss of any opportunity

Clearout

Can't wait!!! Check out our demos to know the real-time validation in actions

Getting Started with JavaScript Widget

Create your JavaScript Widget from the Apps page by clicking on 'Create App' and by choosing run type as 'Client'. As part of Clearout Apps creation you will be asked to decide how and where the validation needs to be performed. This helps prevent the mishandling of credits and from abusers by setting access threshold across domain, URL and/or IP.

Clearout

Security Configuration:

1

Limit Usage:

You can take full control in avoiding abuse by limiting the usage specifying the domains or IP addresses from which the verification should happen. This will further help in using the credits effectively. It is always advisable to specify a limit either at a global level or specific to IPs. Failing to do so might deplete the credit balance sooner. There will be no limits applied by default.

Clearout
2

Whitelist Domains:

We help in whitelisting the URLs from which the verification can happen. Only the URLs that are added as part of the whitelist will be allowed to verify the emails captured in the form. You can also whitelist the domains using wildcards as part of the URLs that is also intended to be allowed. We support the following wildcard patterns:(mentioned below)

Clearout

Get your JavaScript Widget up and working:

Once the client side app is created, you will be provided with a code snippet that needs to be inserted anywhere before the closing body tag. The client side app starts verifying the emails once the snippet is saved as part of the form.

      
        <script>
          var clearout = window.clearout = window.clearout || [], 
          opts = { 
            app_token: "34e1049887d366a4e30560be:e4e9e1104d251e84f3011bed7b89249792913cd", 
            mode: "ajax"
          };
          clearout.push(["initialize", opts]), 
              function () { 
                var t = document, e = t.createElement("script"), 
                a = t.getElementsByTagName("script")[0]; 
                e.type = "text/javascript", e.async = !0, 
                e.src = "https://clearout.io/wp-content/co-js-widget/clearout_js_widget.js", 
                a.parentNode.insertBefore(e, a) 
              }();
        </script>
          
      
    

With the mentioned snippet's basic settings you can capture the valid business email addresses. In case you wanted to accept free accounts or other such accounts, you can make use of the advanced settings.

Advanced Settings:

Once the code snippet is generated, you can specify the settings for the widget against the 'opts'. Initially the code snippet only contains 'app_token' which is the user identifier and 'mode' which is configured to ajax by default. These settings are enough to make the widget working. You can configure the additional settings as below;

                
                  <script type="text/javascript">
                    var clearout = window.clearout = window.clearout || [];
                    var opts = {
                  
                        app_token: YOUR_API_TOKEN,
                        /**
                          *Replace 'YOUR_API_TOKEN' with your public token
                          */
                  
                        block_role_account: true,
                        /**
                          *The option to accept or reject the Role based accounts (true/false) - default is 'false'
                          */
                  
                        block_free_account: true,
                        /**
                          *The option to block Free accounts (true/false) - default is 'false'
                          */
                  
                        block_disposable_account: true,
                        /**
                          *The option to block Disposable accounts (true/false) - default is 'true'
                          */
                  
                        block_unknown_status: false,
                        /**
                          *The option to block the emails that Clearout verification gives Unknown result (true/false) -
                          *default is 'false'
                          */
                  
                        block_catchall_status: false,
                        /**
                          *The option to block the emails that Clearout verification gives Catchall result (true/false) -
                          *default is 'false'
                          */
                  
                        timeout: 10,
                        /**
                          *The option to define the maximum time that can be used for verifying the status of the given
                          *email address (Number in Seconds)
                          */
                  
                        feedback: true,
                        /**
                          *The option to show feedback message for invalid emails (true/false) - default is 'true'
                          */
                  
                        feedback_invalid_classname: error-msg,
                        /**
                          *The option to specify the class name to refer invalid CSS(String) - default is 'error-msg'
                          */
                  
                        feedback_invalid_message: "Invalid email address",
                        /**
                          *The option to specify the String to be displayed when invalid email is entered -  default is "Invalid
                          * email address"
                          */
                  
                        feedback_free_account_message: "Invalid - Free account not allowed",
                        /**
                          *The option to specify the String to be displayed when free account email is entered - default is "Invalid
                          * - Free account not allowed"
                          */
                  
                        feedback_role_account_message: "Invalid - Role account not allowed",
                        /**
                          *The option to specify the String to be displayed when role based email is entered - default is "Invalid - Role account not allowed"
                          */
                  
                        feedback_disposable_account_message: "Invalid - Disposable account not allowed",
                        /**
                          *The option to specify the String to be displayed when Disposable email is entered - default is "Invalid - *Disposable account not allowed"
                          */
                  
                        feedback_unknown_message: "Unable to verify the email address, try after sometime",
                        /**
                          *The option to specify the String to be displayed when Clearout gives Unknown status post verification default is "Unable to verify the email address, try after sometime"
                          */
                  
                        feedback_catchall_message: "Catch All email not acceptable, please enter a different email address",
                        /**
                          *The option to specify the String to be displayed when Clearout gives Catchall status post verification - default *is "Catch All email not acceptable, please enter a different email address"
                          */
                  
                        mode: "ajax",
                        /**
                          *The option to specify the desired mode of verification (ajax/formSubmit) - default is "ajax"
                          */
                  
                        selector: "user_email",
                        /**
                          *The option to specify the email field using specified selector for which verification should happen (classname eg:user_email) - default is empty
                          */
                  
                        debug: true,
                        /**
                          *The option to specify debug console (true/false) - default is 'true'
                          */
                  
                        elements: [{selector: 'ANY SELECTOR' ,opts:'ANY OF THE ABOVE MENTIONED OPTIONS'}],
                        /**
                          *This block can be used to `configure any element in the form specifying the selector and the equivalent options as a array - default is empty array
                          */
                  
                        inspect: true
                        /**
                          *The option to specify if the field getting verified needs to be highlighted with a border or not default is ‘false’
                          */



                        on_before_verify: <function>,
                        /**
                          * Use this option to pre-hook into email validation workflow, the function will be called before the control pass * to the Clearout validation, so its a best place to do sanitization or your own valiation, by returning false to * this function will stop Clearout validation. Alternatively, returning true will perform Clearout validtion
                  
                          * Example:
                          * on_before_verify: function({email}){
                          *   // custom code
                          *   // return True or False
                          * }
                          */
                    
                        on_after_verify: <function>,
                        /**
                          * Use this option to post-hook into email validation workflow, the function will be called after successful execution of Clearout validation along with result, so its a best place to trigger any further operations based on the validation result such as changing customizing UI or messages, by returning false will stop Clearout message  
                  
                          * Example:
                          * on_after_verify: function({result}){
                          *   // custom code
                          *   // return True or False
                          * }
                          */
                    
                        recaptcha_site_key: <GOOGLE_RECAPTCHA_V3_SITE_KEY>,
                        /**
                          * Option to specify whether to use Google reCAPTCHA (v3) in * order to prevent bot or abuser from the signup forms.
                          * <SITE_KEY> needs to be generated and replaced in the above option.
                          */
                    
                        auto_validation: true,
                       /**
                          * Option to auto detect the email text field in the forms, setting 'false' won't detect email fields automatically provide a way to specify explicitly - default is 'true'
                          */
                    
                        on_ready: <function>,
                        /**
                          * Use this option to attach Clearout validation to the custom forms, most probably this will used when 'auto_validation' option set to false
                          *Example:
                          * on_ready: function(){
                          *   // custom code
                          * }
                          */
                            
                      };

                      clearout.push(["initialize", opts]),
                      function () {
                        var t = document, e = t.createElement("script"), a = t.getElementsByTagName("script")[0];
                        e.type = "text/javascript", e.async = !0, 
                        e.src = "https://clearout.io/wp-content/co-js-widget/clearout_js_widget.js",
                        a.parentNode.insertBefore(e, a)
                      }();
                            
                </script>
                    
                
              

reCAPTCHA:

Google reCAPTCHA (v3) helps to determine hackers from abusing the system as they block bots from submitting fake or nefarious online requests.

Captchas can be used to;

  • Protect the integrity of online forms by stopping abusers sending in repeated false responses
  • Prevent hackers from signing up for multiple accounts
  • To make online shopping more secure

So captcha with real-time email validation would generate genuine leads. To enable Google reCAPTCHA (v3) you need to generate site and secret Key from Google

Clearout

Custom Forms:

Most of the websites are dynamic and data capture in the forms are customized or changed according to the user inputs, so bringing Clearout's email validation to those custom forms require few additional steps;

1

Switch off the auto-validation mode. Adding Clearout's JS Widget will auto-detect the email fields, by default and attach the validation. This can be disabled by setting 'auto_validation' option to 'false'

2

Specify which form & submit button on the page requires validation, by setting the form options as mentioned below;

Please change the option values according to your form setting, since the below values are only for reference.

            
              var formOpts = {
                formSelector: '.my-form',
                /** specify form selector - mandatory option */
                submitButtonSelector: '.my-form-submit-btn',
                /** specify form submit button - mandatory option */
                mode: 'formsubmit',
                /** either ajax or formSubmit - default formSubmit */
                submitButtonOverlay: true /** whether to overlay transparent container or not - default true */
            }   
            
            
3

Pass the form option(formOpts) to the Cleaout emailValidator service method attachToForm() as part of the widget on_ready callback as mentioned below;

            
              var coJsWidgetReady = function() {
                console.log('Clearout.onReady called...attaching form for validation')
                var formOpts = {
                    formSelector: '.my-form',
                    /** specify form selector - mandatory option */
                    submitButtonSelector: '.my-form-submit-btn',
                    /** specify form submit button - mandatory option */
                    mode: 'formsubmit',
                    /** either ajax or formSubmit - default formSubmit */
                    submitButtonOverlay: true /** whether to overlay transparent container or not - default true */
                  }
                  clearout.emailValidator.attachToForm(formOpts)
                }
              
            
4

The final snippet code would look something like below and needs to be inserted on the page where the form will be rendered.

            
              var coJsWidgetReady = function () {
                console.log('Clearout.onReady called...attaching form for validation')
                var formOpts = {
                  formSelector: '.my-form',
                  /** specify form selector - mandatory option */
                  submitButtonSelector: '.my-form-submit-btn',
                  /** specify form submit button - mandatory option */
                  mode: 'formsubmit',
                  /** either ajax or formSubmit - default formSubmit */
                  submitButtonOverlay: true/** whether to overlay transparent container or not - default true */
                }
                clearout.emailValidator.attachToForm(formOpts)
              }
        
              var clearout = window.clearout = window.clearout || [];
              var opts = {
                app_token: 'YOUR_APP_TOKEN',
                api_url: "https://api.clearout.io",
                auto_validation: false,
                on_ready: coJsWidgetReady
              }
              clearout.push(["initialize", opts]);
              (function () {
                var u = "/";
                var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
                g.type = 'text/javascript'; g.async = true;
                g.src = 'https://clearout.io/wp-content/co-js-widget/clearout_js_widget.js',
                s.parentNode.insertBefore(g, s);
              })();
            
            

Activate / Deactivate the apps:

If you want to disable any app temporarily, you can click on the toggle button against the app under the status column. Verification will not be carried out as long as the status of the app remains ‘Inactive’. You can resume the verification by turning the toggle to an active state.

Clearout

Deleting the unused / old apps:

Any unused app can be deleted by clicking the delete icon against the app. On hovering over the app name, the option to delete will be visible.

Clearout

Reset / Regenerate the Token:

Whenever an abuse is identified while you are still in control of the usage,you may reset the apps. Resetting any app, provides two options;

  1. Deactivating the existing token in use . The token will expire immediately(in case of an abuse identified)
  2. Keep the already active token working for an hour post resetting(which might be helpful in case of migrating to a newer setup). Once the first hour completes, the old token will not work.
Clearout

It is always advisable choosing ‘Expire Immediately’ if any sort of abuse is identified. On successful resetting of the token, make sure to update the form code with the new token.