If you're ever wanting to survey customers who are arriving on a particular landing page or you are wanting to deploy a quiz-style survey to aid your customers in the selection of the product that would work 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. Save that somewhere safe (you'll need it within 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're wanting 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 -> Three Dots -> 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 is 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 -> Three Dots -> Edit).

Then click the 'Save' button in the bottom right (the yellow floppy disk). Then on the following 'You did it!' page with confetti, Publish the survey AND Add to Custom Confirmation page. 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!