Marketing flow platforms and apps can be super helpful for you and your brand, and we want to make sure that you can still utilize KnoCommerce inside of your marketing funnel checkout flow. Here's how to set that up with your Funnelish integration!
NOTE: This feature is a newly released beta, so please reach out if something doesn't work as expected.
Background
At the time of writing this help doc, Funnelish does not have a consolidated or unified order data object on their marketing flow page. What this means is that KnoCommerce cannot pull all of the data that it needs from one place. As a way of working around this, we have created an adjusted script that pulls data from the local storage in the customer browser. This works almost all of the time because order data will live in the local storage until the survey displays to the customer. In the extremely rare case that data does not exist, the survey will simply not display. There is no error message, and the survey will simply not appear on the page and will have no negative impact on the appearance of the confirmation page.
Custom Integration
The first step will be to set up your Custom Integration. Even if you're a Shopify store on the back end using Funnelish, you'll still need the Custom Integration in order to deploy on Funnelish (you can also run surveys in both locations if you choose).
Go to our Custom Integration help doc and follow steps 1 and 2 to get the info you'll need. Then use the HTML below (in combination with the Kno API Key and Kno embed script snippet) to create the code you'll need in order to display your surveys correctly in Funnelish.
<div id="knocommerce-container">
</div>
<style>
.kno-app {margin: 0px auto;}
</style>
<script>
function KnoGetCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
var customer_email = localStorage.getItem("fnsh.core.customer.email");
var customer_phone = localStorage.getItem("fnsh.core.customer.phone");
var customer_firstname = localStorage.getItem("fnsh.core.customer.first_name");
var customer_lastname = localStorage.getItem("fnsh.core.customer.last_name");
var customer_address = localStorage.getItem("fnsh.core.customer.shipping_address");
var customer_city = localStorage.getItem("fnsh.core.customer.shipping_city");
var customer_zip = localStorage.getItem("fnsh.core.customer.shipping_zip");
var customer_state = localStorage.getItem("fnsh.core.customer.shipping_state");
var customer_country = localStorage.getItem("fnsh.core.customer.shipping_country");
var order_id = STEP.path;
var price = KnoGetCookie('funnelish_order_value');
window.Kno = {
kno_id: 'REPLACE_WITH_API_KEY',
customer: {
platform: 'FUNNELISH',
shop: 'REPLACE_WITH_BRAND_DOMAIN',
email: customer_email, //required if no phone
phone: customer_phone, //required if no email
first_name: customer_firstname,
last_name: customer_lastname,
address1: customer_address,
city: customer_city,
zip: customer_zip,
province: customer_state,
country: customer_country
},
order: {
id: order_id,
total_price: price,
currency: 'USD'
},
survey: {
selector: 'div#knocommerce-container'
}
};
</script>
<!-- Replace whole line with embed script snippet-->
Integration with Funnelish
The last step will be to drop the combined code from above into Funnelish.
First, you'll need to go to the Thank You page in Funnelish and add a Custom HTML block. This will create the container where you can drop the above code as well as choose the location for your survey in your funnel.
Next, you can drop the code from above into the Custom HTML block. Click save and your surveys will be live!
Happy surveying! And if you encounter an issue with anything, please reach out to KnoCommerce through the support chat or by emailing hello@knocommerce.com and we'd be happy to help.