# Wix Integration

Integrate Address Validation with the Wix Editor.

## Features[​](#features "Direct link to Features")

* Bind address autocompletion to your address fields

## Screenshots[​](#screenshots "Direct link to Screenshots")

### Address Finder[​](#address-finder "Direct link to Address Finder")

![Ideal Postcodes Wix Integration Demo](/assets/images/wix-demo-866d14aea974e8aff43729bfc6063869.gif)

## Installation[​](#installation "Direct link to Installation")

Below are the instructions to add Address Finder.

### Create Address Inputs[​](#create-address-inputs "Direct link to Create Address Inputs")

On your Wix Dashboard head over to `Forms & Submissions`. Create a new Standalone Form.

A basic address form to capture a correct UK address requires the following fields:

* Address line one
* Address line two
* Address line three
* Post town
* Postcode

![Create address fields-screenshot](/assets/images/wix-form-c44f78238e6f437ad282bc56a6031a31.png)

You can optionally include additional fields, which are documented in our [PAF documentation](/docs/api/addresses.md).

***

### Add Address Finder[​](#add-address-finder "Direct link to Add Address Finder")

#### Install Plugin[​](#install-plugin "Direct link to Install Plugin")

To add the Address Finder API on your form:

* Go to your Dashboard and click `Settings`
* Under `Advanced`, click `Custom Code`
* Click `Add Code` in the `Body - End` section.
* Make sure the Code Type is set to Essential.
* Copy and paste the code below

```
<script src="https://cdn.jsdelivr.net/npm/@ideal-postcodes/address-finder-bundled"></script>



<script>

	document.addEventListener("DOMContentLoaded", function () {

		IdealPostcodes.AddressFinder.watch({

			apiKey: "API_KEY_HERE",

			outputFields: {

				line_1: 'input[name="address-line one"]',

				line_2: 'input[name="address-line two"]',

				line_3: 'input[name="address-line three"]',

				post_town: 'input[name="city"]',

				postcode: 'input[name="postcode"]',

			},

		});

	});

</script>
```

![Insert a Code box-screenshot](/assets/images/wix-initialisation-bb1a7ff8a241c834444d26faa9301aaf.png)

caution

Take special care to:

1. Insert your API Key in the `apiKey` field
2. Update the input field names of your target fields. If your Address Line One `name` is `address-line_1`, this line should be replaced with `'input[name="address-line_1']'`. Do this for all the address fields you wish to include

If you wish to add an additional field, include the parameter name [from our documentation](/docs/api/addresses.md). For instance, adding a county field with Field ID `county` will look like:

```
outputFields: {

  line_1: 'input[name="address-line_1"]',

  line_2: 'input[name="address-line_2"]',

  line_3: 'input[name="address-line_3"]',

  post_town: 'input[name="post_town"]',

  county: 'input[name="county"]',

  postcode: 'input[name="postcode"]'

}
```

***

### Add Postcode Lookup[​](#add-postcode-lookup "Direct link to Add Postcode Lookup")

#### Install Plugin[​](#install-plugin-1 "Direct link to Install Plugin")

To add the Address Finder API on your form:

* Go to your Dashboard and click `Settings`
* Under `Advanced`, click `Custom Code`
* Click `Add Code` in the `Body - End` section.
* Make sure the Code Type is set to Essential.
* Copy and paste the code below

```
<script src="https://cdn.jsdelivr.net/npm/@ideal-postcodes/postcode-lookup-bundled"></script>



<script>

	IdealPostcodes.PostcodeLookup.watch(

		{

			apiKey: "API_KEY_HERE",

			context: "div.idpc_lookup",

			outputFields: {

				line_1: 'input[name="address-line 1"]',

				line_2: 'input[name="address-line 2"]',

				line_3: 'input[name="address-line 3"]',

				post_town: 'input[name="city"]',

				postcode: 'input[name="postcode"]',

			},

		},

		{

			getScope: () => document.getElementById("PAGES_CONTAINER"),

			//The anchor below is used to locate the parent container

			//to place the postcode lookup input and button

			anchor: 'input[name="address-line 2"]',

			onAnchorFound: (options) => {

				const { scope } = options;

				const target = scope.querySelector(options.config.outputFields.line_1);

				if (target === null) return;

				if (target.parentElement?.querySelector('.idpc_lookup[idpc="true"]'))

					return;

				const postcodeField = document.createElement("div");

				postcodeField.className = "idpc_lookup field";

				options.config.context = postcodeField;

				console.log(target.parentNode.parentNode.parentNode);

				target.parentNode.parentNode.parentNode.insertBefore(

					postcodeField,

					target.parentNode.parentNode

				);

				return postcodeField;

			},

		}

	);

</script>
```

![Insert a Code box-screenshot](/assets/images/wix-initialisation-bb1a7ff8a241c834444d26faa9301aaf.png)

caution

Take special care to:

1. Insert your API Key in the `apiKey` field
2. Update the input field names of your target fields. If your Address Line One `name` is `address-line_1`, this line should be replaced with `'input[name="address-line_1']'`. Do this for all the address fields you wish to include

## Configuration[​](#configuration "Direct link to Configuration")

See our [Address Finder Plugin Documentation](/docs/address-finder.md) if you wish to customise Address Finder.<br /><!-- -->See our [Postcode Lookup Plugin Documentation](/docs/postcode-lookup.md) if you wish to customise Postcode Lookup.

info

Still need help? Contact our support team via live chat on our website or email <support@ideal-postcodes.co.uk>.