Issabel Contact Center GUI Tweaks

Here are some modifications you can make to ISSABEL asterisk distribution to make it more customized at a HTML level.

Make sure you backup the files. If you aren’t familiar with HTML JAVA etc one wrong place quote or tick could make the system completely unusable!

Agent Contact Center Desktop:

CUSTOMIZE LOGIN SCREEN MODIFICATIONS

Edit the file:

/var/www/html/modules/agent_console/index.php

On around LINE 180 alter the text in ‘ ‘ section on the right. (shown in bold
‘WELCOME_AGENT’ => _tr(‘COMPANYNAME Agent Console’),

Save your changes and reload the page (CTRL+F5) and the title should update

=========================================

MODIFY AGENT CONSOLE TABS

Can change the name of the VTIGER CRM tab that ISSABEL puts in.
I changed mine to CUSTOMER CRM

Edit the file:
/var/www/html/modules/agent_console/index.php

Alter the section in BOLD

‘BTN_VTIGERCRM’ => file_exists(‘/var/www/html/vtigercrm’) ? _tr(‘CUSTOMER CRM‘) : NULL,

=========================================
Change “END SESSION” to “LOGOUT”
My agents were confused sometimes and would press end session instead of hangup.

Edit the file:
/var/www/html/modules/agent_console/index.php

‘BTN_FINALIZAR_LOGIN’ => _tr(‘End Calls and Logout‘),

=========================================

Issable has a feature that if you click on the “VTIGER” CRM tab in the agent desktop console window, it will launch VTIGER.

This tab can be useful for a number of reasons. One being that even if you DONT have vtiger installed on your system, IF you create the folder called “vtigercrm” in /var/www/html/ the presence of that directory will make the tab appear in the console.

In my situation I have Vtiger 7 installed in a completely different server, so I created a file called “index.php” in this directory with the following inside the file to direct any web traffic to that directory to the new server.

<?php

echo “<script> location.href=’http://company.com/vtiger7′; </script>”;

exit;

However you could make this tab be anything. You can rename it (process outlined in this post) and then you can put any URL in there you like.

==============================================

Change the stuff under the “ADMIN” drop down menu

In this example I changed the value from “ISSABEL” to “CONTACT CENTER”
(we have a product with a similar name and it was causing confusion)

/var/www/html/themes/tenant/themesetup.php

Modify the options in BOLD to be what you want

“CHANGE_PASSWORD” => _tr(“Change Issabel Password“),

===============================================================

EDIT “INFO” options

edit the file:

/var/www/html/themes/tenant/_common/_menu.tpl

you’ll see options listed. You can customize and ADD options in!

In this example we copy/pasted some lines and modified them with Hotmail, Reddit and Google to show how you can point to other URL locations

<li><a href=”http://www.reddit.com” target=”_blank”>Reddit</a></li>

<li><a href=”http://www.google.com” target=”_blank”>Google</a></li>

<li><a href=”#” id=”dialogaboutissabel”>{$ABOUT_ISSABEL2}</a></li>

===============================================================

Add Additional menus of your own in the Agent console:

You’ll notice in this example we’ve add 2 more menu options, and we’ve updated the ICON.

edit the file:

/var/www/html/themes/tenant/_common/_menu.tpl

Copy paste the BOLD code and alter it to suite your environment.

<!– Reverse Caret –>
<li class=”caret”></li>

<!– Profile sub-links –>
<li><a href=”#” class=”register_link”>{$Registered}</a></li>
<li><a href=”#” id=”viewDetailsRPMs”>{$VersionDetails}</a></li>
<!– <li><a href=”http://www.issabel.org” target=”_blank”>Issabel Website</a></li> –>
<li><a href=”http://www.hotmail.com” target=”_blank”>Hotmail</a></li>
<li><a href=”http://www.reddit.com” target=”_blank”>Reddit</a></li>
<li><a href=”#” id=”dialogaboutissabel”>{$ABOUT_ISSABEL2}</a></li>
</ul>
</li>

<!——- doubled up code —->

<li id=”header_notification_bar” class=”profile-info dropdown”>
<a data-toggle=”dropdown” class=”” href=”#”>

</a>
<ul class=”dropdown-menu”>

<!– Reverse Caret –>
<li class=”caret”></li>

<!– Profile sub-links –>
<li><a href=”http://www.google.com” target=”_blank”>Google</a></li>
</ul>
</li>

<!—— end doubledup code —–>

<!–li id=”header_notification_bar” class=”dropdown”>
<a {*data-toggle=”dropdown”*} class=”” href=”index.php?menu=addons”>

</a>

Customize the icon that you click on by altering


Here’s a few you can use
fa-cog
fa-laptop
fa-envelope
fa-lock
fa-phone
fa-print
fa-bar-chart-o
fa-comments
fa-book
fa-fax
fa-cubes
fa-plus
fa-tachometer

Icon changed from an “I” to a gauge (tachometer)

You can have a whole bunch of them. Just repeat the code in bold above then customize each one.

======================================================

AGENT PASSWORD CHANGE SCREEN

You can edit the PASSWORD prompt on the login. Again, we have a product with a similar name so we had agents getting confused.

Alter the password popup box when you click on “CHANGE ISSABEL PASSWORD”

/var/www/html/modules/_issabelutils/index.php

$jsonObject->set_message(array(
‘title’ => _tr(‘Change GUI Password‘),
‘html’ => $smarty->fetch(“$local_templates_dir/_change_password.tpl”),

=========================================================

Modify Login password box.

My users sometimes get confused between the agent id they logon to the GUI with and the one for their phone. IE. jsmith/password01 vs SIP/1000 / numeric password they key into the phone. Agents are smart, but we live in a society of too many passwords.

/var/www/html/themes/tenant/_common/login.tpl

=====================================================================
MODIFY REPLACE ISSABEL or ELASTIX logos.

If you need to modify the Issabel logos and replace them with your own, just replace this png file.

the main menu logo is located in this directory:

/var/www/html/themes/tenant/images/issabel_logo_mini.png

Hey I don’t want to NOT give Issabel credit for this product, its awesome. But my login is public facing so I want to avoid advertising the system to reduce chances of exploits being attempted.

This is the reference file – changes it to the new name
The default file is about 200×60 in size.

The file name reference is in the
/var/www/html/themes/tenant/_common/login.tpl

and called “issabel_logo_mini.png”
/var/www/html/themes/tenant/_common/login.tpl

You can make the logo size doubled with the following commands:

sed -i -r ‘s/width=”200″/width=”400″/’ /var/www/html/themes/tenant/_common/login.tpl
sed -i -r ‘s/height=”62″/height=”110″/’ /var/www/html/themes/tenant/_common/login.tpl

=================================================================

Agent Logoin screens
themes/tenant/_common/login.tpl

themes/tenant/_common/index.tpl

Issabel Contact Center GUI Tweaks

ทิ้งคำตอบไว้ ยกเลิกการตอบ