BigCommerce Embed is available on every KnoCommerce plan.
Overview
In this guide, we'll walk you through how to get started with the KnoCommerce + BigCommerce Custom Integration.
Here are the steps to get started 👇
Let's jump in!
KnoCommerce Custom Integration Setup
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):
KnoCommerce Embed Script
Grab your Embed Script Source URL from Settings -> Surveys:
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
Combining Script Details
In this section, we'll cover how to use the information you gathered from the previous steps to build you're overall code.
There are two required steps:
Replace the replace_with_kno_id with the API Key from Step 1
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>
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.
Survey Style Settings
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 expand the Design section of your survey builder:
Once inside that menu, navigate to 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;
}