Implementing the JavaScript Web Client

This tutorial takes you step by step though setting up the JavaScript Web Clients on a simple HTML page. It only takes a few minutes and you can customise them later!

Preparation

Before starting this tutorial, we need to create a simple HTML page to which we will add the web clients. In this example we've put the postcode field at the top of the page so that the customer doesn't begin entering their address before they see the auto complete facility:

<form method=post>

	<table>
		<tr>
			<td>Postcode</td>
			<td><input type=text name=postcode size=10></td>
		</tr>
		<tr>
			<td>Company name</td>
			<td><input type=text name=company size=40></td>
		</tr>
		<tr>
			<td>Line 1</td>
			<td><input type=text name=line1 size=40></td>
		</tr>
		<tr>
			<td>Line 2</td>
			<td><input type=text name=line2 size=40></td>
		</tr>
		<tr>
			<td>Line 3</td>
			<td><input type=text name=line3 size=40></td>
		</tr>
		<tr>
			<td>Town</td>
			<td><input type=text name=town size=40></td>
		</tr>
		<tr>
			<td>County</td>
			<td><input type=text name=county size=40></td>
		</tr>
	</table>

</form>

Step 1: Run the setup wizard

The first step is to run the account setup wizard in "My Account". This should be fairly self explanatory but the choices/steps are:

• "I want my customers to be able to fill their addresses in quickly on my web site"
• "Website Client (recommended)"
• Enter the name for your website client
• Finally copy the JavaScript shown at the end of the process (as in the screenshot below) to the clipboard

Step 2: Add the code to your page

Now you need to copy the JavaScript onto your page. You should place it immediately to the right of the postcode text box. This is where the button will be placed when you're up and running.

<tr>
	<td>Postcode</td>
	<td>
		<input type=text name=postcode size=10>
		<SCRIPT LANGUAGE=JAVASCRIPT SRC="http://services.post...">
		</SCRIPT>
	</td>
</tr>

Now you just need to upload your page and open it in a browser.

Step 3: Finish setting up the page

When you view your page in a browser, you will see a setup button. You need to click on the button which opens the setup web client window.

Follow the steps to describe how your address lines are set up on the page. In this case, we have 3 individual lines for the address and the company name separated.

Next you need to select the field which contains the postcode that we want to check.

You're not limited to returning an address either - you can also get other information returned to your page like grid references or Acorn® type. (Note: a separate license agreement is required fo you to access Acorn® data.)

Finally you need to associate your fields with ours. Just pick your field and which of ours it matches to in the list before finishing the wizard.

You're done! Just refresh your page and you'll see that the button changes and is ready to use. It's that easy!