All Collections
Getting Started
Account Setup
Custom Setup
Big Commerce Embed (Optimized-One-Page Checkout)
Big Commerce Embed (Optimized-One-Page Checkout)

Best-practices for integrating KnoCommerce with a BigCommerce store that uses the Optimized One-Page Checkout from that platform

Emmett Naughton avatar
Written by Emmett Naughton
Updated over a week ago

Available on every plan.

You can get started today on KnoCommerce with the BigCommerce Custom Integration. Here's how to do that. 👇If you're not utilizing the Optimized One-Page Checkout, use this help doc in combination with our Universal Embed help doc to determine the specifics needed to create this integration!

Step 1: Go to Integrations and set up the "Custom" integration.

You'll save your site URL, and then grab your API key, which you'll need to save for later (correlates to your kno_id in the script).

Step 2: Grab your Embed Script Source URL from Settings -> Survey Settings -> Miscellaneous.

It will look something like this:

<script src="https://www.knocdn.com/v1/embed.js?id=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"></script>

But all you'll need is the URL portion, so it will look like this:

https://www.knocdn.com/v1/embed.js?id=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

Step 3: Write your script.

3a: Replace the replace_with_kno_id with the API Key from Step 1

3b: Replace the entire Embed Script Source URL with the one copied from Step 2

<script defer>
fetch('/api/storefront/order/{{checkout.order.id}}', {credentials: 'include'})
.then(function(response) {
return response.json();
})
.then(function(orderJson) {
var orderData = orderJson;
console.log(orderJson);
window.Kno = {
kno_id: '{replace_with_kno_id}', //API key found in the "custom" integration
customer: {
platform: 'BIGCOMMERCE', //required.
shop: 'mystore.com', // store url
email: orderData.billingAddress.email, // required if no phone.
lifetime_spent: orderData.orderAmount,
lifetime_orders: 1, // leave as 1
first_name: orderData.billingAddress.firstName,
last_name: orderData.billingAddress.lastName,
address1: orderData.billingAddress.address1,
address2: orderData.billingAddress.address2,
city: orderData.billingAddress.city,
zip: orderData.billingAddress.postalCode,
province: orderData.billingAddress.stateOrProvince,
country: orderData.billingAddress.country,
country_code: orderData.billingAddress.countryCode,
},
order: {
id: orderData.orderId.toString(), // required. Must be a string.
order_number: orderData.orderId.toString(),
total_price: orderData.orderAmount,
subtotal_price: orderData.orderAmount,
currency: orderData.currency.code,
total_tax: orderData.taxTotal.toString(),
billing_address: {
address1: orderData.billingAddress.address1,
address2: orderData.billingAddress.address2,
city: orderData.billingAddress.city,
zip: orderData.billingAddress.postalCode,
province: orderData.billingAddress.stateOrProvince,
country: orderData.billingAddress.country,
country_code: orderData.billingAddress.countryCode,
}
},
survey : {
selector: 'div.checkoutHeader-content' //location of survey
}
};
const knoScript = document.createElement('script');
knoScript.setAttribute(
'src',
'https://www.knocdn.com/v1/embed.js?id=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', //the src url found in Step 2: Grab your embed script from Settings -> Survey Settings -> Miscellaneous.
);
knoScript.setAttribute('async', '');
document.head.appendChild(knoScript);
});
</script>

Step 4: Configure BigCommerce

Once the script is built, you can create the Script from scratch using the BigCommerce Script Manager. Log in to the store and then

You’ll want to make sure our script has these settings in the script manager:

  • Location on page: Head

  • Select pages where the script will be added: Order confirmation

  • Script category: Functional

Save the script in BigCommerce Script Manager.

Step 5: Bonus Survey Styling in KnoCommerce

Now for styling the survey. BigCommerce defaults to a left-aligned survey container, but you'll want to make sure to adjust it on the page and center it for CX. KnoCommerce gives you the ability to add custom CSS to do this (and many other styling adjustments, if you want).

Inside the KnoCommerce survey editor, you'll want to scroll down to the bottom of the page and select the 'Choose your look' menu of the page.

Then, once inside that menu, select the 'Theme' option and then open the 'Custom CSS for Embed Script' editor.

Add in the following custom CSS, then click save in the bottom right of the screen (the yellow floppy disk) to retain all of these settings.

.kno-app[style]{
margin-left: 13rem !important;
}

Did this answer your question?