{"_id":"55f81b4f59eace0d0087db2b","user":"542979b61215fe08007e0ee4","version":{"_id":"542979c51215fe08007e0ee8","project":"542979c51215fe08007e0ee5","__v":4,"createdAt":"2014-09-29T15:24:53.437Z","releaseDate":"2014-09-29T15:24:53.437Z","categories":["542979c51215fe08007e0ee9","542985897a6b690800767fab","5429898d1215fe08007e0fe6","542ac5aa54d88d140075fcaf"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"githubsync":"","parentDoc":null,"category":{"_id":"5429898d1215fe08007e0fe6","pages":["5429ad872e366c080086b5c6","5429cb1b2e366c080086b777","542db0adcb19820800c1f4a3","54380c2df15a8e1400831f88","542aee7d54d88d140075ff00","542af02f54d88d140075ff14","542f14abacabcf080095953b","54651c6df42a472000b0c611","55f81b4f59eace0d0087db2b","56b0c5d81486990d009c101a","56babbffc275570d00ce7105"],"project":"542979c51215fe08007e0ee5","version":"542979c51215fe08007e0ee8","__v":10,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2014-09-29T16:32:13.661Z","from_sync":false,"order":1,"slug":"helpers","title":"Helpers"},"project":"542979c51215fe08007e0ee5","__v":17,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-09-15T13:21:19.465Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":3,"body":"Inkcite's `{footnote}` Helper makes quick work of placing unique footnote indicators in your email.  This Helper was born from a need for automatic footnote management on multi-version emails where the order was not predictable.\n\n## Adding a Footnote\n\nThe first step is to place a footnote in the appropriate spot in your `source.html` or within any included file.  Here's an example:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Vivamus rhoncus quam dui, at maximus tellus iaculis et.<sup>{footnote text=\\\"Legalese and fine print for first footnote here.\\\"}</sup>\",\n      \"language\": \"html\",\n      \"name\": \"source.html\"\n    }\n  ]\n}\n[/block]\nWhen viewed in your browser, Inkcite will store the footnote text and render a footnote indicator within the `<sup>` tags.  Here's what it will look like:\n[block:html]\n{\n  \"html\": \"<div style=\\\"padding: 10px; border-left: 5px solid #ddd;\\\">Vivamus rhoncus quam dui, at maximus tellus iaculis et.<sup>1</sup></div>\"\n}\n[/block]\nUnless otherwise specified, Inkcite automatically uniquely numbers each footnote you add to your email, starting at one (1), in the order they are encountered in the source.\n\n## Rendering Footnotes\n\nInkcite stores the text of your footnotes until it encounters the `{footnotes}` Helper.  This is typically placed somewhere in the footer of your email.  When rendering this Helper, Inkcite will assemble all of the footnote text and display it in a well-organized list using a default set of formatting.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{div font-size=10 color=#999}\\n   {footnotes}\\n{/div}\",\n      \"language\": \"html\",\n      \"name\": \"source.html\"\n    }\n  ]\n}\n[/block]\nWhen viewed in your browser or sent via a preview, the resulting HTML will look like this:\n[block:html]\n{\n  \"html\": \"<div style=\\\"padding: 10px; border-left: 5px solid #ddd; font-size: 10px; color: #999\\\">\\n  <sup>1</sup> Legalese and fine print for first footnote here.\\n</div>\"\n}\n[/block]\nThe `{footnotes}` Helper produces as little markup as possible and relies on the surrounding container (the `{div}` in this example) to establish font size, color, etc.\n\n## Specifying a Custom Symbol\n\nTo specify a custom symbol for a footnote, simply add the `symbol` attribute when defining your footnote.  For example:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Phasellus lobortis quam in fringilla semper.<sup>{footnote symbol=\\\"&dagger;\\\" text=\\\"Some additional legalese here.\\\"}</sup>\",\n      \"language\": \"html\",\n      \"name\": \"source.html\"\n    }\n  ]\n}\n[/block]\nThe resulting HTML will look this like:\n[block:html]\n{\n  \"html\": \"<div style=\\\"padding: 10px; border-left: 5px solid #ddd;\\\">Phasellus lobortis quam in fringilla semper.<sup>&dagger;</sup></div>\"\n}\n[/block]\nAnd later, when the `{footnotes}` Helper is rendered in the footer of the email it will look like this:\n[block:html]\n{\n  \"html\": \"<div style=\\\"padding: 10px; border-left: 5px solid #ddd; font-size: 10px; color: #999\\\">\\n  <sup>&dagger;</sup> Legalese and fine print for first footnote here.<br><br>\\n  <sup>1</sup> Legalese and fine print for first footnote here.\\n</div>\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Note!\",\n  \"body\": \"Inkcite always sorts symbol-based footnotes before numeric footnotes, regardless of the order they are encountered in the email.\"\n}\n[/block]\n## Referencing an Existing Footnote\n\nSometimes a footnote reference needs to appear multiple times in your email.  To keep your code DRY, you can registered a unique, readable identifier for a footnote using the `id` attribute.  Once declared, you can place the same footnote multiple times in your email.  For example:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Base model starts at $49.95!<sup>{footnote id=\\\"msrp\\\" symbol=\\\"*\\\" text=\\\"Manufacturer's suggested retail price does not include destination and delivery charges, tax, title and registration fees.\\\"}</sup>\\n...\\nOrder today! As low as $49.95!<sup>{footnote id=\\\"msrp\\\"}</sup>\",\n      \"language\": \"html\",\n      \"name\": \"source.html\"\n    }\n  ]\n}\n[/block]\nHere we've registered a footnote called `msrp` and referenced it twice, once where it is initially declared and a second time lower in the email. The benefit of this method is that if you decide to change the symbol or footnote text, you can do so in one spot and the symbol is automatically updated everywhere the footnote is referenced.\n\nThis will render like this:\n[block:html]\n{\n  \"html\": \"<div style=\\\"padding: 10px; border-left: 5px solid #ddd;\\\">Base model starts at $49.95!<sup>*</sup><br>\\n  ...<br>\\n  Order today! As low as $49.95!<sup>*</sup>\\n</div>\"\n}\n[/block]\n## Pre-Declaring Footnotes\n\nSometimes, particularly when working with multiple email versions, you need to include the same footnote in two or more versions, but you don't necessarily know the first time it will be encountered.  Inkcite allows you to pre-declare a footnote without rendering its symbol by setting the `hidden` boolean attribute.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{footnote id=\\\"msrp\\\" symbol=\\\"*\\\" text=\\\"Manufacturer's suggested retail price does not include destination and delivery charges, tax, title and registration fees.\\\" hidden}\\n\\nVivamus rhoncus quam dui, at maximus tellus iaculis et. Maecenas nec egestas nisl.<br><br>\\n\\n<% if bought_within_1_year? %>\\n  Your license includes a FREE upgrade to the latest model. Contact your retailer for details.\\n<% elsif customer? %>\\n  Upgrade today for only $29.95!<sup>{footnote id=\\\"msrp\\\"}</sup>\\n<% elsif prospect? %>\\n  Introductory priced at ONLY $49.99<sup>{footnote id=\\\"msrp\\\"}</sup> for a limited time!\\n<% end %>\",\n      \"language\": \"html\",\n      \"name\": \"source.html\"\n    }\n  ]\n}\n[/block]\nThis first `{footnote}` reference registers the `msrp` footnote but, because its `hidden` attribute is set, Inkcite will not render the symbol.  Then, depending on which version of the email is being rendered (this example includes three versions), the footnote will appear in the appropriate place.  In the case of the `bought_within_1_year` version of the email, the footnote isn't referenced so it never appears.\n\nThis is a somewhat contrived example but in a more complex email where included files can appear in a variety of orders and reference the same footnotes, it keeps your code DRY and minimizes errors.","excerpt":"Always read the fine print.","slug":"footnote","type":"basic","title":"Footnote"}

Footnote

Always read the fine print.

Inkcite's `{footnote}` Helper makes quick work of placing unique footnote indicators in your email. This Helper was born from a need for automatic footnote management on multi-version emails where the order was not predictable. ## Adding a Footnote The first step is to place a footnote in the appropriate spot in your `source.html` or within any included file. Here's an example: [block:code] { "codes": [ { "code": "Vivamus rhoncus quam dui, at maximus tellus iaculis et.<sup>{footnote text=\"Legalese and fine print for first footnote here.\"}</sup>", "language": "html", "name": "source.html" } ] } [/block] When viewed in your browser, Inkcite will store the footnote text and render a footnote indicator within the `<sup>` tags. Here's what it will look like: [block:html] { "html": "<div style=\"padding: 10px; border-left: 5px solid #ddd;\">Vivamus rhoncus quam dui, at maximus tellus iaculis et.<sup>1</sup></div>" } [/block] Unless otherwise specified, Inkcite automatically uniquely numbers each footnote you add to your email, starting at one (1), in the order they are encountered in the source. ## Rendering Footnotes Inkcite stores the text of your footnotes until it encounters the `{footnotes}` Helper. This is typically placed somewhere in the footer of your email. When rendering this Helper, Inkcite will assemble all of the footnote text and display it in a well-organized list using a default set of formatting. [block:code] { "codes": [ { "code": "{div font-size=10 color=#999}\n {footnotes}\n{/div}", "language": "html", "name": "source.html" } ] } [/block] When viewed in your browser or sent via a preview, the resulting HTML will look like this: [block:html] { "html": "<div style=\"padding: 10px; border-left: 5px solid #ddd; font-size: 10px; color: #999\">\n <sup>1</sup> Legalese and fine print for first footnote here.\n</div>" } [/block] The `{footnotes}` Helper produces as little markup as possible and relies on the surrounding container (the `{div}` in this example) to establish font size, color, etc. ## Specifying a Custom Symbol To specify a custom symbol for a footnote, simply add the `symbol` attribute when defining your footnote. For example: [block:code] { "codes": [ { "code": "Phasellus lobortis quam in fringilla semper.<sup>{footnote symbol=\"&dagger;\" text=\"Some additional legalese here.\"}</sup>", "language": "html", "name": "source.html" } ] } [/block] The resulting HTML will look this like: [block:html] { "html": "<div style=\"padding: 10px; border-left: 5px solid #ddd;\">Phasellus lobortis quam in fringilla semper.<sup>&dagger;</sup></div>" } [/block] And later, when the `{footnotes}` Helper is rendered in the footer of the email it will look like this: [block:html] { "html": "<div style=\"padding: 10px; border-left: 5px solid #ddd; font-size: 10px; color: #999\">\n <sup>&dagger;</sup> Legalese and fine print for first footnote here.<br><br>\n <sup>1</sup> Legalese and fine print for first footnote here.\n</div>" } [/block] [block:callout] { "type": "info", "title": "Note!", "body": "Inkcite always sorts symbol-based footnotes before numeric footnotes, regardless of the order they are encountered in the email." } [/block] ## Referencing an Existing Footnote Sometimes a footnote reference needs to appear multiple times in your email. To keep your code DRY, you can registered a unique, readable identifier for a footnote using the `id` attribute. Once declared, you can place the same footnote multiple times in your email. For example: [block:code] { "codes": [ { "code": "Base model starts at $49.95!<sup>{footnote id=\"msrp\" symbol=\"*\" text=\"Manufacturer's suggested retail price does not include destination and delivery charges, tax, title and registration fees.\"}</sup>\n...\nOrder today! As low as $49.95!<sup>{footnote id=\"msrp\"}</sup>", "language": "html", "name": "source.html" } ] } [/block] Here we've registered a footnote called `msrp` and referenced it twice, once where it is initially declared and a second time lower in the email. The benefit of this method is that if you decide to change the symbol or footnote text, you can do so in one spot and the symbol is automatically updated everywhere the footnote is referenced. This will render like this: [block:html] { "html": "<div style=\"padding: 10px; border-left: 5px solid #ddd;\">Base model starts at $49.95!<sup>*</sup><br>\n ...<br>\n Order today! As low as $49.95!<sup>*</sup>\n</div>" } [/block] ## Pre-Declaring Footnotes Sometimes, particularly when working with multiple email versions, you need to include the same footnote in two or more versions, but you don't necessarily know the first time it will be encountered. Inkcite allows you to pre-declare a footnote without rendering its symbol by setting the `hidden` boolean attribute. [block:code] { "codes": [ { "code": "{footnote id=\"msrp\" symbol=\"*\" text=\"Manufacturer's suggested retail price does not include destination and delivery charges, tax, title and registration fees.\" hidden}\n\nVivamus rhoncus quam dui, at maximus tellus iaculis et. Maecenas nec egestas nisl.<br><br>\n\n<% if bought_within_1_year? %>\n Your license includes a FREE upgrade to the latest model. Contact your retailer for details.\n<% elsif customer? %>\n Upgrade today for only $29.95!<sup>{footnote id=\"msrp\"}</sup>\n<% elsif prospect? %>\n Introductory priced at ONLY $49.99<sup>{footnote id=\"msrp\"}</sup> for a limited time!\n<% end %>", "language": "html", "name": "source.html" } ] } [/block] This first `{footnote}` reference registers the `msrp` footnote but, because its `hidden` attribute is set, Inkcite will not render the symbol. Then, depending on which version of the email is being rendered (this example includes three versions), the footnote will appear in the appropriate place. In the case of the `bought_within_1_year` version of the email, the footnote isn't referenced so it never appears. This is a somewhat contrived example but in a more complex email where included files can appear in a variety of orders and reference the same footnotes, it keeps your code DRY and minimizes errors.