{"__v":28,"_id":"56ba3a63984f030d00713a49","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"},"parentDoc":null,"project":"555e500957fe0a0d00c8f1e7","user":"550c941bd1063b2d00359239","version":{"__v":13,"_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","592874f7bdc27e1b00e571b1"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-02-09T19:13:39.079Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":true,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"[block:callout]\n{\n  \"type\": \"danger\",\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  \"title\": \"The ability to add JavaScript is required to install your pre-order form\"\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 15 minutes\"\n}\n[/block]\nUse the following universal instructions to install your Embeddable Crowdfunding campaign 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\nPaste this code immediately *before the closing </body> tag* on all pages where you'd like your embeddable crowdfunding campaign to appear:\n\n```\n<script type=\"text/javascript\" src=\"https://pro.tilt.com/checkout-1-2-2.js\"></script>\n<script type=\"text/javascript\" src=\"https://pro.tilt.com/crowdfunding-0-0-1.js\"></script>\n```\n\nIt should look something like this:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/jQvI90l9Rwq6Qqb23wL9_Screen%20Shot%202016-02-09%20at%2011.43.48%20AM.png\",\n        \"Screen Shot 2016-02-09 at 11.43.48 AM.png\",\n        \"2058\",\n        \"290\",\n        \"\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n## Step 2\n\nOn your Embed Instructions page, you'll find a chunk of code unique to your campaign. Find the snippet that looks similar to the example below and paste it on your page where you'd like the Crowdfunding elements to appear on your page.\n\n```\n<div class=\"ctd-container\" style=\"visibility:hidden\"> <div class=\"ctd-loading\"> <div class=\"ctd-bounce1\"></div> <div class=\"ctd-bounce2\"></div> <div class=\"ctd-bounce3\"></div> </div> <span class=\"cdt-bar\" data-ctd-campaign=\"CMP790F3BD733F84C2A8084109CBD8C9335\"></span> <ul class=\"cdt-details\"> <li> <span class=\"cdt-number_of_contributors\"></span> <span class=\"cdt-small\">backers</span> </li> <li> <span class=\"cdt-raised_amount\" data-format_money=\"$ :, :0:.\"></span> <span class=\"cdt-small\">of <span class=\"cdt-goal_dollars\" data-format_money=\"$ :, :0:.\"></span></span> </li> <li> <span class=\"cdt-expiration_date\" data-format_date=\"days_left\"></span> <span class=\"cdt-small\">days left</span> </li> </ul> <button class=\"cdt-btn\" data-ct-checkout=\"openmatt.shopify-embeddable\">Contribute now!</button> </div>\n```\n## You're all set!\n\nOnce these code additions are live on your page, you'll see the Tilt Crowdfunding components rendered. Check out a preview below:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/cVFMFM1ORsWNKuIdGFeV_Screen%20Shot%202016-02-09%20at%2011.37.07%20AM.png\",\n        \"Screen Shot 2016-02-09 at 11.37.07 AM.png\",\n        \"876\",\n        \"392\",\n        \"#05a4dc\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nIf you'd like to customize the look and feel a bit more, check out our Advanced Installation instructions in the section below.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Advanced Installation (most customizable)\"\n}\n[/block]\nOur basic installation instructions above add all crowdfunding components to your page in a single cluster.\n\nThese advanced installation instructions will allow you to render each individual crowdfunding component as a separate elements, allowing for full control over styling and placement.\n\n## Step 1\n\n*Note: If you've already added these scripts as part of the basic installation instructions above, you don't need to add or modify them.*    \n\nPaste this code immediately *before the closing </body> tag* on all pages where you'd like your embeddable crowdfunding campaign to appear:\n\n```\n<script type=\"text/javascript\" src=\"https://pro.tilt.com/checkout-1-2-2.js\"></script>\n<script type=\"text/javascript\" src=\"https://pro.tilt.com/crowdfunding-0-0-1.js\"></script>\n```\n\nIt should look something like this:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/T3vbhgroQQCUzcosV808_Screen%20Shot%202016-02-09%20at%2011.43.48%20AM.png\",\n        \"Screen Shot 2016-02-09 at 11.43.48 AM.png\",\n        \"2058\",\n        \"290\",\n        \"#2c445b\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n## Step 2\n\nFor each of the following crowdfunding components you'd like to render on your page, add the following attributes to the respective HTML element.\n\ne.g. to render the value for *Number of Contributors,* add ```class=\"cdt-number_of_contributors\"``` to any HTML element.\n\n```\n<span class=\"cdt-number_of_contributors\"></span>\n```\n\n## Available crowdfunding components:\n\n**Main CTA (\"Contribute\") button**\n\n```\ndata-ct-checkout=\"openmatt.example\" data-ctd-campaign=\"CMP790F3BD733F84C2A8084109CBD8C9335\"\n```\n\nExample\n\n```\n<button data-ct-checkout=\"openmatt.example\" data-ctd-campaign=\"CMP790F3BD733F84C2A8084109CBD8C9335\">Contribute Now</button>\n```\n\n**Progress bar**\n\n```\n<span class=\"cdt-bar\"></span>\n```\n\n**Number of contributors**\n\n```\n<span class=\"cdt-number_of_contributors\"></span>\n```\n\n**Raised amount**\n\n```\n<span class=\"cdt-raised_amount\" data-format_money=\"$ :, :0:.\"></span>\n```\n\n**Goal amount**\n\n```\n<span class=\"cdt-goal_dollars\" data-format_money=\"$ :, :0:.\"></span>\n```\n\n**Expiration date**\n\n```\n<span class=\"cdt-expiration_date\" data-format_date=\"days_left\"></span>\n```","excerpt":"","slug":"universal-embeddable-crowdfunding-installation","type":"basic","title":"Universal Embeddable Crowdfunding Installation"}

Universal Embeddable Crowdfunding Installation


[block:callout] { "type": "danger", "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.", "title": "The ability to add JavaScript is required to install your pre-order form" } [/block] [block:api-header] { "type": "basic", "title": "Basic installation" } [/block] [block:callout] { "type": "success", "title": "The average installation time for this method is 15 minutes" } [/block] Use the following universal instructions to install your Embeddable Crowdfunding campaign 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 Paste this code immediately *before the closing </body> tag* on all pages where you'd like your embeddable crowdfunding campaign to appear: ``` <script type="text/javascript" src="https://pro.tilt.com/checkout-1-2-2.js"></script> <script type="text/javascript" src="https://pro.tilt.com/crowdfunding-0-0-1.js"></script> ``` It should look something like this: [block:image] { "images": [ { "image": [ "https://files.readme.io/jQvI90l9Rwq6Qqb23wL9_Screen%20Shot%202016-02-09%20at%2011.43.48%20AM.png", "Screen Shot 2016-02-09 at 11.43.48 AM.png", "2058", "290", "", "" ] } ] } [/block] ## Step 2 On your Embed Instructions page, you'll find a chunk of code unique to your campaign. Find the snippet that looks similar to the example below and paste it on your page where you'd like the Crowdfunding elements to appear on your page. ``` <div class="ctd-container" style="visibility:hidden"> <div class="ctd-loading"> <div class="ctd-bounce1"></div> <div class="ctd-bounce2"></div> <div class="ctd-bounce3"></div> </div> <span class="cdt-bar" data-ctd-campaign="CMP790F3BD733F84C2A8084109CBD8C9335"></span> <ul class="cdt-details"> <li> <span class="cdt-number_of_contributors"></span> <span class="cdt-small">backers</span> </li> <li> <span class="cdt-raised_amount" data-format_money="$ :, :0:."></span> <span class="cdt-small">of <span class="cdt-goal_dollars" data-format_money="$ :, :0:."></span></span> </li> <li> <span class="cdt-expiration_date" data-format_date="days_left"></span> <span class="cdt-small">days left</span> </li> </ul> <button class="cdt-btn" data-ct-checkout="openmatt.shopify-embeddable">Contribute now!</button> </div> ``` ## You're all set! Once these code additions are live on your page, you'll see the Tilt Crowdfunding components rendered. Check out a preview below: [block:image] { "images": [ { "image": [ "https://files.readme.io/cVFMFM1ORsWNKuIdGFeV_Screen%20Shot%202016-02-09%20at%2011.37.07%20AM.png", "Screen Shot 2016-02-09 at 11.37.07 AM.png", "876", "392", "#05a4dc", "" ] } ] } [/block] If you'd like to customize the look and feel a bit more, check out our Advanced Installation instructions in the section below. [block:api-header] { "type": "basic", "title": "Advanced Installation (most customizable)" } [/block] Our basic installation instructions above add all crowdfunding components to your page in a single cluster. These advanced installation instructions will allow you to render each individual crowdfunding component as a separate elements, allowing for full control over styling and placement. ## Step 1 *Note: If you've already added these scripts as part of the basic installation instructions above, you don't need to add or modify them.* Paste this code immediately *before the closing </body> tag* on all pages where you'd like your embeddable crowdfunding campaign to appear: ``` <script type="text/javascript" src="https://pro.tilt.com/checkout-1-2-2.js"></script> <script type="text/javascript" src="https://pro.tilt.com/crowdfunding-0-0-1.js"></script> ``` It should look something like this: [block:image] { "images": [ { "image": [ "https://files.readme.io/T3vbhgroQQCUzcosV808_Screen%20Shot%202016-02-09%20at%2011.43.48%20AM.png", "Screen Shot 2016-02-09 at 11.43.48 AM.png", "2058", "290", "#2c445b", "" ] } ] } [/block] ## Step 2 For each of the following crowdfunding components you'd like to render on your page, add the following attributes to the respective HTML element. e.g. to render the value for *Number of Contributors,* add ```class="cdt-number_of_contributors"``` to any HTML element. ``` <span class="cdt-number_of_contributors"></span> ``` ## Available crowdfunding components: **Main CTA ("Contribute") button** ``` data-ct-checkout="openmatt.example" data-ctd-campaign="CMP790F3BD733F84C2A8084109CBD8C9335" ``` Example ``` <button data-ct-checkout="openmatt.example" data-ctd-campaign="CMP790F3BD733F84C2A8084109CBD8C9335">Contribute Now</button> ``` **Progress bar** ``` <span class="cdt-bar"></span> ``` **Number of contributors** ``` <span class="cdt-number_of_contributors"></span> ``` **Raised amount** ``` <span class="cdt-raised_amount" data-format_money="$ :, :0:."></span> ``` **Goal amount** ``` <span class="cdt-goal_dollars" data-format_money="$ :, :0:."></span> ``` **Expiration date** ``` <span class="cdt-expiration_date" data-format_date="days_left"></span> ```