Customize Webclient Menu - Add Link to Top Nav

Discussion in '3CX Phone System - General' started by loyer, Feb 8, 2018.

Thread Status:
Not open for further replies.
  1. loyer

    Joined:
    May 5, 2016
    Messages:
    42
    Likes Received:
    4
    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....
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
  2. loyer

    Joined:
    May 5, 2016
    Messages:
    42
    Likes Received:
    4
    [​IMG]
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
  3. loyer

    Joined:
    May 5, 2016
    Messages:
    42
    Likes Received:
    4
    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.
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
  4. loyer

    Joined:
    May 5, 2016
    Messages:
    42
    Likes Received:
    4
    [​IMG]

    Above is the screenshot of my link.
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
Thread Status:
Not open for further replies.