Customize Webclient Menu - Add Link to Top Nav

Status
Not open for further replies.

loyer

Silver Partner
Advanced Certified
Joined
May 5, 2016
Messages
107
Reaction score
46
Is there anyway to customize the top navigation bar of the 3CX Webclient Portal? I built a custom integration with Twilio to support fax and sms/texting and would like to give my customers an easy way to link to it. It would be great if I could insert a link in the top nav. I think I can hack it with javascript but would prefer a better solution.

I'll post a screenshot if I can figure out how....
 
webclient-menu.jpg
 
I came up with a solution.... this is working with version 15.5 Update 3. NOTE: This probably isn't the best idea and will require you to edit HTML of the 3CX install --- they probably won't be happy and the file will get written over every time the system updates. So only try this is you know what you are doing and ALWAYS make a backup of the original file. I am doing this on a Windows server.

On the server, in the file directory (explorer) go here:
C:\ProgramData\3CX\Data\Http\wwwroot\webclient\

There is a file... index.html
MAKE A BACKUP COPY OF IT

Edit the file (I used notepad) --- you will make two edits (one near the top and one near the bottom).

Add to top of page after <HEAD> add:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Add to bottom of page before </BODY> add:
<script>
$(function() {
var ltcgCheckExist = setInterval(function() {
if ($('.phone-connected').length) {
$('.phone-connected').before( '<li><a href="https://www.google.com/" title="Send Text" target="_blank" style="padding:12px"><i style="vertical-align: middle;font-size:22px;color:#0096d1;" class="fa fa-comments"></i></a></li>' );
clearInterval(ltcgCheckExist);
}
}, 1000);
});
</script>

In the A HREF change "https://www.google.com/" to your URL.
Change the title "Send Text" to whatever you want to show when you mouse over the link.
You can change the icon to something else: fa fa-comments
See list here: https://fontawesome.com/icons?d=gallery

Save the file. Refresh the web client and you should see your link/icon in the top nav.
 
webmenuclient2.jpg


Above is the screenshot of my link.
 
Status
Not open for further replies.

Latest Posts

Forum statistics

Threads
111,883
Messages
589,537
Members
164,741
Latest member
Carsonix