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.
SECOND NOTE: This feature oftentimes requires significant developer resources to implement correctly. Please do not attempt this integration without consulting developers. KnoCommerce support is happy to answer questions and provide suggestions, but will not be able to configure the integration itself.
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;
if (isNaN(order_id)) {
order_id = Math.floor((Math.random() * 1000000000000) + 1).toString();
}
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.
NOTE: The code does NOT belong in the Custom Code section of the page. The survey won't render and won't be visible if the code gets inserted there.
First, you'll need to go to the Thank You page in Funnelish, click Edit Page, and open up the Quick Add menu. From there, add a Custom HTML block by clicking and then dragging into the location on your page where you want your survey to sit.
With the Custom HTML element selected on your page, then click the Basic settings menu option and the Edit Custom HTML button.
Next, you can drop the code from above into the Custom HTML block.
NOTE: Make sure that you change the kno_id, customer.shop, order.currency, and the script source tag and the very end of the code. Save the Custom HTML changes.
Click Save Changes at the top of your Thank You Page and your surveys will be live!
NOTE: If you have multiple views for Desktop, Tablet, and Mobile, you'll need to update the survey container to display on all of them, but beware creating duplicate surveys within the Thank You Page!
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.