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;
}