Widget Configuration Options

the mailfloss widget allows you to verify emails in real time, fast and easy default values in settings the widget comes with default settings, which you can choose to keep or customize below is a list of the default settings and their descriptions if you're happy with these defaults, you're all set to start using the widget timing ratelimituserattempts this sets the maximum number of verification attempts that a user can perform within a specific time period default is 10 ratelimitstartswithin if the user exceeds ratelimituserattempts within ratelimitstartswithin, the user will be rate limited the value of ratelimitstartswithin is set in milliseconds default is 10000 ratelimitwaittime the time period a user must wait before verification will begin again once this period is over, the user can start verifying again, and the process repeats the value of ratelimitwaittime is set in milliseconds default is 10000 maxverificationtime sets the maximum time allowed for a verification process to complete if the time exceeds this limit, the process will be aborted the value of maxverificationtime is set in milliseconds default is 10000 donetypingtime sets the time the widget waits after a user stops typing before starting the verification process this delay allows the user to complete their input before the verification process begins the value of donetypingtime is set in milliseconds default is 1500 overlaydisplaytime sets the time duration in milliseconds for which the dropdown overlay remains visible after it appears once the overlaydisplaytime has elapsed, the dropdown overlay disappears automatically default is 2500 messages validmessage this message is displayed in the dropdown when the email entered by the user is valid default is "valid email" invalidmessage this message is displayed in the dropdown when the email entered by the user is invalid default is "invalid email" verifyingmessage this message is displayed in the dropdown when the widget is verifying the email entered by the user default is "verifying " suggestionmessage this message is displayed in the dropdown when a suggestion is made to the user due to a potential misspelled domain default is "maybe you meant " regexfailmessage this message is displayed when the user types something that is not a valid email address according to the specified regular expression default is "please enter a valid email" allowed categories statusallowedvalues this is an array that lets you specify the allowed values for the status of the email the possible values are valid, unknown, and risky you can enter any combination of these values that you want to be allowed default is \['passed', 'unknown', 'risky'] reasonallowedvalues this is an array object that lets you specify the allowed values for the reason of the email status the possible values are valid, accept all, and unverified you can enter any combination of these values that you want to be allowed default is \['valid', 'accept all', 'unverified'] blockroleaddresses this is a boolean that, when set to true, blocks all role based email addresses default is false blockfreeaddresses this is a boolean that, when set to true, blocks all free email addresses such as gmail, yahoo, hotmail, and aol default is false blockdisposableaddresses this is a boolean that, when set to true, blocks all disposable email addresses default is true css settings verifyingspinnercolor sets the color of the loading spinner default is #3498db boxshadowvalid sets the box shadow for a valid email response default is 0px 4px 5px 1px rgba(21, 157, 3, 0 2) boxshadowinvalid sets the box shadow for an invalid email response default is 0px 4px 5px 1px rgba(157, 3, 3, 0 2) boxshadowdefault sets the box shadow for a default response default is 0px 4px 5px 1px rgba(0, 0, 0, 0 1) borderradiusresponse sets the border radius for the response message box default is 5px borderinputdefault sets the border for the input when no response has been given default is 1px solid #e1e0e0 borderinputvalid sets the border for the input when a valid email response has been given default is 1px solid green borderinputinvalid sets the border for the input when an invalid email response has been given default is 1px solid red colorinvalid sets the color for the response message when the email is invalid default is red colorvalid sets the color for the response message when the email is valid default is green others autodetect this is a boolean object that, when set to true, enables the widget to automatically detect the input field for email verification if set to false, the widget will not automatically detect the input field and an inputselector should be specified, instead default is true inputselector if autodetect is set to false, this object should be set with a string value containing the class or id of the input field that the user wants to use for email verification, written like this "#inputidname"/ " inputclassname" the widget will use this selector to target and verify the email entered in the specified input field if left undefined and autodetect is disabled, the widget will not work default is "" offersuggestion this is a boolean object that, when set to true, enables the widget to offer suggestions in case the email entered by the user is potentially a typo if set to false, the widget will not ask the user if they meant to type the suggested email default is true poweredby this is a boolean object that, when set to true, displays the mailfloss logo in the widget this option may not be available depending on your subscription plan default is true showdropdownbox this is a boolean object that, when set to true, displays the dropdown box in the widget if set to false, the widget will not display the dropdown box default is true borderhighlight this is a boolean object that, when set to true, highlights the border of the input field with a color that indicates whether the email entered is valid or invalid by default, the border is green for valid emails and red for invalid emails default is true ignoreinputs is an array where you can enter the name, class or id of the inputs that you want the widget to ignore when the widget is scanning the page for inputs to verify, it will skip any input whose name, id, or class matches the names specified in this array this can be useful if you have inputs that you don't want to be verified by the widget and autodetect is disabled it must be in an array e g \['emailclass'] default is undefined publickey this is a string where you must put your api key so that the widget can work this is a required parameter, and without it, the widget will not function debugmode this is a boolean that, when set to true, activates the debug mode of the widget this mode is used for debugging purposes and provides additional information about the widget's behavior default is false afterverification this setting works as a callback in case you want to use the api response in one of your functions, you can assign the name of your function as the value of afterver every time you make a verification, your function will be returned with the api response as string to use it as an object you can use json parse(response) you can see an example of this at the bottom of this page widget setup examples / example 4 note if you want to console log the response, remember to enable the debugmode on the settings customizing your widget in order to customize your widget, you need to pass the custom settings into the window\ mf settings object with the modified value initially, only the publickey is set in this object inside this object, there will be every setting that you want to change // it will look like this window\ mf settings = { // name of the setting value, "publickey" "\<your public key>", "validmessage" "this email is valid" } here's a list of things you can change and how the values below are the default values, feel free to changed them to your preference timing ratelimituserattempts 10, ratelimitstartswithin 10000, ratelimitwaittime 10000, maxverificationtime 10000, donetypingtime 1500, overlaydisplaytime 2500, messages validmessage 'valid email', invalidmessage 'invalid email', verifyingmessage 'verifying ', suggestionmessage 'maybe you meant ', regexfailmessage 'please enter a valid email', allowed categories statusallowedvalues \['passed', 'unknown', 'risky'], reasonallowedvalues \['valid', 'accept all', 'unverified'], blockroleaddresses false, blockfreeaddresses false, blockdisposableaddresses true, css verifyingspinnercolor '#3498db', boxshadowvalid '0px 4px 5px 1px rgba(21, 157, 3, 0 2)', boxshadowinvalid '0px 4px 5px 1px rgba(157, 3, 3, 0 2)', boxshadowdefault '0px 4px 5px 1px rgba(0, 0, 0, 0 1)', borderradiusresponse '5px', borderinputdefault '1px solid #e1e0e0', borderinputvalid '1px solid green', borderinputinvalid '1px solid red', colorinvalid 'red', colorvalid 'green' others autodetect true, inputselector "", poweredby true, showdropdownbox true, borderhighlight true, ignoreinputs \[], debugmode true, publickey "" widget setup examples here are some common scenarios to give you some ideas on how to setup your widget example 1 basic setup \<script> let mailfloss = window\ mailfloss = window\ mailfloss || \[], mf settings = { publickey "\<your public key>", }; mailfloss push(\[mf settings]), (function() { first script = document getelementsbytagname('script')\[0], script = document createelement('script'); script type = "text/javascript", script async = !0, script src = "https //cdn mailfloss io/v1/index min js", first script parentnode insertbefore(script, first script) })(); \</script> example 2 rate limit setup the user will have 5 attempts per day in this case, the widget setup looks like \<script> let mailfloss = window\ mailfloss = window\ mailfloss || \[], mf settings = { ratelimituserattempts 5, ratelimitstartswithin 86400000, //a day in miliseconds ratelimitwaittime 86400000, publickey "\<your public key>" }; mailfloss push(\[mf settings]), (function() { first script = document getelementsbytagname('script')\[0], script = document createelement('script'); script type = "text/javascript", script async = !0, script src = "https //cdn mailfloss io/v1/index min js", first script parentnode insertbefore(script, first script) })(); \</script> we want to limit the user to only 5 attempts (ratelimituserattempts), per day (ratelimitstartswithin will be 86400000 miliseconds = a day) and the time we want the user to be rate limited will also be a day (ratelimitwaittime) the user will need to come back tomorrow once 5 attempts have been used for the day a more common setup to keep bots and abusers away might look like this \<script> let mailfloss = window\ mailfloss = window\ mailfloss || \[], mf settings = { ratelimituserattempts 5, ratelimitstartswithin 10000, ratelimitwaittime 30000, publickey "\<your public key>" }; mailfloss push(\[mf settings]), (function() { first script = document getelementsbytagname('script')\[0], script = document createelement('script'); script type = "text/javascript", script async = !0, script src = "https //cdn mailfloss io/v1/index min js", first script parentnode insertbefore(script, first script) })(); \</script> we want to limit the user to 5 attempts (ratelimituserattempts) every 10 seconds (ratelimitstartswithin) if the user reaches the 5 attempts within 10 seconds, then the rate limit will be activated and the user will need to wait for 30 seconds (ratelimitwaittime) before they can try again example 3 how to setup the widget to match your brand colors \<script> let mailfloss = window\ mailfloss = window\ mailfloss || \[], mf settings = { boxshadowvalid '0px 4px 5px 1px rgba(245, 40, 145, 0 8)', &#x9; borderinputvalid '5px solid green', &#x9; colorvalid 'rgba(236, 187, 30, 0 8)', boxshadowinvalid '0px 4px 5px 1px rgba(0, 187, 231, 0 8)', borderinputinvalid '5px solid red', colorinvalid 'rgba(236, 187, 231, 0 8)', colorvalid 'rgba(236, 187, 30, 0 8)', publickey "\<your public key>" }; mailfloss push(\[mf settings]), (function() { first script = document getelementsbytagname('script')\[0], script = document createelement('script'); script type = "text/javascript", script async = !0, script src = "https //cdn mailfloss io/v1/index min js", first script parentnode insertbefore(script, first script) })(); \</script> example 4 how to use the afterverification (callback) setting \<script> function callback(response) { const responseobject = json parse(response); console log(responseobject); //code where you are using the response here } \</script> \<script> let mailfloss = window\ mailfloss = window\ mailfloss || \[], mf settings = { debugmode true, // to print console log messages in the callback afterverification callback, //name of your callback function publickey "\<your public key>" }; mailfloss push(\[mf settings]), (function() { first script = document getelementsbytagname('script')\[0], script = document createelement('script'); script type = "text/javascript", script async = !0, script src = "https //cdn mailfloss io/v1/index min js", first script parentnode insertbefore(script, first script) })(); \</script>