Zendesk messaging gives you access to real-time or ongoing support. It lets you help customers in real time, which increases customer satisfaction. To measure the level of satisfaction with various ways and strikingly beautiful surveys, Surveypal is here to help. Check out our short intro video about the chat experience. This guide article you can set up a Surveypal feedback survey to Zendesk Chat.
Requirements:
1. You need to have Zendesk Widget installed on your web page
2. You need to have a Surveypal account and created a survey
3. You need to have Zendesk Agent Workspace activated. Enabling and disabling the Zendesk Agent Workspace
Step 1.
In Surveypal, choose a survey active on your survey listing, and copy the survey preview-link from the bottom right corner.
Step 2.
Next we need to modify the preview-link:
- replace '/form/preview?' with '/app/form/ext?'
- remove '&showPreviewBar=true' from end of the link
Original:
https://my.surveypal.com/form/preview?sid=1430071065&sh=BKXySufL8rCMwWU36r56h1OOINigHLRkXh09f5dcRT5KeOpuRQ8JpIJh5cySTMQi&showPreviewBar=true
How the link should look after changes:
https://my.surveypal.com/app/form/ext?sid=1430071065&sh=BKXySufL8rCMwWU36r56h1OOINigHLRkXh09f5dcRT5KeOpuRQ8JpIJh5cySTMQi
Step 3.
Create a script which will define which survey will be used in your chat.
Use the link created in Step 2.
Example:
<script>
window.surveyUrl = 'https://my.surveypal.com/app/form/ext?sid=YOUR_SURVEY_ID&sh=YOUR_SURVEY_HASH';
</script>
Step 4.
Either embed Surveypal script to your web page or copy content below to Javascript-file and use it from there:
<script>
function toggle(e,t){e=document.getElementById(e);e.style.display=t?"block":"none"}function createAnswerId(){var n=(new Date).getTime();return"surveypalid_xxxxxxxxxxxxxxxx".replace(/[x]/g,function(e){var t=(n+16*Math.random())%16|0;return n=Math.floor(n/16),("x"==e?t:3&t|8).toString(16)})}function addIFrame(e){var t='<iframe src="'+window.surveyUrl+"&extid="+e+'" width="342px" height="474px" frameBorder="0"/>',e=document.createElement("div");e.innerHTML=t,document.getElementById("surveyiframe").appendChild(e)}zE("webWidget:on","chat:start",function(e){console.log("chat:start:"+window.answerId),zE("webWidget","chat:addTags",[window.answerId])}),zE("webWidget:on","chat:end",function(e){console.log("chat:end - show survey");var t=document.getElementById("webWidget");t&&"100%"===t.style.width&&document.getElementById("postfeeling").classList.add("fullscreen"),zE("webWidget","chat:addTags",["survey_sent__chat"]),toggle("postfeeling",!0)}),zE("webWidget:on","chat:status",function(e){console.log(e)}),window.addEventListener("DOMContentLoaded",function(e){var t=createAnswerId();addIFrame(window.answerId=t),document.getElementById("sendsurvey").addEventListener("click",function(e){console.log("survey sent"),toggle("postfeeling",!1),zE("webWidget","close")})});
</script>
Step 5.
Add styles and div-element structure below to your web page. The div-element structure MUST be found from the web page.
NB! You may not change IDs but you can change styles and text.
Zendesk Web Widget (="chat button") on the right side of the screen
<style>
div#postfeeling{z-index:9999999;display:none;background:#1f73b7;position:fixed;border-radius:10px;bottom:16px;right:16px;width:342px;height:541px}div#sendsurvey{height:43px;width:100%;color:#fff;font-size:20px;padding-top:10px;text-align:center;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}div#sendsurvey span.close{position:absolute;right:10px;top:10px;cursor:default}div#postfeeling.fullscreen{top:0;right:0;bottom:auto;right:auto;height:100vh;width:100vw}div#postfeeling.fullscreen div#surveyiframe,div#postfeeling.fullscreen div#surveyiframe iframe{bottom:auto;right:auto;height:calc(100vh - 43px);width:100vw}
</style>
<div id="postfeeling">
<div id="sendsurvey">
<span class="label">Give us feedback</span><span class="close">X</span>
</div>
<div id="surveyiframe"></div>
</div>
Zendesk Web Widget (="chat button") on the left side of the screen
<style>
div#postfeeling{z-index:9999999;display:none;background:#1f73b7;position:fixed;border-radius:10px;bottom:16px;left:16px;width:342px;height:541px}div#sendsurvey{height:43px;width:100%;color:#fff;font-size:20px;padding-top:6px;text-align:center;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}div#sendsurvey span.close{position:absolute;right:10px;top:6px;cursor:default}div#postfeeling.fullscreen{top:0;right:0;bottom:auto;right:auto;height:100vh;width:100vw}div#postfeeling.fullscreen div#surveyiframe,div#postfeeling.fullscreen div#surveyiframe iframe{bottom:auto;right:auto;height:calc(100vh - 43px);width:100vw}
</style>
<div id="postfeeling">
<div id="sendsurvey">
<span class="label">Give us feedback</span><span class="close">X</span>
</div>
<div id="surveyiframe"></div>
</div>
Step 6.
You can change instant survey top text statement: “Give us feedback” to your choosing. Such as “Please rate our support” or similar
Step 7.
Map responses to custom Zendesk ticket fields and add possible Surveypal automations
Step 8.
You are ready to start measuring experience in Zendesk chat