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.
In this page
The phone verification widget can be customised to suit your needs. The integration instructions should allow you to set up quickly, and once this is done, you can tweak the behaviour.
There are three attributes that can be customised. These are:
unverified. For each of these, you are able to set a rule and a message. See the API docs for a definition for these attributes.
There are three rules you can pick from:
allowwill trigger the widget to show a green tick, and no error message.
warnwill trigger the widget to show an orange warning icon, and an error message.
blockwill trigger the widget to show a red cross, and an error message. It will also prevent the user from submitting the form.
block you can also provide a customised message.
Custom rules and messages
Below is an example of the rules that can be used to customise the widget:
message: "We would prefer a mobile phone number."
Note: Both the rules and messages are optional and configurable so can be customised to suit your needs.
Removing the rule will result in the default rule being applied.
Removing the message line will result in the default message being displayed when the rule is enforced.
message: false will result in no message being displayed when the rule is enforced.
In the absence of a specified rule, the following defaults are applied:
In the absence of a supplied message, the following default messages will be returned when the response matches the rules (supplied or default):
|Default messages for warn level
|"Phone number not verified."
|"Preferred countries: (and will list the countries included in the allowedCountryCodes list.)"
|"Mobile phone numbers preferred."
|Default messages for block level
|"Phone number not verified."
|"Allowed countries: (and will list the countries included in the allowedCountryCodes list.)"
|"Mobile phone number required."
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 Phone 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-pv-icon-block af-pv-icon" style="top: 768.943px; left: 632.458px; height: 26.5px; width: 26.5px;"></span>
<span class="af-pv-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 phone number. You must enter a correct phone number</span>
Using a country select field
The widget can be configured to watch a country field and apply the selected country to the query. This significantly improves verification outcomes on forms being completed by people from more than one country.
View this code example demonstrating the use of the country select field.
Collection of phone number metadata using the widget events
View this code example demonstrating the use of the widget events.
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
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.