{"_id":"5addedf894fe9d0003cd9b95","project":"55a6e72e8cc73e0d00096635","version":{"_id":"55a6e72f8cc73e0d00096638","project":"55a6e72e8cc73e0d00096635","hasReference":false,"__v":30,"hasDoc":true,"createdAt":"2015-07-15T23:05:19.125Z","releaseDate":"2015-07-15T23:05:19.125Z","categories":["55a6e7308cc73e0d00096639","55b7ed07aea7c8190058badb","5604567c0c78b00d0039b191","5605e6f23a93940d002b3e4a","5605f2bba4574a0d00811365","5605f309a4574a0d00811366","5608e3b98aedf50d0004cf8f","5608e4318aedf50d0004cf90","5608e6b5a7cc2f0d00d9754d","5608e6d331beb60d001b6560","5608f879a7cc2f0d00d97580","560b097887b71d0d000d3bd9","560b13cbafa0990d00979545","560b5cbec341310d00de2a01","560b5cd0c341310d00de2a02","566a35b81e08750d00a0c49b","566a3e8503b4b20d00d02a4a","567889d307bf6a0d0083edc8","569c8b7c15bb390d00db6f9d","56b254dc65ddf50d0076ba8f","57a8ebc4cdeea20e001d2a63","57e48a4000c8680e00fae6e7","5808216773557d0f00a1e428","58105ad54a8aa50f00aa4cba","58105bf298aea40f00afa3ba","58105f548a4aed0f00d67536","581061b898aea40f00afa3be","584b3de7e5f3a42300df6ef7","596839a75965d400155bb750","5b195f920059c20003083ad6"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"category":{"_id":"560b5cbec341310d00de2a01","pages":["560b5d0b3616ac17004f1c99","560b5d405148ba0d009bd0c9","560b5d62af40a70d003df332","560b5d953bcbd80d0077d0fd","560b5fa83616ac17004f1c9d","569c8c15d326c80d0068f7b7","56d37d35d3f4650b007495ea","56d4ed5f8001e30b0089700c"],"__v":8,"project":"55a6e72e8cc73e0d00096635","version":"55a6e72f8cc73e0d00096638","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-30T03:53:34.449Z","from_sync":false,"order":14,"slug":"templates-required-directory","title":"Templates Reference"},"user":"5ab9ae5220abcc00499b2be4","__v":0,"parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2018-04-23T14:30:16.971Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":17,"body":"[block:html]\n{\n  \"html\": \"<head>\\n<title>Checkout/Confirmation Injection Options</title>\\n<meta name=\\\"description=\\\" content=\\\"How to inject storewide headers/footers, custom styling, trust seals, app scripts, and custom JavaScript into your theme's Optimized One-Page Checkout and order confirmation templates.\\\">\\n</head>\"\n}\n[/block]\nThis page shows how to inject a variety of customizations into your theme's Optimized One-Page Checkout and order confirmation templates. The options include applying storewide styling, applying a storewide header or footer, adding trust seals, and injecting scripts for ecommerce apps. \n[block:callout]\n{\n  \"type\": \"danger\",\n  \"title\": \"Enable Optimized One-Page Checkout First\",\n  \"body\": \"The options on this page will work only if you first [enable](/docs/optimized-checkout-prereqs) Optimized One-Page Checkout.\"\n}\n[/block]\nThis page covers:\n\n* [What You Can and Can't Customize](#options)\n* [Adding Storewide Styles ](#styles)\n* [Applying Storewide Header](#head)\n* [Applying Storewide Footer/Scripts](#footer)\n* [Adding Trust Seals](#trustseal)\n* [App Injection: Script Examples](#appscript)\n    * [Adding Olark Live Chat](#livechat)\n    * [Adding Bluecheck Age Verification](#bluecheck)\n    * [Rebillia Recurring Billing](#billing)\n    * [Conversions on Demand Tracking](#convert)\n    * [Addrexx Address Verification](#address)\n\n## <span id=\"options\"> What You Can and Can't Customize </span>\n\nTo ensure store security, and also to readily distribute new features to all merchants, Stencil themes' checkout sequence consists of standardized pages that you cannot edit as freely as other theme templates. However, the options described on this page allow you to apply several customizations popular with merchants:\n\n* Apply storewide page styling.\n* Remove the default header or footer, or replace them with storewide headers/footers that maintain a merchant's sitewide branding.\n* Add trust seals.\n* Inject scripts for apps that add features such as live chat, age verification, or recurring billing.\n\nThe examples below are designed to work the same way on either the checkout template (`checkout.html`) or order confirmation template (`order-confirmation.html`). You can apply them independently to either page. These examples refer to Handlebars statements already present in templates within Stencil's default Cornerstone theme.\n\n## <span id=\"styles\"> Adding Storewide Styles </span>\n\nA prerequisite for the next two options is to add themewide styles to your Checkout or Order Confirmation page. To do so, add this statement:\n\n```{{{stylesheet '/assets/css/theme.css'}}}``` \n\n...before this statement, which is already present at the head of each template:\n\n```{{{ checkout.checkout_head }}}```\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"Throughout this page, triple braces like this: `{{{ .... }}}` are not misprints. Where indicated, the third brace is required to prevent escaping of the Handlebars double braces.\",\n  \"title\": \"Triple Braces Are Literal\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Reserved Handlebars Statements\",\n  \"body\": \"Do not delete or modify either template's `{{{ checkout.checkout_head }}}`, \\n`{{{ checkout.checkout_content }}}` or ` {{{ checkout.order_confirmation_content }}}` \\nHandlebars statements. These are required for the pages to render correctly.\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"Storewide Header Already Enabled?\",\n  \"body\": \"Some Cornerstone versions already reflect the following changes that are prompted in the following procedure.\"\n}\n[/block]\n## <span id=\"head\"> Applying Storewide Header </span>\n\nYou can replace each page's predefined header with your storewide header. To do so, first add themewide styles as described [above](#styles). Next, replace the following code block (if present):\n \n```\n<header class=\"checkoutHeader optimizedCheckout-header\">\n    <div class=\"checkoutHeader-content\">\n        <h1 class=\"is-srOnly\">{{lang 'checkout.title'}}</h1>\n        <h2 class=\"checkoutHeader-heading\">\n            <a class=\"checkoutHeader-link\" href=\"{{urls.home}}\">\n                {{#if checkout.header_image}}\n                    <img alt=\"{{settings.store_logo.title}}\" class=\"checkoutHeader-logo\" id=\"logoImage\" src=\"{{ checkout.header_image }}\"/>\n                {{ else }}\n                    <span class=\"header-logo-text\">{{settings.store_logo.title}}</span>\n                {{/if}}\n            </a>\n        </h2>\n    </div>\n</header>\n```\n\n...by inserting this simple Handlebars statement:\n\n```\n{{> components/common/header }}\n```\n\n...before this existing statement:\n\n```\n{{{ checkout.checkout_head }}}\n```\n\n## <span id=\"footer\"> Applying Storewide Scripts </span>\n\nYou have the following options to add and customize headers and footers, on either or both templates:\n\n* Adding your themewide header/footer. \n* Adding themewide scripts (for analytics, etc.). \n* Adding both.\n[block:callout]\n{\n  \"type\": \"success\",\n  \"body\": \"To enable themewide footer scripts, Cornerstone versions 1.9.3 and above already include the \\n`{{{ footer.scripts }}}` tag on both the checkout and order confirmation templates.\\n\\nTo enable themewide header scripts, Cornerstone 1.15.0 and above include the `{{{head.scripts}}}` tag on both the checkout and order confirmation templates.\",\n  \"title\": \"Scripts Already Enabled?\"\n}\n[/block]\nIf you are working on a theme that does not have the scripts already enabled, here are the steps to enable these options:\n\n1. Add themewide styles, as described [above](#styles). \n\n2. Towards the top of the checkout template (`checkout.html`), add this Handlebars statement to enable header scripts:\n\n\n ```\n {{{ head.scripts }}}\n ```\n\nAdd it between these existing statements, so it will ultimately read as shown below. \n\n```\n<script type=\"text/javascript\">\n    window.language = {{{langJson 'optimized_checkout'}}};\n</script>\n\n{{{head.scripts}}}\n\n{{/partial}}\n\n{{#partial \"page\"}}\n```\n\nAdditionally, at the bottom of the checkout template (`checkout.html`), add this Handlebars statement to enable footer scripts:\n```\n{{{ footer.scripts }}}\n```\n\nAdd it between these existing statements, so it will ultimately read as shown below.\n   \n ```\n    {{{ checkout.checkout_content }}}\n    \n    {{{ footer.scripts }}}\n    \n    {{/partial}}\n    ```\n\n\n3. Towards the top of the order confirmation template (`order-confirmation.html`), add this Handlebars statement to enable header scripts:\n\n\n ```\n {{{ head.scripts }}}\n ```\n\nAdd it between these existing statements, so it will ultimately read as shown below. \n\n```\n<script type=\"text/javascript\">\n    window.language = {{{langJson 'optimized_checkout'}}};\n</script>\n\n{{{head.scripts}}}\n\n{{/partial}}\n\n{{#partial \"page\"}}\n```\n\nAdditionally, at the bottom of the order confirmation template (order-confirmation.html), insert this Handlebars statement:\n   \n```\n{{{ footer.scripts }}}\n```\n\nInsert it between these existing statements, so it will ultimately read as shown below. \n\n```    \n{{{ checkout.order_confirmation_content }}}\n\n{{{ footer.scripts }}}\n\n{{/partial}}\n```\n\n\n4. In your store's BigCommerce control panel, ensure that you have inserted any desired script text in the `Storefront`&#160;>&#160;`Script Manager` field. (For details, see [this support article](https://support.bigcommerce.com/articles/Public/Adding-Custom-Scripts-to-Stencil-Themes/).)\n\n\n## <span id=\"trustseal\"> Adding Trust Seals </span>\n\nTo add a trust seal to either template:\n\n1. Generate a code snippet (seal script) from your trust-seal provider. You can find instructions for GeoTrust seals in [this BigCommerce KB article]( https://support.bigcommerce.com/articles/Public/Adding-a-GeoTrust-SSL-seal-to-your--footer). (Instructions for other providers will vary.)\n\n2. Copy and paste the seal script into your checkout or order confirmation template, before or after the `{{{ checkout.checkout_content }}}` Handlebars statement.\n\n\n## <span id=\"appscript\"> App Injection: Script Examples </span>\n\nWith BigCommerce's extensible software, there are a variety of ways to add scripts to your store. The steps above outline only one method of adding header and footer scripts to your store, which is by directly editing the theme files.\n\nAs mentioned in the App Injection Script Examples, you can use BigCommerce's [Script Manager](https://support.bigcommerce.com/articles/Public/Adding-Custom-Scripts-to-Stencil-Themes) and [Script API](https://developer.bigcommerce.com/api/v3/scripts.html) to inject scripts to your store. The Script Manager user interface is available to store owners and other users via granted permission directly in the Control Panel, or scripts can be programmatically injected into the store by developers using the Scripts API. These are the recommended methods as they allow seamless and intuitive injection of scripts.\n\nThe following sections present examples of scripts that inject popular apps into the checkout/order confirmation sequence.\n\n### <span id=\"livechat\"> Olark Live Chat </span>\n\nAs an example of injecting an app from the BigCommerce Apps Marketplace, you could enable the Olark Live Chat app on either page by  by using the script manager or our new Scripts API:\n\n```\n<!-- begin olark code -->\n<script type=\"text/javascript\" async>\n;(function(o,l,a,r,k,y){if(o.olark)return;\nr=\"script\";y=l.createElement(r);r=l.getElementsByTagName(r)[0];\ny.async=1;y.src=\"//\"+a;r.parentNode.insertBefore(y,r);\ny=o.olark=function(){k.s.push(arguments);k.t.push(+new Date)};\ny.extend=function(i,j){y(\"extend\",i,j)};\ny.identify=function(i){y(\"identifyv\",k.i=i)};\ny.configure=function(i,j){y(\"configure\",i,j);k.c[i]=j};\nk=y._={s:[],t:[+new Date],c:{},l:a};\n})(window,document,\"static.olark.com/jsclient/loader.js\");\n/* Add configuration calls bellow this comment */\nolark.identify('4080-493-10-1035');</script>\n<!-- end olark code -->\n```\n\n### <span id=\"bluecheck\"> Bluecheck Age Verification </span>\n\nSimilarly, you could enable the Bluecheck age-verification app by using the script manager or our new Scripts API:\n\n```\n<!-- Bluecheck AV Start Here -->\n   <script src=\"https://api.bluecheck.me/modal/latest/custom/bigcommerce.js\"></script>\n   <script src='//api.bluecheck.me/age-gate/v2/loader.js.php?domain_token=[user-token-value]'></script>\n   <span style='display:none' id='bc_selected_shipping_info'>%%GLOBAL_ShippingAddress%%</span>\n   <span style='display:none' id='bc_selected_billing_info'>%%GLOBAL_BillingAddress%%</span>\n   <span style='display:none' id='bc_customer_acct_email'>%%GLOBAL_CurrentCustomerEmail%%</span>\n   <span style='display:none' id='bc_customer_acct_id'>%%GLOBAL_CurrentCustomerID%%</span>\n   <span style='display:none' id='bc_customer_acct_fname'>%%GLOBAL_CurrentCustomerFirstName%%</span>\n   <span style='display:none' id='bc_customer_acct_lname'>%%GLOBAL_CurrentCustomerLastName%%</span>\n   <!-- Bluecheck AV End Here -->\n```\n\n### <span id=\"billing\"> Rebillia Recurring Billing </span>\n\nTo add the [Rebillia](https://www.rebillia.com/documentation/) app, you could add the following tags  by using the script manager or our new Scripts API:\n\n```\n<div id='rebillia_overlay'></div>\n\n<script src=\"https://js.braintreegateway.com/v2/braintree.js\"></script>\n\n<script type=\"text/javascript\" src=\"https://js.stripe.com/v2/\"></script>\n\n<script type=\"text/javascript\">\nfunction customerJWT(a){var b=\"r1sc6nvnnhed377cozp2bfwfa69cfz5\",c=new XMLHttpRequest;c.onreadystatechange=function(){if(4==c.readyState)if(200==c.status){var b=new XMLHttpRequest;b.open(\"GET\",\"https://demo.rebillia.com/storefront/login/\"+c.responseText,!0),b.withCredentials=!0,b.send()}else if(404==c.status){var d=new XMLHttpRequest;params=\"bc_email=\"+a,d.open(\"POST\",\"https://demo.rebillia.com/storefront/login/guest\",!0),d.setRequestHeader(\"Content-type\",\"application/x-www-form-urlencoded\"),d.withCredentials=!0,d.send(params)}else console.log(\"Something went wrong\")},c.open(\"GET\",\"/customer/current.jwt?app_client_id=\"+b,!0),c.send()}var currentcustomeremail=\"%%GLOBAL_CurrentCustomerEmail%%\",shopPath=\"%%GLOBAL_ShopPathSSL%%\",domainName=\"https://demo.rebillia.com\",domainURL=\"https://demo.rebillia.com/\";$(document).ready(function(){$.getScript(domainName+\"/js/embed-common.js\");var a=window.location.href.match(/[^\\/]+$/);if(a&&a.length){var b=a[0].split(\".\");\"account\"!=b[0]&&\"checkout\"!=b[0]&&\"finishorder\"!=b[0]||$.getScript(domainName+\"/js/embed-\"+b[0]+\".js\"),\"account\"==b[0]&&customerJWT()}});\n</script>\n```\n\n\n### <span id=\"convert\"> Conversion Tracking: Conversions on Demand </span>\n\nHere is one final example of an app that you could enable by using the script manager or our new Scripts API. This example enables Conversions on Demand:\n\n```\n<script type='text/javascript'>// <![CDATA[\n    var cod_page_guid = 'CHECKOUT';\n    var COD_CONFIG = {'platform':'bigcommerce', 'stoken':'as2_bcmarket_org'};\n        (function(){\n            var divCOD = document.createElement('div');\n            divCOD.id = 'codScripts';\n            var bodytag = document.getElementsByTagName('body')[0];\n            bodytag.appendChild(divCOD);\n            var cod = document.createElement('script');\n            cod.type = 'text/javascript';\n            cod.src = 'https://www.conversionsondemand.com/codadmin2/framework/cod-scripts-loader.js';\n            var s = document.getElementById('codScripts');\n            s.parentNode.insertBefore(cod, s);\n        })(COD_CONFIG);\n// ]]></script>\n```\n\n### <span id=\"address\"> Google Analytics: Addrexx Address Verification </span>\n\nThe Addrexx app is integrated to the Checkout or Order Confirmation page via the BigCommerce control panel's Google Analytics box, rather than through injection directly into either Stencil template file. Here is the corresponding script to enter into the control panel:\n\n```\n<!-- START  Addrexx -->\n<script type=\"text/javascript\">\nwwPage = window.location.href;\nif (wwPage.indexOf(\"billing_address\") >= 0 || wwPage.indexOf(\"create_account\") >= 0 || wwPage.indexOf(\"shipping_address\") >= 0 || wwPage.indexOf(\"checkout\") >= 0) {\nfunction loadaddrexx() {\n    var _cc_url = \"xxredda.s3.amazonaws.com/bcmarket/loader.js\";\n    var _cc_s = document.createElement('script');\n    _cc_s.type = 'text/javascript';\n    _cc_s.src = ((\"http:\" === document.location.protocol) ? \"http:\" : \"https:\") + \"//\" + _cc_url;\n    document.getElementsByTagName(\"head\")[0].appendChild(_cc_s);\n};\nloadaddrexx();\n}\n</script>\n<!-- END  Addrexx -->\n```","excerpt":"","slug":"checkoutconfirmation-injection-options-clone","type":"basic","title":"Checkout/Confirmation Injection Options"}

Checkout/Confirmation Injection Options


[block:html] { "html": "<head>\n<title>Checkout/Confirmation Injection Options</title>\n<meta name=\"description=\" content=\"How to inject storewide headers/footers, custom styling, trust seals, app scripts, and custom JavaScript into your theme's Optimized One-Page Checkout and order confirmation templates.\">\n</head>" } [/block] This page shows how to inject a variety of customizations into your theme's Optimized One-Page Checkout and order confirmation templates. The options include applying storewide styling, applying a storewide header or footer, adding trust seals, and injecting scripts for ecommerce apps. [block:callout] { "type": "danger", "title": "Enable Optimized One-Page Checkout First", "body": "The options on this page will work only if you first [enable](/docs/optimized-checkout-prereqs) Optimized One-Page Checkout." } [/block] This page covers: * [What You Can and Can't Customize](#options) * [Adding Storewide Styles ](#styles) * [Applying Storewide Header](#head) * [Applying Storewide Footer/Scripts](#footer) * [Adding Trust Seals](#trustseal) * [App Injection: Script Examples](#appscript) * [Adding Olark Live Chat](#livechat) * [Adding Bluecheck Age Verification](#bluecheck) * [Rebillia Recurring Billing](#billing) * [Conversions on Demand Tracking](#convert) * [Addrexx Address Verification](#address) ## <span id="options"> What You Can and Can't Customize </span> To ensure store security, and also to readily distribute new features to all merchants, Stencil themes' checkout sequence consists of standardized pages that you cannot edit as freely as other theme templates. However, the options described on this page allow you to apply several customizations popular with merchants: * Apply storewide page styling. * Remove the default header or footer, or replace them with storewide headers/footers that maintain a merchant's sitewide branding. * Add trust seals. * Inject scripts for apps that add features such as live chat, age verification, or recurring billing. The examples below are designed to work the same way on either the checkout template (`checkout.html`) or order confirmation template (`order-confirmation.html`). You can apply them independently to either page. These examples refer to Handlebars statements already present in templates within Stencil's default Cornerstone theme. ## <span id="styles"> Adding Storewide Styles </span> A prerequisite for the next two options is to add themewide styles to your Checkout or Order Confirmation page. To do so, add this statement: ```{{{stylesheet '/assets/css/theme.css'}}}``` ...before this statement, which is already present at the head of each template: ```{{{ checkout.checkout_head }}}``` [block:callout] { "type": "warning", "body": "Throughout this page, triple braces like this: `{{{ .... }}}` are not misprints. Where indicated, the third brace is required to prevent escaping of the Handlebars double braces.", "title": "Triple Braces Are Literal" } [/block] [block:callout] { "type": "warning", "title": "Reserved Handlebars Statements", "body": "Do not delete or modify either template's `{{{ checkout.checkout_head }}}`, \n`{{{ checkout.checkout_content }}}` or ` {{{ checkout.order_confirmation_content }}}` \nHandlebars statements. These are required for the pages to render correctly." } [/block] [block:callout] { "type": "success", "title": "Storewide Header Already Enabled?", "body": "Some Cornerstone versions already reflect the following changes that are prompted in the following procedure." } [/block] ## <span id="head"> Applying Storewide Header </span> You can replace each page's predefined header with your storewide header. To do so, first add themewide styles as described [above](#styles). Next, replace the following code block (if present): ``` <header class="checkoutHeader optimizedCheckout-header"> <div class="checkoutHeader-content"> <h1 class="is-srOnly">{{lang 'checkout.title'}}</h1> <h2 class="checkoutHeader-heading"> <a class="checkoutHeader-link" href="{{urls.home}}"> {{#if checkout.header_image}} <img alt="{{settings.store_logo.title}}" class="checkoutHeader-logo" id="logoImage" src="{{ checkout.header_image }}"/> {{ else }} <span class="header-logo-text">{{settings.store_logo.title}}</span> {{/if}} </a> </h2> </div> </header> ``` ...by inserting this simple Handlebars statement: ``` {{> components/common/header }} ``` ...before this existing statement: ``` {{{ checkout.checkout_head }}} ``` ## <span id="footer"> Applying Storewide Scripts </span> You have the following options to add and customize headers and footers, on either or both templates: * Adding your themewide header/footer. * Adding themewide scripts (for analytics, etc.). * Adding both. [block:callout] { "type": "success", "body": "To enable themewide footer scripts, Cornerstone versions 1.9.3 and above already include the \n`{{{ footer.scripts }}}` tag on both the checkout and order confirmation templates.\n\nTo enable themewide header scripts, Cornerstone 1.15.0 and above include the `{{{head.scripts}}}` tag on both the checkout and order confirmation templates.", "title": "Scripts Already Enabled?" } [/block] If you are working on a theme that does not have the scripts already enabled, here are the steps to enable these options: 1. Add themewide styles, as described [above](#styles). 2. Towards the top of the checkout template (`checkout.html`), add this Handlebars statement to enable header scripts: ``` {{{ head.scripts }}} ``` Add it between these existing statements, so it will ultimately read as shown below. ``` <script type="text/javascript"> window.language = {{{langJson 'optimized_checkout'}}}; </script> {{{head.scripts}}} {{/partial}} {{#partial "page"}} ``` Additionally, at the bottom of the checkout template (`checkout.html`), add this Handlebars statement to enable footer scripts: ``` {{{ footer.scripts }}} ``` Add it between these existing statements, so it will ultimately read as shown below. ``` {{{ checkout.checkout_content }}} {{{ footer.scripts }}} {{/partial}} ``` 3. Towards the top of the order confirmation template (`order-confirmation.html`), add this Handlebars statement to enable header scripts: ``` {{{ head.scripts }}} ``` Add it between these existing statements, so it will ultimately read as shown below. ``` <script type="text/javascript"> window.language = {{{langJson 'optimized_checkout'}}}; </script> {{{head.scripts}}} {{/partial}} {{#partial "page"}} ``` Additionally, at the bottom of the order confirmation template (order-confirmation.html), insert this Handlebars statement: ``` {{{ footer.scripts }}} ``` Insert it between these existing statements, so it will ultimately read as shown below. ``` {{{ checkout.order_confirmation_content }}} {{{ footer.scripts }}} {{/partial}} ``` 4. In your store's BigCommerce control panel, ensure that you have inserted any desired script text in the `Storefront`&#160;>&#160;`Script Manager` field. (For details, see [this support article](https://support.bigcommerce.com/articles/Public/Adding-Custom-Scripts-to-Stencil-Themes/).) ## <span id="trustseal"> Adding Trust Seals </span> To add a trust seal to either template: 1. Generate a code snippet (seal script) from your trust-seal provider. You can find instructions for GeoTrust seals in [this BigCommerce KB article]( https://support.bigcommerce.com/articles/Public/Adding-a-GeoTrust-SSL-seal-to-your--footer). (Instructions for other providers will vary.) 2. Copy and paste the seal script into your checkout or order confirmation template, before or after the `{{{ checkout.checkout_content }}}` Handlebars statement. ## <span id="appscript"> App Injection: Script Examples </span> With BigCommerce's extensible software, there are a variety of ways to add scripts to your store. The steps above outline only one method of adding header and footer scripts to your store, which is by directly editing the theme files. As mentioned in the App Injection Script Examples, you can use BigCommerce's [Script Manager](https://support.bigcommerce.com/articles/Public/Adding-Custom-Scripts-to-Stencil-Themes) and [Script API](https://developer.bigcommerce.com/api/v3/scripts.html) to inject scripts to your store. The Script Manager user interface is available to store owners and other users via granted permission directly in the Control Panel, or scripts can be programmatically injected into the store by developers using the Scripts API. These are the recommended methods as they allow seamless and intuitive injection of scripts. The following sections present examples of scripts that inject popular apps into the checkout/order confirmation sequence. ### <span id="livechat"> Olark Live Chat </span> As an example of injecting an app from the BigCommerce Apps Marketplace, you could enable the Olark Live Chat app on either page by by using the script manager or our new Scripts API: ``` <!-- begin olark code --> <script type="text/javascript" async> ;(function(o,l,a,r,k,y){if(o.olark)return; r="script";y=l.createElement(r);r=l.getElementsByTagName(r)[0]; y.async=1;y.src="//"+a;r.parentNode.insertBefore(y,r); y=o.olark=function(){k.s.push(arguments);k.t.push(+new Date)}; y.extend=function(i,j){y("extend",i,j)}; y.identify=function(i){y("identifyv",k.i=i)}; y.configure=function(i,j){y("configure",i,j);k.c[i]=j}; k=y._={s:[],t:[+new Date],c:{},l:a}; })(window,document,"static.olark.com/jsclient/loader.js"); /* Add configuration calls bellow this comment */ olark.identify('4080-493-10-1035');</script> <!-- end olark code --> ``` ### <span id="bluecheck"> Bluecheck Age Verification </span> Similarly, you could enable the Bluecheck age-verification app by using the script manager or our new Scripts API: ``` <!-- Bluecheck AV Start Here --> <script src="https://api.bluecheck.me/modal/latest/custom/bigcommerce.js"></script> <script src='//api.bluecheck.me/age-gate/v2/loader.js.php?domain_token=[user-token-value]'></script> <span style='display:none' id='bc_selected_shipping_info'>%%GLOBAL_ShippingAddress%%</span> <span style='display:none' id='bc_selected_billing_info'>%%GLOBAL_BillingAddress%%</span> <span style='display:none' id='bc_customer_acct_email'>%%GLOBAL_CurrentCustomerEmail%%</span> <span style='display:none' id='bc_customer_acct_id'>%%GLOBAL_CurrentCustomerID%%</span> <span style='display:none' id='bc_customer_acct_fname'>%%GLOBAL_CurrentCustomerFirstName%%</span> <span style='display:none' id='bc_customer_acct_lname'>%%GLOBAL_CurrentCustomerLastName%%</span> <!-- Bluecheck AV End Here --> ``` ### <span id="billing"> Rebillia Recurring Billing </span> To add the [Rebillia](https://www.rebillia.com/documentation/) app, you could add the following tags by using the script manager or our new Scripts API: ``` <div id='rebillia_overlay'></div> <script src="https://js.braintreegateway.com/v2/braintree.js"></script> <script type="text/javascript" src="https://js.stripe.com/v2/"></script> <script type="text/javascript"> function customerJWT(a){var b="r1sc6nvnnhed377cozp2bfwfa69cfz5",c=new XMLHttpRequest;c.onreadystatechange=function(){if(4==c.readyState)if(200==c.status){var b=new XMLHttpRequest;b.open("GET","https://demo.rebillia.com/storefront/login/"+c.responseText,!0),b.withCredentials=!0,b.send()}else if(404==c.status){var d=new XMLHttpRequest;params="bc_email="+a,d.open("POST","https://demo.rebillia.com/storefront/login/guest",!0),d.setRequestHeader("Content-type","application/x-www-form-urlencoded"),d.withCredentials=!0,d.send(params)}else console.log("Something went wrong")},c.open("GET","/customer/current.jwt?app_client_id="+b,!0),c.send()}var currentcustomeremail="%%GLOBAL_CurrentCustomerEmail%%",shopPath="%%GLOBAL_ShopPathSSL%%",domainName="https://demo.rebillia.com",domainURL="https://demo.rebillia.com/";$(document).ready(function(){$.getScript(domainName+"/js/embed-common.js");var a=window.location.href.match(/[^\/]+$/);if(a&&a.length){var b=a[0].split(".");"account"!=b[0]&&"checkout"!=b[0]&&"finishorder"!=b[0]||$.getScript(domainName+"/js/embed-"+b[0]+".js"),"account"==b[0]&&customerJWT()}}); </script> ``` ### <span id="convert"> Conversion Tracking: Conversions on Demand </span> Here is one final example of an app that you could enable by using the script manager or our new Scripts API. This example enables Conversions on Demand: ``` <script type='text/javascript'>// <![CDATA[ var cod_page_guid = 'CHECKOUT'; var COD_CONFIG = {'platform':'bigcommerce', 'stoken':'as2_bcmarket_org'}; (function(){ var divCOD = document.createElement('div'); divCOD.id = 'codScripts'; var bodytag = document.getElementsByTagName('body')[0]; bodytag.appendChild(divCOD); var cod = document.createElement('script'); cod.type = 'text/javascript'; cod.src = 'https://www.conversionsondemand.com/codadmin2/framework/cod-scripts-loader.js'; var s = document.getElementById('codScripts'); s.parentNode.insertBefore(cod, s); })(COD_CONFIG); // ]]></script> ``` ### <span id="address"> Google Analytics: Addrexx Address Verification </span> The Addrexx app is integrated to the Checkout or Order Confirmation page via the BigCommerce control panel's Google Analytics box, rather than through injection directly into either Stencil template file. Here is the corresponding script to enter into the control panel: ``` <!-- START Addrexx --> <script type="text/javascript"> wwPage = window.location.href; if (wwPage.indexOf("billing_address") >= 0 || wwPage.indexOf("create_account") >= 0 || wwPage.indexOf("shipping_address") >= 0 || wwPage.indexOf("checkout") >= 0) { function loadaddrexx() { var _cc_url = "xxredda.s3.amazonaws.com/bcmarket/loader.js"; var _cc_s = document.createElement('script'); _cc_s.type = 'text/javascript'; _cc_s.src = (("http:" === document.location.protocol) ? "http:" : "https:") + "//" + _cc_url; document.getElementsByTagName("head")[0].appendChild(_cc_s); }; loadaddrexx(); } </script> <!-- END Addrexx --> ```