Forums/Community/Support tips & notes

Moving Your PopUp to a Tab

Adam
posted this on June 12, 2012 16:24

1. Introduction

All of the code from this lesson is available on GitHub @ https://github.com/apanzerj/Former-For-Zendesk
Objective: To open the ticket creation form we added to a popup in Lesson 2 using a graphical tab that is placed along the side of the Web browser, similar to the Zendesk Feedback Tab.  The final product will look like this: http://jsfiddle.net/apanzerj/vGshK/ (click the Support tab). 
Tools: You'll need a graphic of the word you want to use for your feedback tab. In this case we will be using a transparent PNG with the words "SUPPORT" in white. This graphic needs to be hosted somewhere, preferably on your own site. I'm using my Dropbox Public folder to host mine.

2. Make Your Graphic

If you don't have a copy of Photoshop, you can use an online free alternative called Pixlr.com (click Open photo editor). You'll want to create a new image that's 25px by 100px and has a transparent background (you'll see the checkbox that says "Transparent" in Pixlr). If you can't figure out how to do this, no sweat, just grab the image attached to this article called supportv2.png (note that you won't see anything on the image since it's white text on a transparent background).
Once you have your graphic host it somewhere (like your dropbox public folder, your own website, anywhere). Copy the link and save it for later.

3. Changes

We need to make several changes to our HTML to make our "tab".
  1. Delete the button we created the previous lesson that opens the form popup. The line of code to delete is:
    <input type="button" id="clicky" value="Show Form">
  2. Next we want to add a link (an <a href=) in that code's place. It should look like this:
    <a href="#" id="click2">Click Here</a>

4. Style It Up!

Add some extra styles.
  1. Now it's time for the magic. We want to add a new style. FInd the part of your HTML page where you have your <style .. tag and inside there add the following new code:
    #click2 {
         position: fixed;
         right: 0;
         top: 50px;
         display: block;
         width: 25px;
         height: 100px;
         text-indent: -10000px;
         background-color:black;                 
         background-image: url('SEE BELOW');
         overflow: hidden;
         -webkit-border-top-left-radius: 7px;
         -webkit-border-bottom-left-radius: 7px;
         -moz-border-radius-topleft: 7px;
         -moz-border-radius-bottomleft: 7px;
         border-top-left-radius: 7px;
         border-bottom-left-radius: 7px;
    }
  2. You'll notice there's a part there where it says SEE BELOW. This is where we want to put the link to our Support image. For example, if you stored your PNG file on Dropbox you would copy the public link and include it in place of the text that says see below. The end result might look like this:
    background-image:url('https://www.dropbox.com/123123/support.png');
    Of course, this is just an example and is by no means a real link. Now that you've done all this you should see your tab on the right but unfortunately, clicking on it doesn't do anything! We have a little more wiring left to do.

5. jQuery Wiring

Now we want change up our jQuery to work with a new trigger.
  1. Delete the code in your jQuery that looks like this:
    $('#clicky').button().click(function() {
         $("#box_form").dialog("open");
    });
    and replace it with this code:
    $('#click2').click(function(e) {
         $('#box_form').dialog('open');
    });
    That's it! If you've followed these instructions you should have a "feedback tab" impersonator that submits tickets!

6. Adding An Extra Page

Adding an additional page before the user submits a ticket.
Let's suppose you have a FAQ and maybe 2 or 3 articles in your forum about very common issues. You want to show this to users BEFORE they submit a ticket. To do this, you'll need to add an extra page to your feedback. You can put anything you want on this extra page, but in this example I'm going to show you how to embed some text.
  1. First let's add an extra div. It should look like this:
    <div id="page1">Your page content goes here.</div>
    We're going to want to keep it in the form element. This div is going to contain your page content.
  2. Since we are going to have more than one page, we'll also want to give our tabs titles. To do this, add the "title" attribute to your dialog objects. Your code should look like this (though we have clipped off the rest of the jQuery):
    $('#box_form').dialog({
            autoOpen: false,
            height: 375,
            width: 350,
            modal: true,
            title: "Create Ticket",
    ...
  3. Clone the jQuery we used previously (for our first popup) so we can make page1 show up before box_form. To do this, copy the code and paste it. You'll want to go from this:
    $('#box_form').dialog({
            autoOpen: false,
            height: 375,
            width: 350,
            modal: true,
            title: "Create Ticket",
            buttons: [
                {
                text: "Cancel",
                click: function() {
                    $(this).dialog("close");
                }},
            {
                text: "Submit",
                click: function() {
                    $('#zFormer').submit();
                }}
            ]
        });
    to this:
    $('#page1').dialog({
            autoOpen: false,
            height: 375,
            width: 350,
            modal: true,
            title: "My Custom Feedback Tab",
            buttons: [
                {
                text: "Cancel",
                click: function() {
                    $(this).dialog("close");
                }},
            {
                text: "Create Ticket",
                click: function() {
                    $('#page1').dialog('close');
                    $('#box_form').dialog('open');
                }}
            ]
        });
    What's changed? We'll for starters we have modified the title and the element. Look at the first line of both segments and you'll see what I mean. In the first one we are telling jQuery to make the box_form div our dialog box, but in the second piece we tell jQuery to make page1 the dialog too.
    To be clear: So far we recycled our code for the first dialog and created a second dialog that has some text in it, a different title, some different buttons too.
    We still have the same Cancel button. We have a new button, "Create Ticket", that has the behavior of closing the page1 window and opening the box_form dialog.
  4. We also need to update our CSS to include new objects and the like. We're going to change our first CSS rule from:
    #box_form > * {
    to include our page1 content. To do this just change it to:
    #box_form > *, #page1 > ui-widget-content {
  5. Finally, we want to update our click handler. Right now if you click you'll only see box_form, like before, because we still tell jQuery to open that dialog first. To change it, rewrite the handler to:
    $('#click2').click(function(e) {
         $('#page1').dialog('open');
    });
    In case you can't find it, the original handler says $('#box_Form').dialog('open');.

7. Conclusion

Now that we've done all this you should be able to have a working feedback with a starter page, a ticket submission page, and a landing page. I have attached the support.png file that I used in my demo.

8. Addendum

In order to give this tab wide reaching compatibility we'll need to add one more thing. Google Chrome, Firefox, and even Safari all render our tab adequately. However, there are issue with Internet Explorer and we need to tell IE to render our tab in a special way. To do this, you'll want to add the following line at the very top of your HTML page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">