If you ever want to survey customers who are arriving on a particular landing page, or you want to deploy a quiz-style survey to help your customers select the product that works best for them, this help doc walks you through all the steps required to make it happen!

Enable Custom Integration

For Shopify stores, you'll need to enable the Custom integration in order to deploy this feature. Go to KnoCommerce's integrations page and click 'Connect' next to the Custom integration option.

Then you'll need to enter your website domain (not your myshopify.com URL, but the displayed domain), then click Save.

After you click save, the system will create an API key. Click the settings for custom integration, then save it somewhere safe (you'll need it in the next couple of steps).

Embed Script Snippet

Navigate to your KnoCommerce survey settings, then choose the Miscellaneous tab. Copy the script snippet (labeled with the 'script src') pictured below. Your script snippet will have your own store-specific combination of numbers and letters.

Save this script snippet in the same place as your API key.

Survey ID

In order to scope just the survey that you want to display in this location, you'll need to pull the survey identifier from KnoCommerce to place into the script.

Open up the survey editor (Surveys -> Edit), as shown below.

Then, when the editor opens, copy the survey ID from the URL in the browser. At the time this help doc was written, this was the only way to pull that survey ID data. Save this Survey ID to use later.

Note: This must be done after you save your survey for the first time.

Combine Full KnoCommerce Script

You'll need to build the following script using the previously copied API key, survey ID, and the embed script snippet. You'll combine all three of those with the following script to get the final code to paste into your website.

IMPORTANT: Make sure to replace the API Key, the Survey ID, AND the last line with the embed script snippet.

<div id="kno-script-container"></div>
<script>
      window.Kno = { 
        kno_id: 'REPLACE_WITH_API_KEY', // this is the API key found in the "custom" integration
        anonymous: true,
        survey : {
            selector: 'div#kno-script-container', // Any element using above container for now
            id: 'REPLACE_WITH_SURVEY_ID'
        }
      };
</script>
<!-- replace whole line with embed script snippet -->

Option 1: Keep the survey anonymous

The default behavior for this script will be to keep survey responses anonymous. This will disconnect the survey responses from any sort of customer record, meaning the data you collect will only be useful in the aggregate.

Behavior: The survey will not ask for an email at the beginning and will allow the customer to submit the survey without submitting their email or phone number. The data will not be connected to the customer profile.

Option 2: Add email collection to the end of the survey

You'll need to include the anonymous: true snippet from Option 1 in the full code block, but then you'll add an email collection question at the end of the survey. It should look something like this:

Check the 'Update Customer Email' box to connect the survey responses to the customer profile
Check the Required box to require an answer to the question before fully submitting the survey. This can be useful if you're including a promo code of some kind as a reward for submitting the survey.

Behavior: The survey will not require an email at the front end of the survey, but will have an option (or a requirement, depending on your settings) to submit the email at the end of the survey.

Recommendation: We always recommend connecting survey data to customer data, as you can create and analyze segments of your customers when the two are connected. There might be use cases for your particular business where one of the other options might be necessary, but the vast majority of use cases should stick with the non-anonymous versions.

Add Combined Script to Website

Place the combined script from above (code block, API key, survey ID, and embed snippet) into the code for the page on your website where you want to display it.

You can definitely edit the HTML and the CSS on the page, but you can also edit the CSS for the survey through our Custom CSS editor. Check out our CSS help doc for more info.

Deploy Survey

The last step will be to turn on the survey and deploy it to the landing page. This requires some particular steps from normal Shopify deployment techniques.

Go into the survey builder to edit the survey you want to deploy (Surveys -> Edit).

Then click the 'Save changes' button in the top right. Then, publish the survey AND 'Embed in a webpage'. Do NOT deploy it to Shopify, as that will put it on your confirmation page instead of the landing page.

And that's it! Let us know if you have any questions or if you need some assistance by reaching out to hello@knocommerce.com or opening the support chat!

Landing Page/Quiz Survey Style