Forums/Community/Community tips & tricks

Take the ticket widget (Zendesk Classic)

Skip Moore
posted this on June 03, 2010 07:41

Note: This article applies to Zendesk Classic. The functionality described here exists as a macro in the current version of Zendesk. For more information, see Ticket handling shortcuts.

 

This widget will assign a ticket to you with out having to update the ticket.  If the ticket is already assigned to another agent a pop up will give you the option to steal the ticket or cancel the take over. If a group isn't assigned to the ticket it will set the group to the frist group the agent is a member of. Because the assignment of the ticket is done in the back end you won't see any change in on the ticket page, other people will see it in both the views and the ticket. 

Here is the ticket view Just click on the button Take the Ticket

_598__This_is_another_quick_test_ticket._Hey__hey__it_should_include_correct_credentials._.png

 

After you click take the ticket  you will see in the widget that the owner = you

taketheticket.png

 

If someone else has taken the ticket then you will get the pop up where you can steal the ticket or cancel the assignment.

Chromium-3.png

 

Just create a custom widget and drop this code in. You can also download it from github 

<div id='stealtheticket'>
<div id='stealtheticket'>
    <input type='button' value='Take the Ticket' onclick='do_action();'>
    <div style='padding: 4px; font-weight: bold; font-size: 18px;'>
        <div id='stealtheticket_status'></div>
        <div id='stealtheticket_error'></div>
    </div>
</div>

<script type="javascript">
    // This is the main bit of code, the action that occurs when the "Do" button is hit.
    // All other methods should be put into their own little sections
    var current_callbacks = {};

    log_error = function(arg) {
        $('stealtheticket_error').innerHTML = arg;
    }

    log_status = function(arg) {
        $('stealtheticket_status').innerHTML = arg;
    }

    fade_status = function(arg) {
        setTimeout( function() {
            log_status('');
        }, 3000);
    }
do_action = function() {

        var current_action = 'steal_ticket';

        if (current_action) {
            var callback = current_callbacks[current_action];
            callback();
        }
    }


    Event.observe(window, 'widgets:load', function() {
        current_callbacks['not_yet'] = function() {
            log_status("Sorry, that function isn't done yet. :(");
            fade_status();
        }

        current_callbacks['steal_ticket'] = attempt_steal;

    });

    get_current_user_id = function() {
        var _current_user_id = currentUser.id;
        return _current_user_id;
    }

</script>


<script type="javascript">
    // this is all the code for the ticket stealing function.
    var ticketId = ticket_id;
    var can_update_ticket = false;
    var assignee_name = 'Unknown';

    attempt_steal = function() {
        log_status("Checking one last time...");
        check_on_ticket(function() {
            do_steal();
        });
    }

    var rootTicket = {};
        rootTicket.ticket = {};
        rootTicket.ticket.assignee_id = currentUser.id;
    var childCall = JSON.stringify(rootTicket);

    do_steal = function() {
        log_status('Starting...');

        var do_it = false;
        if (can_update_ticket == false) {
            do_it = confirm("This ticket is already owned by " + assignee_name + "\n\nClicking OK will assign this ticket to you.");
        } else {
            do_it = true;
        }

        if (do_it) { 
            $j.ajax('/api/v1/tickets/' + ticketId + '.json', {
                type:'PUT',
                contentType: "application/json",
                accepts: "application/json",
                data: childCall,
                statusCode: {
                  200: function(){
              log_status("Owner = You");
              fade_status();
            }
                }
            });            
        }
    }

    check_on_ticket = function(cb_on_success) {
        log_status("Attempting to find owner.");

        new Ajax.Request('/tickets/' + ticket_id + '.json', {
            method:'GET',
            asynchronous: true,
            onSuccess: function(transport) {
                var obj = transport.responseText.evalJSON();
                ticket_id = obj['nice_id'];
                assignee_name = 'None';

                agents.each( function(row) {
                    if (row['id'] == obj['assignee_id']) {
                        assignee_name = row['name'];
                    }
                });

                log_status("Current Owner: " + assignee_name);

                if (assignee_name == 'None') {
                    can_update_ticket = true;
                } else {
                    can_update_ticket = false;
                }

                if (cb_on_success !== undefined) {
                    cb_on_success();
                }
            },
            onException: function(transport) {
                log_error('exception: ' + transport.responseText);
            },
            onFailure: function(transport) {
                log_error('failure: ' + transport.responseText);
            }
        });
    }

