{"_id":"53de5ae684ab2b1c5eb2dd71","version":{"_id":"53de5ae684ab2b1c5eb2dd6e","__v":3,"project":"53de5ae684ab2b1c5eb2dd6b","createdAt":"2014-08-03T15:53:10.797Z","releaseDate":"2014-08-03T15:53:10.797Z","categories":["53de5ae684ab2b1c5eb2dd6f","53de5fed84ab2b1c5eb2dd72","53de61e584ab2b1c5eb2dd75"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"__v":3,"is_link":false,"project":"53de5ae684ab2b1c5eb2dd6b","comments":[],"tags":[],"category":{"_id":"53de61e584ab2b1c5eb2dd75","project":"53de5ae684ab2b1c5eb2dd6b","__v":1,"pages":["53de5ae684ab2b1c5eb2dd71","53de600484ab2b1c5eb2dd74","53e0416d02eee4c76da917ac"],"version":"53de5ae684ab2b1c5eb2dd6e","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2014-08-03T16:23:01.672Z","from_sync":false,"order":0,"slug":"getting-started","title":"Getting Started"},"user":"53de5a0384ab2b1c5eb2dd6a","metadata":{"title":"","description":"","image":[]},"updates":["53e803eeaa9ffc1019a28209","53e80432aa9ffc1019a2820a","543240e04483ed08009c1551"],"next":{"pages":[],"description":""},"createdAt":"2014-08-03T15:53:10.943Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"auth":"never","params":[],"url":""},"isReference":false,"order":0,"body":"First, you need to include the Address Picker JavaScript file:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"//api.addresspicker.io/widget.js?key={{ API_KEY }}\\\" type=\\\"text/javascript\\\"></script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nNow, you're ready to go! Just give your `<input>` a type of `addresspicker`, and it will be replaced with an instance of Address Picker:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<input type=\\\"addresspicker\\\" name=\\\"shipping\\\">\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nThis will add two hidden inputs to your form:\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Name\",\n    \"h-1\": \"Description\",\n    \"0-0\": \"`[name]`\",\n    \"0-1\": \"This value will have the same name as your customers original input. It will contain a formatted, multi-line, cleaned string of the user's address.\",\n    \"1-0\": \"`[name]_id`\",\n    \"1-1\": \"You should save this; you'll need it if you ever want to access the raw address data or let users edit their address.\"\n  },\n  \"cols\": 2,\n  \"rows\": 2\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Demo\"\n}\n[/block]\nHere's a demo pages where Address Picker has been implemented:\n\n  * [Staples Example](http://blowenstein93.github.io/shoppingcart)","excerpt":"Setting up Address Picker is a breeze – two lines of code, and you're ready to go!","slug":"getting-started","type":"basic","title":"Getting Started"}