Prompt to Submit Feedback After Voting

20 Comments

  • Tal Admon

    Hi Dave,

    We have found a nice way of handling user feedback on negative votes - here it goes:

    1. Add a new text field called "Originated Article" - note its ID (31107517 in my example).

    2. Add a new form called "Article Feedback" - note its ID (155127 in my example).

    3. Edit your theme, and the Article page HTML section add the following code after the article-vote-controls div (change the form ID, and the text to your liking):

    <div class="negative-followup__c">
    <p>We're sorry to hear that!</p>
    <a href="/hc/en-us/requests/new?ticket_form_id=155127">Please tell us why.</a>
    </div>

    Add the following corresponding CSS:

    /* ---- negative followup ----------- */
    .negative-followup__c {
    display: none;
    border: 1px;
    border-color: #ccc;
    border-style: solid;
    padding: 10px;
    margin: 18px 0px;
    width: 50%;
    text-align: center;
    background: #ccc;
    }

     

    4. Add the following script to the same Article page tab, right in the beginning:

    <script>
    $( document ).ready(function() {
    $('.article-vote-controls').on('click',function(){
    setTimeout(function(){
    if ($('.article-vote-controls>a[title="No"]').attr('aria-selected')=='true') {
    $('.negative-followup__c').show(500);
    } else {
    $('.negative-followup__c').hide(150);
    }
    },600);
    });
    });
    </script>

    This will bind the "click" actions on the voting buttons and show/hide the negative-feedback section.

    5. Add the following script tag to the New-Requests page, right at the top. change the field ID from step 1:

    <script>
    $( document ).ready(function() {
    $('#request_custom_fields_31107517').val(document.referrer)
    $('.request_custom_fields_31107517').hide();
    })
    </script>

    It will populate this field with the URL of the origin article, and hide it from the end user (you can omit the "hide" action so it will be visible to and editable by the user - up to you).

    6. Publish all, and you are done.
    Your users will see the originated article info on their request page.

    2
  • Morgan King

    Sure thing,

    All I changed was the Article page and I wanted to do some different styling:

    At the top I added

    <script language="JavaScript">
    function toggletext(cid)
    {
    if ( document.getElementById(cid).style.display == "none" )
    {
    document.getElementById(cid).style.display = "block";
    }
    else
    {
    document.getElementById(cid).style.display = "none";
    };
    }
    </script>

     

    Then for my 'No' vote I put: 

    <p style="display:inline-block" onclick="toggletext('mytext')">{{vote 'down' class='article-vote-down' selected_class='article-voted' role='button'}}</p>

     

    Then where I wanted the prompt to appear I put:

    <div id="mytext" style="display: none;">
    <a target="_blank" style="border:0" class="enhancement" href="/hc/en-us/requests/new#feedback"><div style="margin-top:-30px" class="enhancement">I'd Like to Submit Feedback</div></a><br /></div>

    1
  • Dave

    Thank you very much for the help, Tal!

    0
  • Dave

    Tal,

    Everything seems to be working correctly except the article URL isn't populating into the ticket. Are there any specific settings that must be applied on the field or the form?

    0
  • Tal Admon

    Hi Dave,

    Double-check if the field ID you created matches the one in your code on step 5.

    Another thing I noticed is that if a user forgets to fill out the subject or the message of the ticket form, the page will get refreshed on submission and the previous referral (the one we are looking for) will be lost.

    To prevent this, replace the code on step 5 to the one below.
    This will add a prefix to the subject and description right as the page gets loaded. 

    <script>
    $( document ).ready(function() {
    $('#request_custom_fields_31107517').val(document.referrer)
    $('.request_custom_fields_31107517').hide();
    if (window.location.search.indexOf!='ticket_form_id=155127') {
    $('#request_subject').val('[Article Feedback] - ');
    $('#request_description').val('Description:\n');
    }
    })
    </script>

    If this still doesn't help, please contact me so I can review this with you directly.

    0
  • Dave

    Still no luck. Here is the field I created:

    And here is the code for the field:

    And here is the form:

    And here is the form code:

    And here is the ticket that I was able to submit:

    Not sure what I'm doing wrong :-(

    0
  • Tal Admon

    Hi Dave,

    I think I know what went wrong: The field should be marked as Visible to End User - so it will appear in the form.

    That is why there is a command to hide it from the user - so it will not be shown in the page when the end-user is filing his complaint.

    It is still there behind the scenes, and when the end-user click "Submit", it will be sent out like all the other fields.

    Let me know if that worked.

    Tal

    0
  • Dave

    Tal,

    Sorry. I made that change, but the article info still isn't showing up anywhere on the tickets.

    0
  • Morgan King

    Hey Tal,

     

    I stumbled on this and when I try to add it, the "we're sorry" shows immediately when you get to the article, have you found a way around this?

     

    Thank you,

    Morgan

    0
  • Jessie Schutz
    Zendesk Team Member

    Hey Morgan!

    Tal hasn't been around for a while, so I'm not sure whether he'll see this but I'll see if I can help. Can you post a screenshot of your code so I can take a look at it?

    0
  • Morgan King

    Hello Jessie,

    Thank you for reaching out - I actually got it worked out by adjusting the reference points. :)

    0
  • Jennifer Rowe
    Zendesk Documentation Team

    Glad you got it working, Morgan!

    Is the change you needed to make something I could edit in Tal's original post so that other users can implement this too? Let me know!

    Thanks!

    0
  • Morgan King

    I will add I opted out of doing the case linking because it also did not seem to be working so I added the field to my support form to prompt people instead.

    0
  • Jennifer Rowe
    Zendesk Documentation Team

    That's awesome. Thanks for reporting back and sharing your code!

    0
  • Stefano Nguma

    Hi ...

    Just curious if anyone has got the submit feedback script to work in Copenhagen 2.4.0. I'm not much of a developer but the reference to the anchor tag and title="No" in the script does not apply anymore. When I inspect the code in the console I see this when the No button is clicked in the old and new version:

    Copenhagen 1.4.10 (script works with this version)

    <a class="button article-vote article-vote-down" aria-selected="true" role="radio" rel="nofollow" title="No" href="#"></a>

     

    Copenhagen 2.4.0 (script does not workin this version)

    <button type="button" class="button article-vote article-vote-down button-primary" aria-label="This article was not helpful" aria-pressed="true">No</button>

    Can anyone advise on how to revise the script so it works for the latest theme?

    Thanks!

     

    Stefano

    0
  • Kay
    Community Moderator

    Have you changed the IF statement to?

    if ($('.article-vote-controls>button.article-vote-down').attr('aria-pressed')=='true') {
    0
  • Stefano Nguma

    Hi Kay ...

    Appreciate the help ... unfortunately I have tried that and it doesn't work. Any other suggestions greatly appreciated.

     

    Stefano

     
    0
  • Kay
    Community Moderator

    I believe jQuery was removed. Try it without jQuery.
    That means you have to replace everything where there is a $ sign.

    The if statement needs to change like this.

    if (document.querySelector('.article-vote-controls>button.article-vote-down').attr('aria-pressed')=='true') {
     
    0
  • Stefano Nguma

    Thanks much, Kay! I got it working finally. I added the google hosted library to the document head file to load jquery so didn't need to revise the script to remove jquery.

    Thanks again for the assistance!

    0
  • Kay
    Community Moderator

    For everybody reading this; I rewrote the script (step 4 and 5) to work with the new theme and more importantly, without jQuery. This is a Vanilla Javascript version which you just need to add to your script.js file.

    // Without jQuery
    // Define a convenience method and use it
    var ready = (callback) => {
    if (document.readyState != "loading") callback();
    else document.addEventListener("DOMContentLoaded", callback);
    }

    function negativeFollowUp(e) {
    document.querySelector('.negative-followup__c').style.display = "block";
    }

    ready(() => {
    // only execute on article pages
    if (window.location.href.indexOf("/articles") > -1) {
    document.querySelector('.article-vote-controls>button.article-vote-down').addEventListener('click', function(e){ negativeFollowUp(e) });
    }

    // only execute on the requests page
    if (window.location.href.indexOf("requests/new") > -1) {
    document.querySelector('#request_custom_fields_31107517').val(document.referrer);
    document.querySelector('.request_custom_fields_31107517').style.display = "none";
    }
    });

     

     

     

     

    0

Please sign in to leave a comment.

Powered by Zendesk