Frontend
Frontend Integration Guide
introduction the process of installing the sparklayer frontend is designed to be as streamlined as possible, requiring only a small number of code changes to your website once the code has been added, your b2b customers can then log in to your website and start placing b2b orders the process of installing the sparklayer frontend involves three main steps adding the sparklayer core script this is a javascript code snippet that instructs your website to display all the frontend interfaces required for sparklayer to work adding the product page scripts to display customer specific pricing and the ability to add products to an order, special sparklayer widgets are installed on your website's product pages setting the design customisations sparklayer has css configurations that allow control over the look and feel such as colours, typefaces, and spacing beyond these steps, you can then apply further customisations and configurations to really tailor your b2b experience you can learn more in configurations docid\ sbeaoacq a7ffbtatx8bd as well as platform specific recommendations in our integrations docid\ eewk4jdetpwyhjhrtwlvp guide ready to get started? within the sparklayer dashboard, the frontend integration section gives you personalised instructions on how to implement the special code snippets on your website the sparklayer core script the sparklayer core script works by adding a special javascript code snippet into your website's theme once added, this then enables sparklayer to render the special frontend interfaces docid\ ccz1vnh0o6d 722w35xpa that allow your b2b customers to place orders, manage their account, and more installing the script to install the sparklayer core script, it simply needs to be included within the main "header" of your website's source code within the \<head> \</head> tags for shopify, you'll need to add this to the file /layout/theme liquid to install the sparklayer core script, it simply needs to be included within the main "header" of your website's source code within the \<head> \</head> tags for bigcommerce, this is typically within the file /templates/layout/base html to get started, head over to the sparklayer dashboard and you'll see your customised sparklayer core script within the frontend configurations when you first install sparklayer, you'll automatically use the latest version and you can also manually update this via the "sparklayer core script version" section to see what's new, please see make sure to bookmark what's new! docid\ wdcewpemohpbrr96taycl technical details from a technical point of view, the core script provides sparklayer with key information that controls how it works on your website this information includes item details siteid the website's unique identifier ( account settings docid\ r9ng74ujdtywlvgbpnb5u ) platform the ecommerce platform of the website language the language to be used accountredirect the url to redirect logged in customers to display which display configurations to enable ( configurations docid\ sbeaoacq a7ffbtatx8bd ) auth the authentication details of the logged in customer modifying the core script the sparklayer core script also includes the ability to add special customisations and configurations to quickly enable (or disable) specific features modifying the core script follows standard javascript conventions and you'll need to make sure each line has the appropriate markup (e g a comma at the end of each line) available configurations you can learn more about all the available configurations on sparklayer in configurations docid\ sbeaoacq a7ffbtatx8bd 🚀 upgrading to the latest sparklayer version to benefit from our latest updates, please upgrade your frontend integration guide docid\ qwxsym9x5 pviogutekcp upgrading to the latest version please note in version 2 and above, we've introduced an improved way for you to more easily upgrade your version of sparklayer to ensure you benefit from the latest features to upgrade your version of sparklayer to the latest version, within the sparklayer dashboard, go to settings and click widgets (or click here ) within the "upgrade core script" section, we recommend selecting the latest numeric version as your preference and then click save next, you'll need to update your website to ensure you're using the correct sparklayer core script if you're not already on version 2, your core script will look something like the below \<script async src="https //cdn sparklayer io/spark 1 36 x js">\</script> this needs to be updated to the new version that uses the below format \<script async src="https //sparkcdn io/sparkjs/\<site id>/\<env>">\</script> item details \<site id> this should be replaced with your unique site id that you can find here \<env> this denotes the environment to use on sparklayer this should be set to live unless you're using sparklayer in test mode docid\ y74dzm4nk61rsuzwj3vcn (use test instead) in this example, we've adjusted this for a store with site id b2bstore on a live environment \<script async src="https //sparkcdn io/sparkjs/b2bstore/live">\</script> product page scripts the product page scripts are the special interfaces b2b customers see when they login to your website there are three interfaces available product detail interface docid\ jkcjbyuanjzp75i8ul7mt this is show on your product detail pages and allow customers to rapidly add products to an order in a special 'table view' product detail interface docid\ jkcjbyuanjzp75i8ul7mtproduct card interface docid\ mrp z0qizq2qksseujylv this is shown anywhere a "product card" is shown such as on a product collection page or product upsell area product card interface docid\ mrp z0qizq2qksseujylvproduct price interface docid\ jruxeh5yk36ompgj5x2tc this allows you to display a product's b2b price anywhere on your website, whether a product detail page or product collection page product price interface docid\ ngbcwk oo4njmcp8s8gyb in terms of implementing the product page scripts, there are two key steps to follow hiding elements if you're installing sparklayer on your existing retail website, you will want to ensure specific elements are hidden to ensure your b2b customers see the correct pricing and content for example, this may include your existing retail pricing, add to cart button, variant options and the quantity selector to do this, sparklayer has a special tag you can add to any html element (see below) displaying the sparklayer interfaces special code snippets need to be added to your product pages, e g product detail page and product collection page when a b2b customer logs in, these will automatically show to them and they can see prices, add items to an order, view their account, and checkout you can learn more about the specific interfaces and how to customise them within the frontend interfaces docid\ ccz1vnh0o6d 722w35xpa guide hiding elements sparklayer lets you hide any element on your website by using a special html tag this can be added to any html element that you want to be hidden from your b2b customers typically elements that you would typically hide include price information product variant information quantity selection buy button to get started, you'll require access to the source code of your website and you'll need to locate the specific files that contain the elements you want to hide for example, this could include editing the following pages a product detail page a product collection page specific "components" that are used in multiple locations on your website once you've located the files, you can then use the special data spark="b2c only" to hide elements this essentially adds a display none within the css of your website and then hides the element when a logged in b2b customer views the page please note this step requires changing the code of your website and you may want to consult an expert on how best to apply this to your website for platform specific guidance, please refer to integrations docid\ eewk4jdetpwyhjhrtwlvp {{ product price }} displaying the sparklayer interfaces once you've completed the step above, you can then proceed to add the special sparklayer frontend interfaces docid\ ccz1vnh0o6d 722w35xpa interface details product detail this is shown on your product detail pages and allow customers to rapidly add products to an order product detail interface docid\ jkcjbyuanjzp75i8ul7mt about how to add the code snippets product card this is shown anywhere a "product card" is shown such as on a product collection page product card interface docid\ mrp z0qizq2qksseujylv about how to add the code snippets product price this allows you to display a product's b2b price anywhere on your website you can use this instead of or alongside the "product card" product price interface docid\ ngbcwk oo4njmcp8s8gyb about how to add the code snippets design customisations (css) sparklayer by default has a relatively neutral user interface but it's possible to update nearly all aspects of the look and feel using special css variables colours typography (e g typefaces and font sizing) spacing (e g padding and margin) button styling form styling as with the sparklayer core script, the css code can be added to your existing css stylesheets or placed within the main header of your website's source code if you're placing the css in your main header, remember to wrap it within the \<head> \</head> tags what can be styled an effective way to determine the colours you want to change is to use your browser 'inspect element' tool all styling for sparklayer uses special styling codes that are proceeded with spark and each one can be isolated and updated in the inspect element tool, you'll see something like the below nearly all styling elements (e g for a button) can be replaced and these simply needed to be added to your websites source code learn more in customising the design docid\ qct2zk8wjhyiv2zbvbjyy / go to app sparklayer io/configuration/frontend/css / btn, btn large, btn small { color var( spark button raised color,var( spark lightest color,#fff)); background color var( spark button raised background,var( spark secondary color,#125ef8)); border var( spark button border,none); border radius var( spark button radius,var( spark border radius button,4px)); padding var( spark button padding, 875em 1 75em); text transform var( spark button text transform,none); letter spacing var( spark button text letter spacing,0); font weight var( spark button font weight,400); font family var( spark button font family,poppins,sans serif); } customisations available for all design customisations available please see our customising the design docid\ qct2zk8wjhyiv2zbvbjyy guide frontend integration checklist if you're in the process of setting up sparklayer on your website, we've included a handy checklist below to make sure you've captured everything core script you've added added the sparklayer core script to your website header product detail page you've added added the sparklayer product detail page widget to your product detail pages you've hidden hidden any content that you don't want to show to b2b customers, such as your regular "dtc" pricing, add to cart buttons, "sticky" content that references pricing, or non b2b content product cards you've added added the sparklayer product card widget to your product cards (typically shown on your collection and category pages) you've hidden hidden any content that you don't want to show to b2b customers, such as your regular "dtc" pricing, add to cart buttons, "quick buy" buttons, or non b2b content you've checked checked all areas of your website that include product cards such as the homepage and product recommendations css and design you've added added the sparklayer css to your website (e g in the header or in a css file) and you've applied any styling formatting to match your branding cart (and cart drawer) you've checked checked that when clicking the "cart icon" in your website header, this triggers the my cart interface if it doesn't, you need to ensure the cart is set to not trigger javascript for b2b customers and points to the url /cart general site audit you've checked checked functionality such as site search and wish lists to ensure regular (dtc) prices are hidden (you can hide this in css or in the code)