Email Verification Widget options

List of common widget configurations and associated code examples for Addressfinder email verification.

Verification method options

These determine the level of verification to be completed.

domain is a check to verify that the domain of the email address is configured to receive emails (ie, that it has the expected DNS records).

check: "domain"

connection is a check to verify that the email account exists at the provided domain. This check is completed after the domain check. This is the default check option.

check: "domain,connection"

provider is a check to determine the underlaying provider of the email. This check can be made once the domain and connections checks have been completed.

provider: true

Attributes and rules

There are four attributes of an email address that the widget can be configured to handle in different ways. These email attribures are: disposable, role, public and unverified. For each of the attributes, the widget applies default rules and messaging but these can be modified to suit your organisations specific needs.

The rules you can apply to the attributes are:

• allow will trigger the widget to show a green tick, and no error message.
• warn will trigger the widget to show an orange warning icon, and an error message.
• block will trigger the widget to show a red cross, and an error message. It will also prevent the user from submitting the form.

Custom rules and messages

You can choose the rules the widget will follow as well as the messages to display when the response triggers one of the rules. Below is an example of non-default rules and messaging:

rules: {
  disposable: {
    rule: "allow"
  },
  role: {
    rule: "block",
    message: "This is a role email address and maybe viewed by more than one person."
  },
  public: {
    rule: "warn",
    message: "Please provide your business email address."
  },
  unverified: {
    rule: "warn",
    message: "We are not able to verify this email address."
  }
}

Custom styling

Our Email Verification Widget includes a stylesheet that defines the visual aspects of the icons and messages that are displayed. You may decide to adjust the colours or fonts used to more closely match the branding of the page in which the widget is embedded. This can be done easily by overriding the default styles that are included in the file.

You can inspect the styles here (tip: use an online beautifier to make it easier to read) and then define your own CSS rules to override the default styles.

View a code example, where we use the Email widget with a different colour for the message.

Here is an example of the html elements that are included in the DOM:

<span class="af-ev-icon-block af-ev-icon" style="top: 768.943px; left: 632.458px; height: 26.5px; width: 26.5px;"></span>
<span class="af-ev-message" aria-live="polite" style="left: 270px; top: 811.484px; width: 400px; display: inline-block;">It looks like there could be a problem with this email address. You must enter a correct email address</span>

Working inside a modal

Because modals are usually static in the context of the page, it is recommended when initialising the widget to provide a Node to the container option. This option takes an HTML Node that will be used as a basis for the HTML injected by the widget. As such, positioning of our loading indicator and feedback message to the user will still work as expected. An example of how to use the container option can be found here.

var conf = {
  // update the container property to the modal's parent container
  container: document.getElementById("modal-content").parentNode
}

Do you need email metadata? Review the metadata page to see what is returned and how the widget can be used to collect it.