Free Popup/Tooltip with client information

ZystemsK · 01:52 PM

Here's a mod I've been working on for some time. Essentially, I wanted something that would display customer information (phone, address, and other details) that would popup when you click on the customer's name.

It uses jQuery and jqModal. It took a lot of time to get it to work right with Kayako and even longer to properly optimize it so the ticket list doesn't lag.

This mod allows you to click on the customer's name in the Manage Tickets area and when you view a single ticket. It uses AJAX to query the database to get the information and then fill it in a hidden <div> tag.

It took a while because I couldn't find a proper example of what I wanted. I wanted a popup that the user could interact with, could be moved around (draggable), and allows them to continue to interact with the parent page without closing it. A lot of these modal popups are similar to those picture galleries, if you click on the main page, it'd close. Or, it would be a simple tooltip that you couldn't interact with.

Here's an image of the full SupportSuite screen.

Why did I make this? I wanted something that would allow me to easily access customer information without having to navigate away from the page. We have all of this information on another internal website, but it's extremely slow and causes us to navigate away from the ticket.

Currently, the mod isn't in a module form and I need to go through and find all the files I've modified. If there's enough interest, I can gather this up and post it. I'm also looking for suggestions.

The poup includes an edit button and a close button. The edit button passes the usergroupid over and uses that to update the database. The edit page is blank with text boxes, no footer or header.

Thanks.

Edit: I was bored so I ported it to a complete module. Here's the code and the needed changes.

/modules/tickets/functions_ticketsui.php

Look for:

Code:

if ($_SWIFT["settings"]["t_tpreview"] == 1)

Change:

Code:

if ($_SWIFT["settings"]["t_tpreview"] == 1)
{
    $_tquery = "SELECT t.*, tl.lockdateline, tl.lockstaffid, tp.contents AS preview FROM `". TABLE_PREFIX ."tickets` AS t LEFT JOIN `". TABLE_PREFIX ."ticketlocks` AS tl ON (t.ticketid = tl.ticketid) LEFT JOIN `". TABLE_PREFIX ."ticketposts` AS tp ON tp.ticketpostid = t.lastpostid) WHERE t.ticketid IN (". $strticketid .") ". iif($usesearch==true, $_sortjoin, $sortstatement).";";
} else {
       $_tquery = "SELECT t.*, tl.lockdateline, tl.lockstaffid FROM `". TABLE_PREFIX ."tickets` AS t LEFT JOIN `". TABLE_PREFIX ."ticketlocks` AS tl ON (t.ticketid = tl.ticketid) WHERE t.ticketid IN (". $strticketid .") ". iif($usesearch==true, $_sortjoin, $sortstatement).";";
}

To:

Code:

if ($_SWIFT["settings"]["t_tpreview"] == 1)
{
    $_tquery = "SELECT t.*, tl.lockdateline, tl.lockstaffid, tp.contents, usergroupid AS preview FROM swusergroups `". TABLE_PREFIX ."tickets` AS t LEFT JOIN `". TABLE_PREFIX ."ticketlocks` AS tl ON (t.ticketid = tl.ticketid) LEFT JOIN `". TABLE_PREFIX ."ticketposts` AS tp ON tp.ticketpostid = t.lastpostid) WHERE t.ticketid IN (". $strticketid .") AND t.fullname = swusergroups.title ". iif($usesearch==true, $_sortjoin, $sortstatement).";";
} else {
       $_tquery = "SELECT t.*, tl.lockdateline, tl.lockstaffid, usergroupid FROM swusergroups `". TABLE_PREFIX ."tickets` AS t LEFT JOIN `". TABLE_PREFIX ."ticketlocks` AS tl ON (t.ticketid = tl.ticketid) WHERE t.ticketid IN (". $strticketid .") AND t.fullname = swusergroups.title ". iif($usesearch==true, $_sortjoin, $sortstatement).";";
}

This pulls the groupid from the database so we know which group to edit/show.

Then, add the following directly under the last bracket:

Code:

?>
<script type="text/javascript" src="/min/?g=jscripts"></script>
<link rel="stylesheet" type="text/css" href="/modules/compinfo/css/notice.css" title="style"  media="screen"/>
<div id="maindiv" style="z-index:10000;position:absolute;display:none;">
 <div class="jqmNotice" id="ex3b">
  <div class="jqmnTitle jqDrag">
   <h1>Company Information</h1>
  </div>
  <div class="jqmContent">Please Wait</div>
 <a id="compinfo" target="_blank" class="jqmEdit" href="#" ><img style="border:none" src="/modules/compinfo/notice/edit_icon.gif" alt="edit" /></a>
 <img src="/modules/compinfo/notice/close_icon.png" alt="close" class="jqmClose" />
 </div>
</div>
<?

This is the main portion of the popup modal.
It uses a series of <div> tags to create the window and then uses Javascript to modify it based on the tags and classes.

Next, look for the following below the inserted code:

Code:

$record["t.fullname"] = htmlspecialchars(stripName($record["fullname"], 15));

Change it to:

Code:

