Random Contributions: 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="#" class="register_link">{$Registered}</a></li>
<li><a href="#" id="viewDetailsRPMs">{$VersionDetails}</a></li>
<li><a href="http://www.issabel.org" target="_blank">Visit 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="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.

<ul class="dropdown-menu">


<li class="caret"></li>


<li><a href="#" class="register_link">{$Registered}</a></li>
<li><a href="#" id="viewDetailsRPMs">{$VersionDetails}</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>



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

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


<li class="caret"></li>


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



<!--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

=====================================================================
This hack will let you change the Campaign Monitoring screen to show the agent name instead of the just the extension. its not perfect but its a start.

Just use these 2 lines for each agent you want to change and repeat it for each additional agent.

 if ($agent ['agentchannel'] == "SIP/1001")
     $agent ['agentchannel'] = "John Smith";

Find this code in the file /var/www/html/modules/campaign_monitoring/index.php

function formatoAgente($agent)
{
$sEtiquetaStatus = _tr($agent['status']);
$sFechaHoy = date('Y-m-d');
$sDesde = '-';
switch ($agent['status']) {
case 'paused':
    // Prioridad de pausa: hold, break, agendada
    if ($agent['onhold']) {
        $sEtiquetaStatus = _tr('Hold');
        // TODO: desde cuándo está en hold?
    } elseif (!is_null($agent['pauseinfo'])) {
        $sDesde = $agent['pauseinfo']['pausestart'];
        $sEtiquetaStatus .= ': '.$agent['pauseinfo']['pausename'];
    }
    // TODO: exponer pausa de agendamiento
    break;
case 'oncall':
    $sDesde = $agent['callinfo']['linkstart'];
    break;
}
if (strpos($sDesde, $sFechaHoy) === 0)
    $sDesde = substr($sDesde, strlen($sFechaHoy) + 1);

return array(
    'agent'         =>  $agent['agentchannel'],
    'status'        =>  $sEtiquetaStatus,
    'callnumber'    =>  is_null($agent['callinfo']['callnumber']) ? '-' : $agent['callinfo']['callnumber'],
    'trunk'         =>  is_null($agent['callinfo']['trunk']) ? '-' : $agent['callinfo']['trunk'],
    'desde'         =>  $sDesde,
);

Now insert the 'fix' above the "return array(" section below
EXAMPLE:

 if (strpos($sDesde, $sFechaHoy) === 0)
    $sDesde = substr($sDesde, strlen($sFechaHoy) + 1);

     if ($agent ['agentchannel'] == "SIP/1001")
         $agent ['agentchannel'] = "John Smith";

    return array(
    'agent'         =>  $agent['agentchannel'],
    'status'        =>  $sEtiquetaStatus,
    'callnumber'    =>  is_null($agent['callinfo']['callnumber']) ? '-' : $agent['callinfo']['callnumber'],
    'trunk'         =>  is_null($agent['callinfo']['trunk']) ? '-' : $agent['callinfo']['trunk'],
    'desde'         =>  $sDesde,
);

You can repeat the code for a more agents

if (strpos($sDesde, $sFechaHoy) === 0)
    $sDesde = substr($sDesde, strlen($sFechaHoy) + 1);

     if ($agent ['agentchannel'] == "SIP/1001")
         $agent ['agentchannel'] = "John Smith";

     if ($agent ['agentchannel'] == "SIP/1002")
         $agent ['agentchannel'] = "Barb Dell";

     if ($agent ['agentchannel'] == "SIP/1003")
         $agent ['agentchannel'] = "Jane Doe";

     if ($agent ['agentchannel'] == "SIP/1004")
         $agent ['agentchannel'] = "Maria Jones";

    return array(
    'agent'         =>  $agent['agentchannel'],
    'status'        =>  $sEtiquetaStatus,
    'callnumber'    =>  is_null($agent['callinfo']['callnumber']) ? '-' : $agent['callinfo']['callnumber'],
    'trunk'         =>  is_null($agent['callinfo']['trunk']) ? '-' : $agent['callinfo']['trunk'],
    'desde'         =>  $sDesde,
);

Looks like this:

=====================================================================
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 200x60 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

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

You can remove the change password option completely

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

search for 'password'

Delete these 3 lines

<a href="#" class="setadminpassword"> {$CHANGE_PASSWORD}

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

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

themes/tenant/_common/index.tpl

grep -R "agent_call" /var/www/html/

Random Contributions

Friday, February 22, 2019

Issabel Contact Center GUI Tweaks

No comments:

Post a Comment