If you or your team are building out headless Shopify solutions, introducing the same functionality provided by 3rd party Shopify apps can sometimes cause unnecessary stress.
With that in mind, we provide an elegant and stress free solution to surface customer experience surveys at any stage of your hand crafted headless storefront.
How do embedded surveys work?
A small snippet of code is all that's needed to embed attribution surveys, returning customer surveys, shipping experience surveys and more in the right place at the right time.
Once you've created your survey, check the Embedded option within the Manage Visibility pane in the Survey editor and hit the Save button:
Close the Survey editor.
In the survey overview page, click on the More actions dropdown in the top right hand corner and select the Embedded survey details option:
You will then see two code blocks to chose from. Both of these are specifically created for your survey:
The first code block will embed the survey with some basic CSS positioning and styling into your page.
The second code block will embed the survey with minimal CSS styling into your page.
Decide on which code block you'd like to use and select the Copy icon to the right of the code block. This will copy the code to your clipboard.
Adding the embedded survey code snippet to your page
It's entirely up to you where to embed your survey, it just needs to be rendered as HTML. It should, therefore, be able to be embedded on any web page or within any custom liquid / HTML block in your theme editor.
Please Note:
The grapevine-container element can be anywhere in the page, however, it must be above the script element.
The script will then load the required survey and css into your page.
Make survey responses identifiable with GET variables
If you're embedding a standalone survey page and would like to associate responses to a particular order or customer (see Collecting anonymous or identifiable survey responses), then these parameters can be added to the embedded page URL.
We have an article that explains how GET variables can be used to identify the survey respondent without them needing to enter their name and email address before submitting their survey:
Pre-populating survey responses with GET variables
By adding GET variables to your headless/embedded page URL, the embedded survey will be able to act on those variables.
Using your preferred email sending platform, you can distribute links to a grapevine survey that execute on a page within your headless storefront.
Let's say you have embedded your survey into the following page:
https://mystore.com/returns-survey
Pre-populating with first_name, last_name and email:
https://mystore.com/returns-survey?first_name=David&last_name=Crane&email=davecrane@someurl.com
Pre-populating with customer_id:
https://mystore.com/returns-survey?customer_id=8716523
Pre-populating with order_id:
https://mystore.com/returns-survey?order_id=4827341741167
Each of these approaches will hide the personal data fields at the bottom of the survey. Customer's will be able to submit their response immediately after selecting or typing our their answer.
You can also use an external_id parameter if you're looking to associate the response with a customer or interaction within another system.
https://mystore.com/returns-survey?external_id=9876543210
Find out more about using an external id with standalone and embedded surveys.
Need any help?
Please do get in touch if you have any questions about the embedded survey feature or standalone survey pages or any other Grapevine Surveys features.