Coding Challenges: Answering Frequently Asked Questions
There are many integration methods for Data8’s products and services, some as simple as installing a plugin, and some requiring a more technical implementation such as using our many API’s, or implementing our code libraries. We understand that everyone has different levels of technical ability, and that not everyone is a coding genius. This blog aims to cover some of the most frequently asked questions with our code-based integrations such as using our API’s and our code libraries. If you are still having issues after reading this blog, please get in touch with firstname.lastname@example.org for technical support.
Efficiently Using Credits
We get a lot of clients asking why their credit usage is so much higher than the amount of traffic that they are seeing through their website. For example, we often see clients making up to 11 requests per telephone number that is entered on their form. That is one request and therefore one credit for each digit entered! This can be easily reduced to just one call, and still provide validation when the telephone number is entered. A common mistake is to use the “input” event of an input field to trigger a validation call to one of our API’s. As described above, this triggers a request on every single keypress, effectively wasting a whole bunch of credits with each user. A much better approach is to use the “change” event, which is triggered once a user clicks off a field and the value is different to when they started editing it. This will only make one request and still provide the same level of validation, saving you credits and money.
Using API endpoints allow us to integrate with a wide range of platforms and websites. Data8’s API’s are designed to be user friendly, and easy to use. However, seeing an API and its documentation for the first time can be intimidating and seem like a challenging or impossible task. However, with just a basic coding knowledge, and the help of the code example below, you should be able to get a basic understanding of how API’s can be used, implement an API request in your project and get up and running with our services. Some important things to note, the below code is just sample code and should be tested thoroughly before being used in a production environment. The API key used in the URL of the request will need to be changed to your own Data8 API key generated from the Dashboard of our website.
Take a basic HTML page, such as the below code, which could represent the form on your website containing an email and phone field.
<head> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <form id="myForm"> <input type="tel" name="telephone" class="required" /> <input type="email" name="email" class="required" /> <input type="submit" id="submitButton"/> </form> </body>
To integrate Data8 email and international telephone validation using the jQuery code library (https://www.data-8.co.uk/resources/code-samples/jquery-telephone-email-validation/), we would simply add the required scripts, and add the classes “d8val_email” and “d8val_inttelphone” to the appropriate input fields. For example, the above code would become:
Furthermore, to extend the telephone validation service to make use of the mobile and landline validation options, we would just alter the class on the telephone field to “d8val_inttelephone_mobile_line” like so:
<input type="tel" name="telephone" class="required d8val_inttelephone_mobile_line" />
We can use the standard jQuery validation functionality to extend the service to use advanced configuration options, as seen below. Notice the change in class name on the telephone field, adding “_opt” to specify that we want to use custom options. We can then set these options in the validate function.
PredictiveAddress Custom Response Handling
Another popular question that we get from clients using our address capture service, PredictiveAddress, is ‘How can we use the returned address like this...’. Our PredictiveAddress service comes with a bunch of configuration options that allow users to customise the address lookup service to suit their needs. Whether that is to limit available countries, change the formatting of the returned address or to use the returned address in whatever way they wish.
Documentation for the PredictiveAddress service can be found here: https://www.data-8.co.uk/resources/code-samples/predictiveaddress/#AdvancedOptions
Below is some sample code that contains the “allowedCountries” option which restricts the PredictiveAddress lookup service to specific countries. The “fields” option is used to map the appropriate fields to the returned address fields. For example, to put the returned city in the city field on your form.
The code also makes use of the “selectAddress” option, which is a callback function for when an address is selected. This option can be used to manipulate the returned address however you wish and can be used in conjunction with the “fields” option to automatically populate the appropriate fields on the form and then do a custom action afterwards.
Thanks for reading the blog. If you need any more technical help or assistance, please don’t hesitate to contact our helpdesk team by email at email@example.com.