5 tips to get the most out of AddressComplete

Posted on June 09, 2014 by @direct_cpc in Marketing solutions

Whether you’ve been using our instant address validation tool, AddressComplete, for months or you’re just getting started with it, we’ve got some tips that will make sure it looks and performs its best.

The 5 suggestions below allow you to customize specific AddressComplete features. For each one, we provide the sample code that you can copy and paste into your website.

You’ll need some programming or web development skills as well as access to the HTML source code for the website or application where you’ve installed AddressComplete to make these changes.

  1. Match AddressComplete to the width of your address field
  2. To ensure AddressComplete displays correctly within your address form, set the width of AddressComplete to match the width of your address field. Paste the code (see example below) above your address form. It will ensure AddressComplete doesn’t appear shorter or longer than your address field.

    In the example below, the width is set to 300. You’ll need to check the width of your address field and set the width accordingly.

    <script type="text/javascript">
    addressComplete.listen('ready', function() {
    addressComplete.setWidth(300);
    addressComplete.setHeight(300);
    });
    </script>

    AddressComplete will now match the width of your address field.

  3. Change the font and colour of the results list
  4. You can change the font and colour of the text that appears in the AddressComplete results list to match the look and feel of your website.

    Paste the following into the header of your source code:

    <script type="text/javascript">
    .pca .pcatext {
    font: 15px Verdana;
    color: #4682b4;
    }
    </script>

    In the example above we’ve used the font 15-pixel Verdana in steel blue, but you can pick any font or colour you like.

  5. Identify the boundaries of your service area
  6. If there are areas or provinces where your business doesn’t operate, consider setting location boundaries in AddressComplete. If users try to enter an address outside of your service area, they will be notified instantly. This feature ensures visitors to your site won’t fill out forms unnecessarily.

    In the example below, if an address in Ontario or Quebec is entered, the message “Sorry, we do not deliver to your province” will be displayed. Copy the code below and paste it within your AddressComplete code.

    addressComplete.listen('load', function(control) {
    control.listen("populate", function (address) {
    if ( address.ProvinceCode == "ON" || address.ProvinceCode == "QC") { //EXAMPLE – do not deliver to ON or QC alert("Sorry, we do not deliver to your province.");
    }
    });
    });

    Tip: You can adapt the code to trigger a message on other address elements, such as cities or postal codes.

  7. Hide the logo or country selector
  8. The AddressComplete logo and country selector appear in the footer by default, but you can choose not to display these items. For example, if you only operate in one country, you may want to hide the country selector.

    Just copy the code below and paste it within your AddressComplete code.

    <script type="text/javascript">
    addressComplete.listen('options', function(options) {
    options.bar = options.bar || {};
    options.bar.showCountry = false;
    options.bar.showLogo = false;
    });
    </script>

    By following the example above, both the country selector and the logo will not appear. If you want your logo and country selector to appear again, just set the values to “true” again.

  9. Enable manual address entry
  10. If AddressComplete appears within your address line 1, this feature makes it easier for your customers to enter an address manually. Currently if a customer starts typing an address and no results are found, the following message displays: “Keep typing your address to display more results.”

    Instead, you can instantly disable AddressComplete and display a message such as: “I don’t see my address. Let me type it in.” This option provides a quick way for customers to complete the address form if their address is not in our database.

    Copy and paste this code within your AddressComplete code:

    //modify options – persistent bail option

    var controlToHide = null;

    function AddressCompleteLoaded(ctrl)
    {
    controlToHide = ctrl;
    ctrl.messages.en.KEEPTYPING = "<a href='Javascript: HideAC();'>I don't see my address. Let me type it in.</a>";
    ctrl.messages.fr.KEEPTYPING = "<a href='Javascript: HideAC();'>Je ne vois pas mon adresse. Je vais l'entrer manuellement.</a>";
    }

    function HideAC()
    {
    controlToHide.manualEntry ();
    }

    You can customize the message you want your customers to see. Just replace the text in our sample code with your own message.

Make the most of AddressComplete by using the suggestions above to suit the needs of your business and improve how AddressComplete works for your customers.

Archive

Inspired? Put your ideas into action!

Learn how Canada Post can help you deliver real results by adding direct mail solutions to your marketing mix.

Contact Us Today

Or call:

1 (866) 511-3136

Mon – Fri (9 a.m. – 5 p.m. EST)

Follow us on Twitter @canadapostcorp