{"__v":76,"_id":"555e656e57fe0a0d00c8f240","category":{"__v":5,"_id":"56ba3656ce5d540d00e2d789","pages":["56ba379a8fce0e1900d992c3","56ba37bbc275570d00ce7066","56ba37ccb77e261700bc148d","56ba3a63984f030d00713a49","56ba46b18cf7c921000966d0"],"project":"555e500957fe0a0d00c8f1e7","version":"555e500957fe0a0d00c8f1ea","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-02-09T18:56:22.257Z","from_sync":false,"order":2,"slug":"installation-instructions","title":"Installation Instructions"},"project":"555e500957fe0a0d00c8f1e7","user":"550c941bd1063b2d00359239","version":{"__v":12,"_id":"555e500957fe0a0d00c8f1ea","project":"555e500957fe0a0d00c8f1e7","createdAt":"2015-05-21T21:37:13.474Z","releaseDate":"2015-05-21T21:37:13.474Z","categories":["555e500957fe0a0d00c8f1eb","555e5fcedf54680d001800db","555e60d7df54680d001800fb","555e6766df54680d00180118","556f4d5debba950d008e9462","556f60959893290d00988c5b","556f6216ebba950d008e94e6","556f6b2aebba950d008e951a","556f71b6fc3aa80d00e1ac55","5570a30bcc189a21001ab44c","56ba3656ce5d540d00e2d789","56bce73a3ad5140d00055345"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":["55712d0ea408bf0d00a4a37d","557211dd1cd8283500a8b5be"],"next":{"pages":[],"description":""},"createdAt":"2015-05-21T23:08:30.661Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"[block:callout]\n{\n  \"type\": \"danger\",\n  \"title\": \"The ability to add JavaScript is required to install your pre-order form\",\n  \"body\": \"Some hosted blogging platforms, including Wordpress.com and Tumblr, do not allow for the addition of custom JavaScript.\\n\\nIf your platform does not allow for the addition of custom JavaScript, you might consider building your page with a platform that does, like an installation of wordpress.org.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Basic installation\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"The average installation time for this method is 10 minutes\"\n}\n[/block]\nUse the following universal instructions to install your pre-order form on your existing website, landing page, or static site.\n\n**You can find a version of these instructions customized to your specific campaign in your admin panel on the \"Embed Instructions\" page.**\n\n# Step 1:\n\nAdd the following data attribute to the button(s) or link(s) that you'd like to have trigger the payments form. You can find your unique data-ct-checkout value on the Embed Instructions page in your admin panel:\n\n\n\n``` data-ct-checkout=site.your-unique-campaign-slug ```\n\nExample:\n\n```<button data-ct-checkout=\"site.your-unique-campaign-slug\">Preorder Now!</button>```\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Changing your title\",\n  \"body\": \"If you change the title of your pre-order form in the edit page of your admin panel, your data attribute will change and you'll need to update the corresponding reference in your integration.\"\n}\n[/block]\n\n\n# Step 2:\n\nPaste this code immediately before the closing </body> tag:\n\n```<script type=\"text/javascript\" src=\"https://pro.tilt.com/checkout-1-3-0.js\"></script>```\n\nIt should look something like this:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/mTBTtP2KQZaKeyOvTotm_Screen%20Shot%202015-02-03%20at%2011.05.06%20AM.png\",\n        \"Screen Shot 2015-02-03 at 11.05.06 AM.png\",\n        \"1726\",\n        \"486\",\n        \"#af1f1f\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n\nThat's it! You're all set to go!\n\nRunning into any issues? [Shoot us a note](mailto:questions:::at:::tilt.com) and we'll be able to help you finish the installation.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Advanced options\"\n}\n[/block]\n**You can also initialize your pre-order form with the following optional URL parameters** \n\n# Force the form to open on page load\n\nAppend ```?modal=true``` to the end of your URL.\n\nExample: [https://www.lily.camera?modal=true](https://www.lily.camera?modal=true)\n\n# Pre-fill a promo code\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Make sure to create your promo codes before pre-filling them in the URL\",\n  \"body\": \"You can create promo codes from the campaign edit page in your admin panel\"\n}\n[/block]\nAppend ```?ct-promo-code=PROMO_CODE``` to the end of your URL.\n\ne.g.: ```https://www.lily.camera?ct-promo-code=PROMOCODE```\n\n# Combining multiple parameters\n\nYou can combine the above parameters to both open the form on page load and pre-fill a promo code as shown below:\n\ne.g.:  ```https://www.lily.camera?modal=true&ct-promo-code=PROMOCODE```\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Adding multiple Pre-Order campaigns on a single page\",\n  \"body\": \"If you choose to embed multiple pre-order campaigns on a single page, be sure that you only include the ```checkout.js``` script once.\\n\\nIncluding the ```checkout.js``` script multiple times will cause unexpected behavior.\"\n}\n[/block]","excerpt":"","slug":"installation","type":"basic","title":"Universal Pre-Order Installation"}

Universal Pre-Order Installation


[block:callout] { "type": "danger", "title": "The ability to add JavaScript is required to install your pre-order form", "body": "Some hosted blogging platforms, including Wordpress.com and Tumblr, do not allow for the addition of custom JavaScript.\n\nIf your platform does not allow for the addition of custom JavaScript, you might consider building your page with a platform that does, like an installation of wordpress.org." } [/block] [block:api-header] { "type": "basic", "title": "Basic installation" } [/block] [block:callout] { "type": "success", "title": "The average installation time for this method is 10 minutes" } [/block] Use the following universal instructions to install your pre-order form on your existing website, landing page, or static site. **You can find a version of these instructions customized to your specific campaign in your admin panel on the "Embed Instructions" page.** # Step 1: Add the following data attribute to the button(s) or link(s) that you'd like to have trigger the payments form. You can find your unique data-ct-checkout value on the Embed Instructions page in your admin panel: ``` data-ct-checkout=site.your-unique-campaign-slug ``` Example: ```<button data-ct-checkout="site.your-unique-campaign-slug">Preorder Now!</button>``` [block:callout] { "type": "warning", "title": "Changing your title", "body": "If you change the title of your pre-order form in the edit page of your admin panel, your data attribute will change and you'll need to update the corresponding reference in your integration." } [/block] # Step 2: Paste this code immediately before the closing </body> tag: ```<script type="text/javascript" src="https://pro.tilt.com/checkout-1-3-0.js"></script>``` It should look something like this: [block:image] { "images": [ { "image": [ "https://files.readme.io/mTBTtP2KQZaKeyOvTotm_Screen%20Shot%202015-02-03%20at%2011.05.06%20AM.png", "Screen Shot 2015-02-03 at 11.05.06 AM.png", "1726", "486", "#af1f1f", "" ] } ] } [/block] That's it! You're all set to go! Running into any issues? [Shoot us a note](mailto:questions@tilt.com) and we'll be able to help you finish the installation. [block:api-header] { "type": "basic", "title": "Advanced options" } [/block] **You can also initialize your pre-order form with the following optional URL parameters** # Force the form to open on page load Append ```?modal=true``` to the end of your URL. Example: [https://www.lily.camera?modal=true](https://www.lily.camera?modal=true) # Pre-fill a promo code [block:callout] { "type": "info", "title": "Make sure to create your promo codes before pre-filling them in the URL", "body": "You can create promo codes from the campaign edit page in your admin panel" } [/block] Append ```?ct-promo-code=PROMO_CODE``` to the end of your URL. e.g.: ```https://www.lily.camera?ct-promo-code=PROMOCODE``` # Combining multiple parameters You can combine the above parameters to both open the form on page load and pre-fill a promo code as shown below: e.g.: ```https://www.lily.camera?modal=true&ct-promo-code=PROMOCODE``` [block:callout] { "type": "info", "title": "Adding multiple Pre-Order campaigns on a single page", "body": "If you choose to embed multiple pre-order campaigns on a single page, be sure that you only include the ```checkout.js``` script once.\n\nIncluding the ```checkout.js``` script multiple times will cause unexpected behavior." } [/block]