Grapevine Surveys and Sufio: Professional Invoices
Integrate any Grapevine standalone survey into your Sufio: Professional Invoices using their easy-to-customize template designer and begin collecting valuable customer satisfaction and post-purchase insights.
Quick links
- What is Sufio: Professional Invoices (Sufio)?
- Why Grapevine Surveys and Sufio?
- So how do I add a standalone survey link to a Sufio template?
- What does it look like?
- That's it!
- Need any help?
What is Sufio: Professional Invoices (Sufio)?
Sufio is a Shopify app that automatically creates professional, legislation compliant invoices when orders are created, paid or fulfilled in your store. These professionally designed templates allow you to sell to both businesses and consumers worry free, ensuring that you charge the correct amount of tax for each customer.
Invoices can then be sent automatically to customers by email or they can be downloaded from your store by customers at their own convenience.
The icing on the cake... Sufio also helps you get paid faster by allowing customers to pay their invoices online.
Their experienced and friendly support team can help you to set up your invoices and taxes specifically for your store, along with additional templates such as pro forma invoices, credit notes and quotes.
Why Grapevine Surveys and Sufio?
Ok, so full disclosure...we've known Mr. Sufio (Norbert) for years, bumping into him at various Shopify meetups and conferences both in the UK and North America. Other than being a thoroughly great guy, Norbert has always stood out as an app owner completely committed to delivering the very best functionality and user experience for his customers. He has also built a very talented team who work alongside him, supporting and growing the business to its full potential.
But that's not why this integration makes sense...
If you're already gathering customer attribution insights via a post-purchase survey, our standalone survey pages can be deployed to gain further insight from your customers as they pass through each stage of the customer journey.
If you're using Sufio to create and send invoices, credit notes or quotes, then these too are key customer touchpoints where you can ask customers a question about areas of your business that you're looking to either improve or validate.
Standalone surveys open up the potential to learn more about every aspect of your business, so why not deploy them at the point of invoicing or when issuing a credit note?
So how do I add a standalone survey link to a Sufio template?
Our integration with Sufio is relatively straightforward. To begin, you'll need both Grapevine Surveys and Sufio: Professional Invoices installed into your store.
You can choose to create a standalone survey page for your normal invoices and another one for your Credit Note emails that ask slightly different questions. For example, you may want to ask "Were you happy with our returns service?" only when customers receive a credit note.
Once you have created your standalone survey pages within Grapevine Surveys, you will need to copy or make a note of your standalone survey link or links and then head on over to the Sufio app.
Within the Sufio app, click on Design in the left-hand menu:
The click on the Edit Code link located at the top of the left-hand menu:
Add the code snippet into the code editor
Within the index.html code editor on the left hand side, locate the document notes section (search the code for document.notes).
It will look something like this:
<!-- Notes -->
<div id="{{ document.thanks.id }}" class="{{ document.thanks.css_classes }}">{{ document.thanks.text }}</div>
<div id="{{ document.legal.id }}" class="{{ document.legal.css_classes }}">{{ document.legal.text }}</div>
<div id="{{ document.notes.id }}" class="{{ document.notes.css_classes }}">{{ document.notes.text }}</div>
Copy and insert the following code snippet somewhere within that section of code:
{% if order %}
{% if document.is_invoice %}
<div class="grapevine_survey_question">Could you let us know what made you shop with us today?</div>
<div class="grapevine_survey_link"><a href="https://store-name.myshopify.com/tools/survey/64b51408bf775?customer_id={{ customer.id }}&order_id={{ order.id }}">Feedback survey</a></div>
{% elif document.is_credit_note %}
<div class="grapevine_survey_question">How was your return and refund experience with us?</div>
<div class="grapevine_survey_link"><a href="https://store-name.myshopify.com/tools/survey/1e5eeec5e4da5?customer_id={{ customer.id }}&order_id={{ order.id }}">Feedback survey</a></div>
{% endif %}
{% endif %}
Edit the standalone survey link
Please make sure that you change the urls in the example code for the standalone survey page links that you copied from the Grapevine Surveys app earlier in this step-by-step guide.
You can see in the code snippet that there are two possible options. One checks if the document being viewed is an invoice (document.is_invoice) and the other checks if the document being viewed is a credit note (document.is_credit_note).
If you are using a different standalone survey for invoices and credit notes, then please make sure that you swap the urls into the correct section of code:
Edit the intro text to suit your survey question
Make any changes to the intro text within the code snippet to suit the type of survey you are linking to. Our examples are as follows, but you will need to repurpose them to tie in with the question you are asking in your survey:
Could you let us know what made you shop with us today?
How was your return and refund experience with us?
Adding identifiable data to the standalone link
Sufio also supports the use of identifiable URL parameters within the standalone survey link. By preloading the standalone survey link with order/customer data, the survey respondent will be able to submit their survey without needing to fill in their name and email address first.
As Sufio's main function is to produce invoices, there's typically always a Shopify order id and a customer id associated with the invoice or credit note.
Therefore, please remember to append the following to your standalone survey link URL:
?customer_id={{ customer.id }}&order_id={{ order.id }}
Styling the survey question and button
It is entirely your choice on how to style the survey question and button. The code below is a starting point for customising the appearance.
Still within the Sufio Design Editor, click on the styles.scss tab at the top of the code editor pane:
Scroll to the bottom of the code and then place the following code at the bottom of the page:
// Grapevine Surveys
.grapevine_survey_question {
font-weight:400;
}
.grapevine_survey_link a:link, .grapevine_survey_link a:visited {
background-color: #119c50;
color: #fff;
font-weight: 700;
padding: 12px 18px;
text-align: center;
text-decoration: none;
display: inline-block;
}
.grapevine_survey_link a:hover, .grapevine_survey_link a:active {
background-color: #1ac467;
}
Don't forget to save!
Make sure that you Save your changes in Sufio and then click Publish to make your changes live.
What does it look like?
As mentioned, it's entirely your choice on how to style the survey question and button, but using the example code provided in this article, this is how the standalone survey link will appear in your HTML invoice:
It will appear almost identically within your PDF invoice, however, the button in the PDF will not change color when hovered over.
That's it!
Customers receiving your Sufio invoices and credit notes will now be presented with the opportunity to take a customer satisfaction survey.
Need any help?
If you need any help adding standalone survey page links into your Sufio templates then please do just get in touch and we will do our best to help.