BigCommerce Integration Guide

Integration with BigCommerce address forms made simple

A step-by-step guide to integration with BigCommerce address forms.

Important

It is no longer recommended to use the Google Analytics method of integrating with BigCommerce. Please follow this documentation to update your integration.

Preparation

Download

Download our BigCommerce plugin for the UK Postcode Lookup from the plugins page or in case of the Address Auto-Complete head over to the Installation section.

Visit the download page  

Sign Up

Next, you need to sign up for a Crafty Clicks account.

When you sign up, you will receive an access token by email. There is no obligation to buy anything and you automatically get 100 trial lookups. If you need more lookups to test the integration, please get in touch (support@craftyclicks.co.uk) and we will try to accommodate you.

Installation

Select the plugin you would like to install.

Install Address Auto-Complete

Step 1

We use the "Site Verification Tags" setting in BigCommerce to add our javascript code to your store.

Login to your BigCommerce store, then go to Advanced Settings > Web Analytics > Site Verification Tags.

Copy the following code block into the input box. If there was already some code in the box then paste our code below it.

<script type="text/javascript">
// CONFIGURATION
var c2a_config = {
 access_token: "xxxxx-xxxxx-xxxxx-xxxxx",
 mode: "1",
 ambient: "light",
 accent: "default",
 hide_fields: true,
 show_logo: true,
 use_addressline_1: false,
 texts: {
 default_placeholder: "Start with post/zip code or street",
 generic_error: "An error occurred. Please enter your address manually",
 no_results: "No results found",
 search_label: "Address Search",
 reveal_button: "Enter Address Manually",
 hide_button: "Search For Address"
 }
};
// END OF CONFIGURATION
var _craftyclicks_headID = document.getElementsByTagName("head")[0];
var _craftyclicks_mobileScript;
_craftyclicks_mobileScript = document.createElement('script');
_craftyclicks_mobileScript.type = 'text/javascript';
_craftyclicks_mobileScript.src = 'https://cc-cdn.com/bigcommerce/scripts/v1/cc_c2a_bigcommerce.js';
_craftyclicks_headID.appendChild(_craftyclicks_mobileScript); //load bigcommerce specific js

</script>

Step 2

Replace xxxxx-xxxxx-xxxxx-xxxxx with your access token. You can also change any of the other configuration options to customise the look and feel of the module. Click save when you're ready.

Install Postcode Lookup

Step 1

  • Upload these files to your server:
    • craftyclicks_bigcommerce.js
    • crafty_postcode_busy.gif

In BigCommerce they should be placed in the /content/ directory if you follow the BigCommerce WebDav upload instructions.

Get help with WebDav here.

Step 2

We use the "Site Verification Tags" setting in BigCommerce to add our javascript code to your store.

Login to your BigCommerce store, then go to Advanced Settings > Web Analytics > Site Verification Tags.

Copy the following code block into the input box. If there was already some code in the box then paste our code below it.

Note: You will need to replace INSERT_YOUR_SHOP_PATH with your shop path.

<script type="text/javascript">// <![CDATA[
	// CONFIGURATION
	var _cp_config = {
		access_token:			"xxxxx-xxxxx-xxxxx-xxxxx",
		enable_for_uk_only:		true, // if true, lookup functionality is only shown if country selected is UK
		button_text:			'Find Address',
		button_class:			'btn',
		result_box_width:		'',
		busy_img_url:			'content/crafty_postcode_busy.gif',
		clear_result:			true, // hide result box once a selection is made
		hide_fields:			true, // hides address lines for UK until postcode lookup is completed
		hide_county:			true, // hides state/county field for UK
		update_county_select:	true,
		first_res_line:			'--- please select your address ---',
		err_msg1:				'This postcode could not be found, please try again or enter your address manually',
		err_msg2:				'This postcode is not valid, please try again or enter your address manually',
		err_msg3:				'Unable to connect to address lookup server, please enter your address manually',
		err_msg4:				'An unexpected error occurred, please enter your address manually',
		error_class:			'error',
		put_company_on_line1:	true,
		move_postcode_field: 	true, // Move postcode before address line 1 if the selected country is UK
		manual_entry_enable:	true,
		manual_entry_text:		'Enter Address Manually',
		postcode_search_text:	'Postcode Search' // only in Optimised One-Page Checkout
	};
	// END OF CONFIGURATION
	var _craftyclicks_headID = document.getElementsByTagName("head")[0];
	var _craftyclicks_mobileScript;
	_craftyclicks_mobileScript = document.createElement('script');
	_craftyclicks_mobileScript.type = 'text/javascript';
	_craftyclicks_mobileScript.src = 'https://*INSERT_YOUR_SHOP_PATH*/content/craftyclicks_bigcommerce.js';
	_craftyclicks_headID.appendChild(_craftyclicks_mobileScript); //load bigcommerce specific js
// ]]></script>

Step 3

Replace xxxxx-xxxxx-xxxxx-xxxxx with your access token. You can also change any of the other configuration options to customise the look and feel of the module. Click save when you're ready.

Troubleshooting

Why does my integration work on mobile but not desktop?

BigCommerce have recently introduced a privacy feature where the code used in the Google Analytics section will not be run unless the user accepts cookies. To solve this problem, follow the steps on this page to integrate using"Site Verification Tags" instead of the Google Analytics section.

Why does my integration not work on the customer sign up and address book pages?

If you have used the BigCommerce Script Manager to integrate our module, it will not load on these pages. To solve this problem, follow the steps on this page to integrate using"Site Verification Tags" instead of the Google Analytics section.

FAQ

Test

Before you go live, test the integration to make sure it is working properly.

For the Postcode Lookup integration only, we have the following free postcodes for testing: AA1 1AA, AA1 1AB, AA1 1AD and AA1 1AE.

If you need assistance, drop us an email on support@craftyclicks.co.uk – we will help!

Go Live

Once your trial lookups run out, you will need to decide on the best purchasing option based on the volume of usage you expect on your site. If you would like us to advise you then please get in touch.

Questions

  • Do you offer support? Yes, we do offer support during normal business hours in the UK. If you run into any issues, let us know and we will be happy to help.
  • Is this free? The extension is free to download and try, but to use it on a live site you will need a paid account with us.
  • Do I need to sign up for an account to try it? Yes, you’ll need a trial account, at least. You can easily sign up for a free trial account.
Last Updated: 5/18/2020, 11:23:44 AM