How can I test the LiveAddress API jQuery Plugin on any website?

Question

I'd like to try your LiveAddress API jQuery Plugin on my website without installing it. Or, it'd be useful to try it on other sites similar to mine. How can I do this?

Answer

This is fairly easy using your browser's web inspector tools. Here's a quick video showing how do to it and showing it in use on a website (target.com in this case).

The instructions below are specialized for Google Chrome (and Safari), which we've found works best for this task:

1. Go to the page where you want to test the plugin. The page should have an address form visible somewhere on it. Press F12 on Windows, or Cmd+Shift+I on a Mac, to open the inspector tools. Click the "Console" tab.
2. Make sure the page has jQuery 1.5.1 or higher loaded. Type jQuery.fn.jquery and hit Enter. If you see something like this: then jQuery is not loaded, and needs to be injected into the page. If you see something like this: then jQuery is loaded, and that is the version number. The version must be at least 1.5.1.
   
   
   • If jQuery is not loaded or is older than version 1.5.1, put this in the console:

     var jquery = document.createElement("script"); jquery.src =
     				"//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
     				jquery.type="text/javascript";document.getElementsByTagName("head")[0].appendChild(jquery);

   
   
3. Next we have to pull in our jQuery plugin. There are three potential versions you can choose from. For convenience, they are all listed here. Paste only one of these into your console and hit Enter:
   • PRODUCTION (used on live sites)

     var ssapi = document.createElement("script"); ssapi.src =
     				"//d79i1fxsrar4t.cloudfront.net/jquery.liveaddress/5.2/jquery.liveaddress.js";
     				ssapi.type="text/javascript"; document.getElementsByTagName("head")[0].appendChild(ssapi);

   • GITHUB (bleeding-edge; has latest features but not always completely stable)

     var ssapi = document.createElement("script"); ssapi.src =
     				"//raw.github.com/smartystreets/jquery.liveaddress/master/src/jquery.liveaddress.js";
     				ssapi.type="text/javascript"; document.getElementsByTagName("head")[0].appendChild(ssapi);

   • LOCALHOST (use only if you have the script hosted locally)

     var ssapi = document.createElement("script"); ssapi.src =
     				"http://localhost/jquery.liveaddress.js"; ssapi.type="text/javascript";
     				document.getElementsByTagName("head")[0].appendChild(ssapi);

   
   Each of these pulls in the un-minified copy of the script. For the minified version, change the file extension from .js to .min.js. Also, the production copy references a certain version number. Make sure you update that if you want to use a newer or older version.
   
   
4. Initialize the plugin any way you'd like. Usually it's helpful to have "debug" mode enabled, so you can see what's going on a little better. A basic initialization looks like this: var ss = jQuery.LiveAddress({ key: '', debug: true }); Make sure your Embedded Key goes between the ' characters. You can add an embedded key for any domain or hostname in your SmartyStreets account. Remember, the host (domain) name or IP address must match exactly what is in the URL of the page you're doing this on.
   
   You should see the fields light up (if debug mode is on), indicating it has mapped them successfully:
5. Try typing an address! Since you've stored the LiveAddress object in a variable called ss, you can use the plugin by typing Javascript into the console as if you were writing Javascript on the HTML page itself. ( Hint: Press the Up and Down arrows to cycle through your console history, so you don't have to keep typing the same thing over and over.)

While we are unable to help with specific implementations of the plugin, please report bugs and submit feature requests by contacting us, or submit a pull request on GitHub.