Phone widget integration guide

The phone verification API is currently in a beta state. It can be used in production but may be adjusted and improved. Please let us know if you wish to use the service so that we can keep you up-to-date on any changes being made.

Installation Instructions

This page shows how to add Addressfinder’s phone verification widget to an existing form hosted on your website.

The basic steps are:

Find the html IDs of the phone number field/s you want to add phone validation to.
Copy/paste the example phone widget javascript into your webpage.
Adjust the javascript to suit your business needs and the field IDs of your form.

Step by step

You should have an existing web form containing a phone number field.

We will enhance this form to enable real time verification of the phone numbers once they are entered into the form and prior to form submission.

The widget will provide visual feedback with an icon (tick, cross, warning) and optional configurable message if appropriate. View and interact with our code examples to see these in action.

The example code block below connects to the phone number field through its ID. If your form does not have ID value(s) assigned to the fields, you can also use CSS selectors to identify the fields. For example, you might use selectors such as input[type=number] or input[name=phone_number].

  
<script>
(function (d) {
  // **************************************************
  // Addressfinder settings
  // **************************************************

  // STEP BY STEP integration instructions here:
  // https://addressfinder.com/r/docs/phone/integration-instructions/

  var conf = {
    // STEP 1: update the property selectors using the ID attributes of your form fields
    phoneSelector: "#phone_number",

    // STEP 2: paste in your licence key
    licenceKey: "PLACEHOLDER_KEY",

    // STEP 3: set your default country code
    defaultCountryCode: "NZ",

    // STEP 4: (optional): restrict phone numbers to locations by specifying country codes
    // allowedCountryCodes: "AU, NZ",

    // STEP 5: (optional): customise the behaviour by adding some rules.
    // rules: {}

    // See Advanced Options (below) for additional options and instructions on how to use them.
  };

  d.addEventListener("DOMContentLoaded", function () {if (d.querySelector(conf.phoneSelector)) {var e=d.createElement("script");e.src="https://api.addressfinder.io/assets/phone/v2/widget.js",e.async =!0,e.onload=function(){new AddressfinderPhone.Phone.Widget(conf.phoneSelector,conf.licenceKey,conf)},d.body.appendChild(e)}});
})(document);
</script>

Paste the provided configuration script

You should paste the configuration script into the source code of your webpage. We suggest you include it at the end of the document's <body> element.

Adjust the configuration

You should now set the ID value for your phone number field. Notice that the ID value has a # prefix which needs to be retained. If you are using a CSS selector, then this is not necessary.

Next, update the licenceKey value to use your key. You can obtain this value from the credentials link in the portal sidebar

Advanced options

We encourage you to customise the phone verification widget by including rules and custom messaging in the configuration script. In this way, the widget can be set up to allow or restrict certain types of phone numbers in accordance with your business needs.

There are two primary attributes that can be customised. These relate to the type of phone numbers provided (mobile vs landline) and the countries in which those numbers are registered. Details of the available options can be found in the phone verification Advanced usage documentation.

Working examples

We have several code examples demonstrating the phone verification widget being used in a variety of scenarios. You are welcome to copy the javascript from these code examples and configure them to your form.

Troubleshooting

Having trouble? Send us an email at support@addressfinder.nz, and we will have a look. Be sure to include the URL of the page, so we can see the page with the problem.

Get Started