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>
Add this script to your web page before closing body tag.
Step 4.
Embed below script to your web page before closing body tag. You don't need to edit it anyhow.
<script>
function toggle(e,t){var n=document.getElementById(e);n.style.display=t?"block":"none"}function createAnswerId(){var e=(new Date).getTime();return"surveypalid_xxxxxxxxxxxxxxxx".replace(/[x]/g,function(t){var n=(e+16*Math.random())%16|0;return e=Math.floor(e/16),("x"==t?n:3&n|8).toString(16)})}function addIFrame(e){var t='<iframe src="'+window.surveyUrl+"&extid="+e+'" width="342px" height="474px" frameBorder="0"/>',n=document.createElement("div");n.innerHTML=t,document.getElementById("surveyiframe").appendChild(n)}zE("webWidget:on","chat:start",function(e){addIFrame(window.answerId),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("load",function(e){var t=createAnswerId();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 to your web page.
You can select if you want the Zendesk Web Widget (Chat) button to left side or to right side of the screen.
NB! Do not change IDs but if needed you can change styles.
Zendesk Web Widget (="chat button") on the right side of the screen
Add below style element inside your web page head tag:
<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>
Zendesk Web Widget (="chat button") on the left side of the screen
Add below style element inside your web page head tag:
<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>
Step 6.
Add below div structure inside your web page body tag:
<div id="postfeeling">
<div id="sendsurvey">
<span class="label">Give us feedback</span><span class="close">X</span>
</div>
<div id="surveyiframe"></div>
</div>
You can change instant survey top text statement: “Give us feedback” to your choosing. Such as “Please rate our support” or similar.
Step 7.
Now your chat is ready. Next you can map responses from survey to custom Zendesk ticket fields.
When you test your integration, please note that it might take 15 minutes before answer information is updated to ticket fields.
You can also add Surveypal automations to your survey which will send notification emails after new responses.
Step 8.
You are ready to start measuring experience in Zendesk chat.