{"_id":"58db56bbb8a31a390083baf0","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"},"project":"55a6e72e8cc73e0d00096635","user":"55a6caa022cfa321008e01d6","parentDoc":null,"version":{"_id":"55a6e72f8cc73e0d00096638","project":"55a6e72e8cc73e0d00096635","hasReference":false,"__v":29,"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"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2017-03-29T06:39:55.362Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","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, adding custom JavaScript, 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* [Adding Custom JavaScript](#js)\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* Add custom JavaScript.\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## <span id=\"head\"> Applying Storewide Header </span>\n\nYou can replace each page's predefined header with your themewide header. To do so, first add themewide styles as described [above](#styles). Next, replace the following code block:\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_content }}}\n```\n\n## <span id=\"footer\"> Applying Storewide Footer/Scripts </span>\n\nBy default, most Stencil themes' Optimized One-Page Checkout and order confirmation templates omit footers. However, you have the following options to add and customize footers, on either or both templates:\n\n* Adding your themewide footer. \n* Adding themewide footer 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  \"title\": \"Scripts Already Enabled?\"\n}\n[/block]\nHere are the steps to enable these options:\n\n1. Add themewide styles, as described [above](#styles). \n\n2. At the bottom of the checkout template (`checkout.html`), add either *or both* of these Handlebars statements, as desired:\n     ```\n    {{> components/common/footer }}\n    {{{ footer.scripts }}}\n    ```\n\n    Add them between these existing statements, as shown. If you add both, add them in the order shown here:\n    ```\n    {{{ checkout.checkout_content }}}\n    \n    {{> components/common/footer }}\n    {{{ footer.scripts }}}\n    \n    {{/partial}}\n    ```\n\n3. At the bottom of the order confirmation template (`order-confirmation.html`), insert either _or both_ of the same Handlebars statements, as desired:\n    ```\n    {{> components/common/footer }}\n    {{{ footer.scripts }}}\n    ```\n\n    Insert them between these existing statements, as shown. If you add both, observe the same order:\n    ```\n    {{{ checkout.order_confirmation_content }}}\n\n    {{{ footer.scripts }}}\n    {{> components/common/footer }}\n    \n    {{/partial}}\n    ```\n\n4. In your store's BigCommerce control panel, ensure that you have inserted any desired script text in the `Storefront`&#160;>&#160;`Footer Scripts` 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=\"js\"> Adding Custom JavaScript </span>\n\nYou can add custom JavaScript to your checkout and/or order confirmation template. Place your JavaScript inside either the `{{#partial \"head\"}}` or the `{{#partial \"page\"}}` block. Here is a very simple demonstration within a \n`{{#partial \"page\"}}` block:\n\n```\n{{#partial \"page\"}}\n\n{{{ checkout.checkout_content }}}\n\n<script>\n    console.log('Hello world');\n</script>\n\n{{/partial}}\n```\n\n## <span id=\"appscript\"> App Injection: Script Examples </span>\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 adding the following `<script>` tag before the page's final `{{/partial}}` Handlebars statement:\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 adding the following `<script>` tag before either page's final `{{/partial}}` Handlebars statement:\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 to either page. Again, you would insert these tags before the page's final `{{/partial}}` Handlebars statement:\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's `<script>` tag that you could add to either page, before the final `{{/partial}}` Handlebars statement. 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":"checkout-injection","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, adding custom JavaScript, 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) * [Adding Custom JavaScript](#js) * [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. * Add custom JavaScript. * 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] ## <span id="head"> Applying Storewide Header </span> You can replace each page's predefined header with your themewide header. To do so, first add themewide styles as described [above](#styles). Next, replace the following code block: ``` <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_content }}} ``` ## <span id="footer"> Applying Storewide Footer/Scripts </span> By default, most Stencil themes' Optimized One-Page Checkout and order confirmation templates omit footers. However, you have the following options to add and customize footers, on either or both templates: * Adding your themewide footer. * Adding themewide footer 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.", "title": "Scripts Already Enabled?" } [/block] Here are the steps to enable these options: 1. Add themewide styles, as described [above](#styles). 2. At the bottom of the checkout template (`checkout.html`), add either *or both* of these Handlebars statements, as desired: ``` {{> components/common/footer }} {{{ footer.scripts }}} ``` Add them between these existing statements, as shown. If you add both, add them in the order shown here: ``` {{{ checkout.checkout_content }}} {{> components/common/footer }} {{{ footer.scripts }}} {{/partial}} ``` 3. At the bottom of the order confirmation template (`order-confirmation.html`), insert either _or both_ of the same Handlebars statements, as desired: ``` {{> components/common/footer }} {{{ footer.scripts }}} ``` Insert them between these existing statements, as shown. If you add both, observe the same order: ``` {{{ checkout.order_confirmation_content }}} {{{ footer.scripts }}} {{> components/common/footer }} {{/partial}} ``` 4. In your store's BigCommerce control panel, ensure that you have inserted any desired script text in the `Storefront`&#160;>&#160;`Footer Scripts` 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="js"> Adding Custom JavaScript </span> You can add custom JavaScript to your checkout and/or order confirmation template. Place your JavaScript inside either the `{{#partial "head"}}` or the `{{#partial "page"}}` block. Here is a very simple demonstration within a `{{#partial "page"}}` block: ``` {{#partial "page"}} {{{ checkout.checkout_content }}} <script> console.log('Hello world'); </script> {{/partial}} ``` ## <span id="appscript"> App Injection: Script Examples </span> 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 adding the following `<script>` tag before the page's final `{{/partial}}` Handlebars statement: ``` <!-- 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 adding the following `<script>` tag before either page's final `{{/partial}}` Handlebars statement: ``` <!-- 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 to either page. Again, you would insert these tags before the page's final `{{/partial}}` Handlebars statement: ``` <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's `<script>` tag that you could add to either page, before the final `{{/partial}}` Handlebars statement. 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 --> ```