</script>
 

Comments

User photo
Mikkel Svane
Zendesk

Who did the CSS? It looks awesome.

June 03, 2010 09:08
User photo
Dave Hannan
panopto

I keep getting this:

Owner = You
exception: undefined
June 04, 2010 19:33
User photo
Skip Moore
Zendesk

Hey Dave,

I have updated the code on pastie and here. Also checked out your Zendesk and fixed it there.

Skip
Zendesk Support 

Mikkel it's from unify 

June 04, 2010 22:19
User photo
Dave Hannan
panopto

Works great now! Thanks Skip!

June 05, 2010 07:09
User photo
Dave Hannan
panopto

Hi Skip,

This was working fine over the weekend but now when I click on it, it's logging the call to our dev group and not to me anymore. Any idea what's up?

Regards,

Dave

June 09, 2010 06:03
User photo
Dave Hannan
panopto

Check that. It's actually doing the right thing, but maybe there's a UI bug or something. See below.

Click take ticket

F5 in browser (I'm using FireFox 3.6.3)

It shows assigned group to "Dev" even though the ticket is actually assigned to me

If I click off to another page and then back, it shows the right thing.

 

Not a big deal then, just thought I would let you know.

June 09, 2010 06:51
User photo
Skip Moore
Zendesk

Thanks Dave - I will look into to it

June 09, 2010 20:38
User photo
Henrique Vlcek

Excelent

September 29, 2010 08:23
User photo
Kathy Waller

Hi Skip, love it. I'm getting a series of numbers displayed in the widget. Please let me know what I've done wrong. thank you.

September 29, 2010 08:57
User photo
Henrique Vlcek

I would like to make a widget in side bar to embed a tag in accordance with the radio button that was selected in the form, and after this, the form in the side bar will no longer displayed, anyone know how I can do this?

September 30, 2010 13:25
User photo
Skip Moore
Zendesk

@Kathy can you send me a screenshot?

@Henrique you will have to use a bit of jquery to place a tag and then add a some dom to use CSS it hide the widget. 

November 03, 2010 10:55
User photo
Mathew Patterson

Thanks,

This is super handy and works well for our needs.

November 15, 2010 20:19
User photo
David Goldberg
Callidus Software, Inc

I need some help making this work in IE8, it seems that the Event.observe(), or so I think, is not working properly.

 

Any ideas?

March 02, 2011 08:09
User photo
Addy Naik

Hi Skip - like mikkel said - the css is awesome. any chance you could share that?

March 15, 2011 19:38
User photo
Skip Moore
Zendesk

@Addy here you go https://github.com/skipjac/zendesk-widgets/blob/master/techassistan...

@David what kind of issues are you seeing?

March 20, 2011 22:12
User photo
David Goldberg
Callidus Software, Inc

When I try to use this widget in IE8, it loads fine, however when I click the button I receive the following error, and nothing more happens:

 

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; Media Center PC 6.0; InfoPath.2; MS-RTC LM 8; .NET CLR 1.1.4322; .NET4.0C; .NET4.0E; .NET CLR 3.5.30729; .NET CLR 3.0.30729)
Timestamp: Mon, 21 Mar 2011 19:52:42 UTC


Message: Object expected
Line: 3
Char: 1
Code: 0
URI: https://cald.zendesk.com/tickets/24?col=2358560

 

It works fine under Firefox, however IE8 is our corporate standard so I need to make it work there.

 

i did pull up the code for the page, and the associated widget.  It apppears that IE8 does not treat Event.observe() as expected (I could be wrong), as such the action receives the above error.

March 21, 2011 12:55
User photo
Addy Naik

Thank you sir!

March 22, 2011 04:51
User photo
Marc LaFountain
tumblrarchive

Hey, Skip. Great work as always. Is there any way to keep the red "This ticket has been updated since you started viewing it." warning banner from appearing at the top of the ticket after you have used the Take the Ticket widget? I'm guessing not, but thought I would ask.

Marc  :-)

April 13, 2011 06:45
User photo
Joshua Vienneau

This widgit no longer functions.  My agents are still using the "old" interface, but I suspect this no longer working is related to the release of Lotus.  Ideas on how to get this working while we transition to the lotus interface?

September 13, 2012 13:16
User photo
Skip Moore
Zendesk

@Joshua, this feature is now built into the new Zendesk. Right next to the assignee field you can see a take it link

September 13, 2012 13:19
User photo
Marc LaFountain
tumblrarchive