$record["t.fullname"] = '<a href="#"  value="'.$record["usergroupid"].'" class="open">'.htmlspecialchars(stripName($record["fullname"], 15)).'</a>';

This links the name to the Javascript trigger. It uses the class 'open' to know when to trigger the javascript.

Here's the changes needed when viewing a ticket.
/modules/tickets/staff_viewticket.php

Search for (it's around line 800):

Code:

<tr>
<td align="left" valign="top" class="<?=$rowclass?>" width="160"><table width="100%" border="0" cellspacing="0" cellpadding="4" height="100%">
<tr>

And add this below it:

Code:

<script type="text/javascript" src="/min/?g=jscripts"></script>
<link rel="stylesheet" type="text/css" href="/modules/compinfo/css/notice.css"/>
<div id="maindiv" style="z-index:10001;position:absolute;display:none;">
 <div class="jqmNotice" id="ex3b">
  <div class="jqmnTitle jqDrag">
   <h1>Company Information</h1>
  </div>
  <div class="jqmContent">Please Wait</div>
 <a id="compinfo" target="_blank" class="jqmEdit" href="#" ><img style="border:none" src="/modules/compinfo/notice/edit_icon.gif" alt="edit" /></a>
 <img src="/modules/compinfo/notice/close_icon.png" alt="close" class="jqmClose" />
 </div>
</div>
<?
$cid = $dbCore->queryFetch("SELECT usergroupid FROM swusergroups WHERE swusergroups.title = '". $_ticket["fullname"] ."' ;");
?>

Then change the line directly below it to:

Code:

<td><span class="mediumtitle"><strong><a href="#" value="<?echo $cid["usergroupid"]; ?>" class="open"><?=htmlspecialchars($val["fullname"])?></a></strong></span><br><br>

Now, we'll need to edit the config.php and en-us.php to let Kayako know about the module.

/config/config.php
Look for:

Code:

define("MODULE_SERVERS", "servers");
define("MODULE_REPORTS", "reports");

Add the following under it:

Code:

define("MODULE_COMPINFO", "compinfo");

Then, look for:

Code:

$_MODULES[MODULE_SERVERS] = dirname(__FILE__)."/../modules/servers/servers.php";
$_MODULES[MODULE_REPORTS] = dirname(__FILE__)."/../modules/reports/reports.php";

And add the following under it:

Code:

$_MODULES[MODULE_COMPINFO] = dirname(__FILE__)."/../modules/compinfo/infomain.php";

/locale/en-us/en-us.php

If you are using the Big Screen Ticket Monitoring mod, then you can skip this step.
Look for:

Code:

7 => array ('News', 90, MODULE_NEWS, 1, 'nw_entab'),
9 => array ('Users', 90, MODULE_CORE, 3, 'cu_entab'),

Add:

Code:

10 => array ('Support Information', 160, MODULE_COMPINFO, 3, 'hw_entab'),

Now, scroll down and look for:

Code:

9 => array (
  0 => array ('Manage Users', 'index.php?_m=core&_a=manageusers', false, true),
  1 => array ('Manage Groups', 'index.php?_m=core&_a=manageusergroups', true, true),
  2 => array ('Insert User', 'index.php?_m=core&_a=insertuser', true, true),
  3 => array ('Insert Group', 'index.php?_m=core&_a=insertusergroup', true, true),
  4 => array ('Mass Mail', 'index.php?_m=core&_a=usermassmail', true, false),
),

And add:

Code:

10 => array (
   0 => array ('Company Information List', 'index.php?_m=compinfo&_a=complist', false, false),
),

If you are using the Big Screen Ticket Monitoring mod, then all you need to do is add this under the '0 => ...' line:

Code:

   1 => array ('Company Information List', 'index.php?_m=compinfo&_a=complist', true, false),

Now, copy the contents of the zip to /modules/compinfo (create the directory). This includes all of the javascript files and CSS files, as well as thefiles needed for installation and querying the DB.

Also, you'll need Minify. This compresses and bundles Javascripts together to lessen overhead and make the page load faster. I hope Kayako implements this for the rest of their scripts.
minify - Google Code

Extract /min/ to your root website directory, ie: /var/www/html/ and copy the groupsConfig.php to the root of the /min/ directory. This file is already set for the Javascript files to be used, all you need to do is edit /min/config.php and enable $min_cachePath and $min_documentRoot.
Those two should point to your temp directory and full website root path, respectively, ie: $min_cachePath = '/tmp'; and $min_documentRoot = '/var/www/html';

You MUST have Minify in order for this to work, otherwise you'll need to change the <script ...> tags to include all of the scripts separately.

Now, copy over the /setup folder and go to http://support/setup.
Click Modify
Install compinfo module
Then delete the /setup folder.

This creates the swcompanyinfo table in the database.

Thanks again. Let me know if it breaks.

ZystemsK · 15-05-2009, 04:52 PM

Oh, there are several hard-coded things to consider:
1. The fields you can edit are 'Company Name', 'Address', 'Phone', 'Applications', and 'Misc Info'. I thought about making an admin CP area, but I think that would be a great deal of work and would require a lot of rewriting code.
2. The order the items are displayed in.
3. It uses 'usergroupid' to link the information in the database. If you don't use User Groups, then you'd have to change this to whatever ID that you use for clients.
4. The clickable link is on the name of the customer in the ticket view and ticket listing.

ZystemsK · 21-05-2009, 06:47 PM

I should note that the popup does not open a new browser window, it's a simple tooltip-style popup. You can click and drag it around the window. Also, if the information is too long for the window, it adds a scroll bar to the side.

See: jqModal :: Minimalistic Modaling for jQuery Example 3c (modified a bit).

Matthew · 22-05-2009, 03:42 AM

Quote:

Originally Posted by ZystemsK

Oh, there are several hard-coded things to consider:
1. The fields you can edit are 'Company Name', 'Address', 'Phone', 'Applications', and 'Misc Info'. I thought about making an admin CP area, but I think that would be a great deal of work and would require a lot of rewriting code.
2. The order the items are displayed in.
3. It uses 'usergroupid' to link the information in the database. If you don't use User Groups, then you'd have to change this to whatever ID that you use for clients.
4. The clickable link is on the name of the customer in the ticket view and ticket listing.

Ah.... so you are pulling the 'company' info from the swusergroups table? I could see the possibility of expanding the Insert/Edit User Group page to include this kind of support information. Not too difficult. I only wish this could be done with custom fields. Or how about associating a contact with a User Group, and pulling the info from there?

Just a few thoughts. Thanks for sharing this ZystemsK. I may try this at some point.

ZystemsK · 04:30 PM

Seems to be an issue with the popup when viewing a ticket. Working on a fix for it now.

Edit: Fixed.

tom@ecentralsto · 22-05-2009, 06:27 PM

Dear ZystemsK,

Wonderful Mod, good stuff.

ZystemsK · 09-06-2009, 07:19 PM

Quote:

Originally Posted by tom@ecentralsto

Dear ZystemsK,

Wonderful Mod, good stuff.

Thanks. I'm surprised there hasn't been more people interested in this. It's something we immediately needed when we purchased Kayako and knew we would have to implement on our own.

Maybe people think it opens a new window/tab, but it doesn't, which is why I spent so long on making it. Being able to have customer information available without switching screens is great.

ZystemsK · 16-06-2009, 03:34 PM

Here's a video I took of the popup in action. The close animation is much smoother and moving the dialog box around is also smoother, it just didn't capture well.

Video2.flv video by ZystemsK - Photobucket

fredrikl · 20-06-2009, 09:22 AM

It's a great module, no questions about it, BUT I believe it's way to complicated to apply, and thats the only reason why people haven't installed it. Kayako should implement this in the main code!

This is exactly what I need, but I'm gonna wait before I install it.

/F

ZystemsK · 22-06-2009, 11:46 AM

Quote:

Originally Posted by fredrikl

It's a great module, no questions about it, BUT I believe it's way to complicated to apply, and thats the only reason why people haven't installed it. Kayako should implement this in the main code!

This is exactly what I need, but I'm gonna wait before I install it.

/F

It's easier to install than the Big Screen Ticket Monitoring because most of the files are in the .zip and it doesn't require one to edit Kayako that much.

I could make the install check to see what version of Kayako you are running and then have it search and edit the files automatically, but I'm sure that could break custom code and probably not work with older versions, even if the code didn't change.

Thanks for the praise, though

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Ticket view client information	raph	How do I?	6	13-05-2008 05:29 PM
Ability for client to gracefully leave a chat / cancel chat request	netFusion	Feature Requests	19	19-07-2007 09:15 PM
Required field validation if client sends ticket via email	richm	SupportSuite, eSupport and LiveResponse	0	25-05-2007 03:31 AM
[HOW TO] Get the Winapp client runing on Terminal Servers	Paul Agerbeek	LiveResponse Desktop Application	0	12-10-2006 11:34 AM

ZystemsK Offline Member Posts: 167 Join Date: Dec 2008 Location: Maryland	22-05-2009, 04:08 PM Seems to be an issue with the popup when viewing a ticket. Working on a fix for it now. Edit: Fixed. Kayako Owned since 12/2008 Kayako Enthusiast since 12/2008 PHP/SQL coder and customizer, and up for ideas. Got a large monitor? Try this mod on for size. Interactive Tooltip/Popup for Client Information. Last edited by ZystemsK; 22-05-2009 at 04:30 PM.

tom@ecentralsto Offline Member Posts: 72 Join Date: Sep 2007 Location: Florida	22-05-2009, 06:27 PM Dear ZystemsK, Wonderful Mod, good stuff. Thomas Pursifull (tom ]at[ ecentralstores.com)

fredrikl Offline New Member Posts: 1 Join Date: Jun 2009 Location: Sweden	20-06-2009, 09:22 AM It's a great module, no questions about it, BUT I believe it's way to complicated to apply, and thats the only reason why people haven't installed it. Kayako should implement this in the main code! This is exactly what I need, but I'm gonna wait before I install it. /F