Out of the box Zendesk only provides the ability to vote with a YES / NO. We have added some extra functionality on top of this, however the basic Yes/No still will send it's data into the Zendesk system.
How does it work
- Zendesk Renders it's traditional Yes or No Voting buttons
- We have supplied hidden HTML in a container with a class of 'vote-no-extra'
- When a guest selects no, we capture that event using Javascript and render a grouping of extra questions
- These questions are radio button selectors that allow the guest to select a more detailed option
- When the Guest submits this selection we call 'submitVoteTicket();'
- The function gathers data, and uses the '/api/v2/requests.json' which does not count towards typical API limits on Zendesk sites.
- The requests API does have it's own limitation of 40 requests per min per IP address. So as long as the requests are made on a client side it is safe, if a server were to queue them it could cause issues
Important*:
The request made provides a single email address, so all CSAT tickets can be filtered.
email
var email = "feedback@no-vote.com";
Zendesk Code
article_page.hbs:
Extra Vote UI
<div class="vote-no-extra ">
<span>{{dc 'hc_base_article_improve'}}</span>
<fieldset class="vote-fieldset">
<form>
<div class="vote-extra-question">
<input type="radio" name="vote-no-question" value="{{dc 'hc_dmi_vote_question_one'}}" id="questionone" required />
<label for="questionone" id = "article-vote-reason_error">{{dc 'hc_dmi_vote_question_one'}}</label>
<div class="reveal-if-active">
<textarea rows="3" placeholder="{{dc 'hc_base_vote_other_placeholder'}}" class="other-text-area" id = "questiononeother"></textarea>
</div>
</div>
<div class="vote-extra-question">
<input type="radio" name="vote-no-question" value="{{dc 'hc_dmi_vote_question_two'}}" id="questiontwo" required />
<label for="questiontwo" id = "article-vote-reason_confusing">{{dc 'hc_dmi_vote_question_two'}}</label>
<div class="reveal-if-active">
<textarea rows="3" placeholder="{{dc 'hc_base_vote_other_placeholder'}}" class="other-text-area" id = "questiontwoother"></textarea>
</div>
</div>
<div class="vote-extra-question">
<input type="radio" name="vote-no-question" value="{{dc 'hc_dmi_vote_other'}}" id="question_other" required />
<label for="question_other" id = "article-vote-reason_unsatisfied">{{dc 'hc_dmi_vote_other'}}</label>
<div class="reveal-if-active">
<textarea rows="3" placeholder="{{dc 'hc_base_vote_other_placeholder'}}" class="other-text-area" id = "question_otherother"></textarea>
</div>
</div>
<a onclick="submitVoteTicket();" class="btn vote-btn" >{{dc 'hc_base_vote_submit'}}</a>
</form>
</fieldset>
</div>
submitVoteTicket Method:
submitMethod
// Handles creating a new ticket when the user selects an option
// after they select "NO" to article voting
function submitVoteTicket() {
var canSubmit = false;
var customReason = "";
var parentId = document.querySelector('input[name="vote-no-question"]:checked').id;
parentId = "#" + parentId;
var parentOtherTextArea = parentId + "other";
if ($(parentOtherTextArea).val().length > 0) {
voteNoResponse = $('input[name="vote-no-question"]:checked').parent().find('label').text() + ' details: ' + $(parentOtherTextArea).val();
customReason = $('input[name="vote-no-question"]:checked').parent().find('label').attr("id");
canSubmit = true;
}
else if ($(parentOtherTextArea).val().length == 0) {
canSubmit = false;
$(parentOtherTextArea).css('border', "1px solid #FF0000");
}
//check if we have a selected option before submitting
if(document.querySelector('input[name="vote-no-question"]:checked') && canSubmit) {
var url = "/api/v2/requests.json";
var email = "feedback@no-vote.com";
email = email.replace(/\s/g, '');
voteNoResponse = window.location.href + " " + voteNoResponse;
var payload = {
request: {
ticket_form_id: votingTicketFormId,
requester: {
"name": "no-vote",
"email": email
},
subject: '{{article.id}}' + ' - ' +'{{article.title}}',
comment: {"body": voteNoResponse},
custom_fields: {
"id": votingTicketCustomFieldId,
"value": customReason
}
}
}
$.ajax({
url: url,
contentType:'application/json',
type: 'POST',
data: JSON.stringify(payload),
beforeSend: function() {
//show confirmation and hide the details
$('.vote-confirmation').show();
$('.vote-no-extra').hide();
}
});
}
}