Hey, Skip. We love using this in the old/current version of Zendesk. Any chance it can come back?

Marc  :-)

September 13, 2012 13:28
User photo
Skip Moore
Zendesk

@Marc is it broken in Classic?

September 13, 2012 14:24
User photo
Marc LaFountain
tumblrarchive

Hey, Skip. Yes, it appears to be broken in classic for us. I think Joshua is saying it is broken for him in classic as well.

Marc  :-)

September 13, 2012 15:30
User photo
Skip Moore
Zendesk

@Marc @Joshua I have update the code and the link to the code. Please let me know if you have any issues. 

September 13, 2012 17:39
User photo
Marc LaFountain
tumblrarchive

@skip So, I shoudl just be able to copy the script text at the top of this [age into a widget? If so, it isn't working for me. I click the button in the revised widget and nothing happens. Sorry!

Marc  :-)

September 14, 2012 07:12
User photo
Skip Moore
Zendesk

@Marc check it now. I fixed it on your site. 

September 14, 2012 08:30
User photo
Marc LaFountain
tumblrarchive

@skip It now works beautifully! Thanks!

Marc  :-)

September 14, 2012 09:57
User photo
Marc LaFountain
tumblrarchive

@skip Take the Ticket used to update the Assignee menu in the currently open ticket. Now, it seems to update Assignee on the backend as always but no longer updates the Assignee menu in the currently open ticket.

When we are Solving a ticket, Assignee is required. So, we are having to manually update Assignee even though Take the TIcket used to do that for us. Any ideas?

Marc  :-)

September 17, 2012 08:56
User photo
Skip Moore
Zendesk

@Marc I will look into it. Think it has to do with setting the group first.

September 17, 2012 12:42
User photo
Rodney Stalnaker

Any update on this?  The old widget would immediately assign the ticket to the agent who clicked the button.  The new link in the new Zendesk view doesn't immediately assign the ticket to the agent.   You have to update the ticket before the agent is assigned.  Not nearly as helpful. 

July 17, 2013 15:25
User photo
Andrea Saez

Hi Rodney,

This exists in the new zendesk. It exists as a Macro now

July 18, 2013 08:53
User photo
Andrea Saez

Rodney - ps, make sure the Macro is set up correct. When I click on 'take it!' it immediately assigns it to me. After I fill out all the information I just hit the 'submit' button at the bottom and voila, all good.

July 18, 2013 08:53
User photo
Rodney Stalnaker

Maybe I'm not explaining myself well.  Let me try again.  In the old zendesk I'd click on a ticket that was unassigned . When I clicked the Take the ticket button that ran the widget, the ticket would immediately be assigned to me and it was taken out of the view of unassigned tickets.  

 

In contrast, with the new Zendesk, when I use the take the ticket macro, the ticket remains unassigned until I click the submit button for the ticket.  


In the time that I take the ticket, lookup an answer and type it out, someone else could have opened the ticket and assigned it to them. 

July 18, 2013 09:57
User photo
Laura D.
Zendesk

Hi Rodney, 

You're right about there being a version of this widget that would take a ticket assigned this way out of the Unassigned tickets view (there was at least one other version of this widget that didn't do that).

I checked with Skip and currently there aren't plans to build an app for new Zendesk to do this - that's not to say never, just not right now.

The "take it" link above the assignee box in new Zendesk plus a keyboard shortcut for Submit result, I think, in similar function. Also, as Andrea suggested, a macro that assigns the ticket to the current agent is another good alternative, though it also doesn't take it out of the Unassigned view until you hit Submit. I know doing this with the link or with a macro is somewhat different than the Classic workflow but hopefully the added speed of keyboard shortcuts helps smooth things out. You might also consider hitting Submit to assign it to yourself before responding to the customer if you're concerned about other agents taking the ticket.

In regards to that last issue, there are a few features to help prevent this, one of which is the warnings you get as other people update tickets you have open (blue and yellow banners on the left side of the ticket). For tickets you already have open they let you know when the ticket has been updated by someone else - a banner displays a message that the ticket has been updated and the update is automatically displayed in the ticket. 

 

July 19, 2013 11:08
User photo
Jennifer Rowe
Zendesk

BTW, I updated this doc to say that it's for Zendesk Classic. And I updated the docs where we describe the Take it! link and macro to say that neither of those assign the ticket to you until you click Submit.

Rodney, thanks for pointing that out.

July 19, 2013 11:17