{"_id":"53de5ae684ab2b1c5eb2dd71","isReference":false,"order":0,"title":"Getting Started","updates":["53e803eeaa9ffc1019a28209","53e80432aa9ffc1019a2820a","543240e04483ed08009c1551"],"version":"53de5ae684ab2b1c5eb2dd6e","__v":3,"createdAt":"2014-08-03T15:53:10.943Z","is_link":false,"project":"53de5ae684ab2b1c5eb2dd6b","comments":[],"excerpt":"Setting up Address Picker is a breeze – two lines of code, and you're ready to go!","tags":[],"category":"53de61e584ab2b1c5eb2dd75","api":{"params":[],"auth":"never"},"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)","link_url":"","slug":"getting-started","type":"basic","user":"53de5a0384ab2b1c5eb2dd6a","childrenPages":[]}

Getting Started

Setting up Address Picker is a breeze – two lines of code, and you're ready to go!

First, you need to include the Address Picker JavaScript file: [block:code] { "codes": [ { "code": "<script src=\"//api.addresspicker.io/widget.js?key={{ API_KEY }}\" type=\"text/javascript\"></script>", "language": "html" } ] } [/block] Now, you're ready to go! Just give your `<input>` a type of `addresspicker`, and it will be replaced with an instance of Address Picker: [block:code] { "codes": [ { "code": "<input type=\"addresspicker\" name=\"shipping\">", "language": "html" } ] } [/block] This will add two hidden inputs to your form: [block:parameters] { "data": { "h-0": "Name", "h-1": "Description", "0-0": "`[name]`", "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.", "1-0": "`[name]_id`", "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." }, "cols": 2, "rows": 2 } [/block] [block:api-header] { "type": "basic", "title": "Demo" } [/block] Here's a demo pages where Address Picker has been implemented: * [Staples Example](http://blowenstein93.github.io/shoppingcart)