Integrating the contact centre chat using the 'basic chat' sample code

Home Forums Contact Center MiContact Center Business Integrating the contact centre chat using the 'basic chat' sample code

This topic contains 7 replies, has 4 voices, and was last updated by  Patrick McDowell 2 weeks, 1 day ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #5336

    Joshua Creek
    Participant

    I used the sample code for ‘basic chat’ that came in the server install files and get the javascript console error message ccmwa missing from context for chat.ui.agent.config but have been unable to work out how to solve this issue and cannot find any documentation. I have confirmed that navigating directly to http://micc.xxx.xxx/ccmwa/chat/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx in a browser does work so it seems to be a specific issue using the sample that came from Mitel.

    I have tried using a variety of different syntaxes, browsers and operating systems, setting it to display within a div, an iframe and a span, all to no avail. The error message itself was actually commented out in the sample so had to be uncommented to reveal the issue.

    I originally flagged this to our Mitel support people in early April and still have had no response to my queries (with them even closing the case without speaking to me) but one person there did finally direct me to this forum where I really hope I can finally get some answers. It astounds me that there is a dearth of documentation for such a basic and core part of implementing these systems.

    #5337

    Eric Laracuente
    Participant

    Hi Joshua,

    Thanks for posting, and I apologize for the difficulties your experiencing both with your partner and product. A couple of more details would be helpful:

    1) What edits did you do to the basic chat config file?
    2) What version of Java are you running on the server?
    3) Was it working and then broke?
    4) Any chance you can upload the file to a Pastin (remove any environment specific info) so we can analyze and further support you?

    Thank you very much; hope to hear from you soon!

    #5340

    Joshua Creek
    Participant

    Hi Eric,

    Thank you very much indeed for your swift reply! Please find detailed below my responses to your questions.

    1) All I did was replace var page = document.location.protocol + '\/\/' + document.location.host + '/ccmwa/chat/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'; with our Mitel server details. This can be seen on line 23 of the pastebin code.
    2) Our server is running an ASP.Net Core IIS website, but I have tried this as both a standalone html file and as part of our system to no avail.
    3) I have never managed to get it to work. Originally there was no error message at all showing in the javascript console, then when dry running it I discovered a commented out diagnostic message (the one in my original post), which fires consistently once uncommented.
    4) https://pastebin.com/LW3w3uxa

    I look forward to hearing from you.

    Thanks,
    Joshua

    #5367

    Patrick McDowell
    Participant

    Hello, this knowledge article will help you deploy the chat.basic.* examples.
    https://mitel.custhelp.com/app/answers/answer_view/a_id/1012274/

    I am in the process of documenting the Contact Us process and will publish another article explaining that soon.

    HOWTO Deploy and test the CCMWa CHAT samples that ship in the \Support\BasicSamples folder of MiContact Center Business

    Objective

    This article will guide you though the process of deploying the BasicsSamples to be accessible on your MiCC Enterprise Server. These samples are provided for reference purposes only and to demonstrate several different methods you can leverage to present your customers with a Webchat option on your website. This article does not describe the configuration of a reverse proxy to enable WAN access – consult your Web Development team on how to access internal content on your MiCC Server from your corporate website.

    Environment
    MiContact Center Business with Multimedia CCMWa CHAT

    NOTE: WEBCHAT only – this article does not describe the deployment of the ‘Contact Us Samples’)

    Procedure

    DEPLOY – Perform these actions on your MiCC Enterprise Server

    1. Copy the BasicSamples folder found by default at C:\Program Files (x86)\Mitel\MiContact Center\Support to your MiCC Websites folder, by default located at C:\Program Files (x86)\Mitel\MiContact Center\Websites

    2. Open IIS Manager on your MiCC Enterprise Server, Navigate to your Default Website, right click and select Add Application
    Name the new application miccbasicsamples, use Default Application Pool, physical path:
    C:\Program Files (x86)\Mitel\MiContact Center\Websites\BasicSamples

    3. Open YourSiteExplorer, go to Queues, select the Chat Queue you wish to use in the sample pages. In the top ribbon toolbar, click COPY QUEUE GUID. This copies the Queue GUID to your clipboard. You need this for step 4.

    CUSTOMIZE – editing the sample files and control script

    4. You now need to edit and save each of the chat.basi*.html files in your ..\Websites\BasicSamples (created in Step 1) folder to become specific to your chat queues. We recommend using Notepad++ as the editor to easily locate the line number references below:

    chat.basic.html – replace 26F1A5C3-DD2C-45FF-BE75-2BC7B85012D0 found on line 10 and line 12 with the GUID you copied from step 3

    chat.basic.embedaspage.html – replace 26F1A5C3-DD2C-45FF-BE75-2BC7B85012D0 found on line 12 and 13 with the GUID you copied from step 3

    chat.basic.embedaswidget.html – replace 26F1A5C3-DD2C-45FF-BE75-2BC7B85012D0 found on line 17 and 18 with the GUID you copied from step 3

    chat.basic.popup.html – replace 26F1A5C3-DD2C-45FF-BE75-2BC7B85012D0 found on line 25 with the GUID you copied from step 3.
    remove the <!– from the beginning of line 19
    remove the –> from the end of line 54 so it reads </script> and not </script>–>
    completely remove line 56 ( <script src=”ccmwa/scripts/miccwebchat.js?embedded=false&ln=en-CA&q=26F1A5C3-DD2C-45FF-BE75-2BC7B85012D0&promptafter=20000″></script> )

    chat.basic.bypassprechat.html – replace 0F8945DB-47EE-4EE2-B541-C86B75440C8F found on line 15 with the GUID you copied from step 3.
    You will see in this same line that a username (jon), email address (myaddress@mitel.com) and topic (something%20to%20talk%20about) are pre-populated. This is an example of how to craft a preformed URL to present to the chat system. A typical use case would be an authenticated user on a customer web-portal requesting chat – no need to re-enter chat form information and you can control the topics from a picklist of preselected.
    NOTE: To use a preform URL, you must set these queue specific configuration options (described below in step 5) :
    UsePrechatArea:false,
    PrechatDataFromUrl:true

    5. You now need to edit the ..\BasicSamples\Scripts\Chat.Config.js file
    Lines 38-47 are global controls that can be overridden at the individual queue level. Each option is explained in the comment. Example, you wish to display Estimated Wait Time for one queue but not show it on others, you need to enable it Globally true (on Line 38), then disable it for an individual queue (false on line 98).
    Edit lines 49-83 as desired. Each option is explained in the comment. These are settings that apply to the general chat landing page at http(s)://yourserver/ccmwa/chat (not queue specific but will be considered a queue default setting if not overridden at the queue level).
    Lines 86-193 show you how to customize the settings for 3 separate chat queues.
    Lines 86-121 (Music sales)
    Lines 122-157 (Arts&Theater Sales)
    Lines 158-193 (Sports Sales)
    In each queue section, replace the QUEUEID value with a valid GUID for one of your chat queues (like you did in step 3) and update the other options as desired. You can have different screen colors, chat topics, queue stat display options, etc. customized on a queue by queue basis, and that customization is controlled through the ..\Scripts\Chat.Config.js file.
    OutOfBusinessHoursMsg and QueueLabel can contain HTML such as:
    QueueLabel:'<font size=”4″>MiCC CHAT DEMO BOX</font><br><font size=”2″>Powered by Mitel MiCC 9.1.1.0</font>’,
    OutOfBusinessHoursMsg:'<font size=”4″>We’re Closed Now!</font><br><font size=”3″>Open Mon-Sat 8-4</font>’,

    6. Open a web browser that is able to access your MiCC Enterprise Server and go to http(s)://yourMiCCserver/miccbasicsamples (example: http://192.168.0.75/miccbasicsamples) and you will get a web page named Chat Deployment Scenarios and you will see:
    Chat Samples
    chat.basic.html
    chat.basic.embedAsPage.html
    chat.basic.embedAsWidget.html
    chat.basic.popup.html
    chat.basic.bypassPrechat.html

    Contact Us Samples
    contact.basic.stacked.html
    contact.basic.horizontal.html
    contact.sideslider.html

    TEST – Click on each of the Chat Samples links

    7. If you performed steps 1-6 successfully, you will be taken to the chat queue you specified in step 3 when you click any of the chat.basi* links displayed in step 6.

    #5369

    Joshua Creek
    Participant

    Having followed these steps, it works on the mitel server itself, but the console reports these errors:
    image

    on our http webserver it does not show the second window and has these errors
    image

    this is the file responsible for that last error, which seems to be on the mitel server, rather than in our code
    image

    I notice that there are a number of depreciation errors with the jquery version, could these be part of the issue? Most notably the load() function is now on.("load", function()) but this is not reflected in the sample code.

    • This reply was modified 4 months, 3 weeks ago by  Joshua Creek.
    • This reply was modified 4 months, 3 weeks ago by  Joshua Creek.
    #5685

    Kurt Bobinger
    Participant

    Joshua, did you ever get a resolution, as we are in the midst of integrating chat to our call center, as well and are seeing the same issues that you posted about.

    #5686

    Kurt Bobinger
    Participant

    After re-reading your last post. The 3rd image is the exact error our web developer is reporting to us. If you have found the issue, please reply.

    #5687

    Patrick McDowell
    Participant

    Kurt,

    I re-wrote the article to include the Reverse Proxy setup that was successful for me in my lab environment.
    There are certain scripts within the \website\ccmwa\scripts folder that are being called by the basicsamples page and these scripts need the reverse proxy, else the basic samples page attempts to load the script from the wrong location (ie, from a ccmwa\scripts folder under miccbasicsamples instead of from websites\ccmwa\scripts).

    Here is the updated article. Hope it helps.

    Patrick.

    Title
    HOWTO Deploy and test the CCMWa CHAT and CONTACTUS samples that ship in the \Support\BasicSamples folder of MiContact Center Business
    Objective
    This article will guide you through the process of deploying the BasicsSamples to be accessible on your MiCC Enterprise Server. These samples are provided for reference purposes only and to demonstrate several different methods you can leverage to present your customers with a Webchat option on your website. This article does describe the configuration of a reverse proxy to enable WAN access but you should consult your Web Development team on how to access internal content on your MiCC Server from your corporate website as the described configuration here may or may not be suitable for your environment.

    Mitel Product Support cannot assist you with step-by-step modifications to your corporate website infrastructure, we can only provide high-level guidance.

    Environment
    MiContact Center Business with Multimedia CCMWa CHAT and ContactUs from the BasicSamples included in the support folder.

    Procedure
    DEPLOY – Perform these actions on your MiCC Enterprise Server

    Copy the BasicSamples folder found by default at C:\Program Files (x86)\Mitel\MiContact Center\Support to your MiCC Websites folder, by default located at C:\Program Files (x86)\Mitel\MiContact Center\Websites

    Open IIS Manager on your MiCC Enterprise Server, Navigate to your Default Website, right click and select Add Application. Name the new application miccbasicsamples, use Default Application Pool, physical path: C:\Program Files (x86)\Mitel\MiContact Center\Websites\BasicSamples

    In IIS Manager, you now need to install the Application Request Routing Cache
    Download it here: https://www.iis.net/downloads/microsoft/application-request-routing

    Once ARR is installed, click on it in the root pane of IIS Manager, then in the right pane click on PROXY SETTINGS and ensure the following options are selected:
    Reverse Proxy, Keep Alive, Reverse Rewrite Host in Response Header, Use URL rewrite to inspect incoming requests, Reverse Proxy – enter the IP address or FQDN of the MiCC Enterprise Server.

    Now in IIS Manager you need to configure a URL Rewrite Server Variable
    In the Connections pane, select your miccbasicsamples website you created in step 2.
    In the Applications pane, double-click URL Rewrite.
    In the Actions pane, select View Server Variables….
    In the Actions pane, click Add… and enter HTTP_INCOMING_HOST.
    Click OK.
    In the Actions pane, select Back to Rules.

    Now you need to edit the Web.Config file in the BasicSamples folder you created in step 1 and replace the <rewrite> section of the file (all lines between and including <rewrite> and </rewrite>) with this:

    <rewrite>
    <rules>
    <clear />
    <rule name=”ReverseProxyInboundRule1″ stopProcessing=”true”>
    <match url=”ccmwa/(.*)” />
    <action type=”Rewrite” url=”http://localhost/ccmwa/{R:1}” />
    <serverVariables>
    <set name=”HTTP_INCOMING_HOST” value=”{HTTP_HOST}” />
    </serverVariables>
    </rule>
    </rules>
    <outboundRules>
    <remove name=”ReverseProxyOutboundRule1″ />
    <rule name=”ReverseProxyOutboundRule1″ preCondition=”ResponseIsHtml1″>
    <match filterByTags=”A, Area, Base, Form, Frame, Head, IFrame, Img, Input, Link, Script” pattern=”^(http|ws)(s)?://(localhost)?(.*)” />
    <action type=”Rewrite” value=”{R:1}{R:2}://{HTTP_INCOMING_HOST}/{R:4}” />
    </rule>
    <preConditions>
    <preCondition name=”ResponseIsHtml1″>
    <add input=”{RESPONSE_CONTENT_TYPE}” pattern=”^text/html” />
    </preCondition>
    </preConditions>
    </outboundRules>
    </rewrite>

    Open YourSiteExplorer, go to Queues and select the Chat Queue (and/or also Email, Voice, SMS queue if you are editing your ContactUs file) you wish to use in the sample pages. In the top ribbon toolbar, click COPY QUEUE GUID.

    CUSTOMIZE – editing the sample files and control scripts

    You now need to edit and save each of the chat.basi*.html files in your ..\Websites\BasicSamples (created in Step 1) folder to become specific to your chat queues. We recommend using Notepad++ as the editor to easily locate the line number references below:
    chat.basic.html – replace 26F1A5C3-DD2C-45FF-BE75-2BC7B85012D0 found on line 10 and line 12 with the GUID you copied from step 6
    chat.basic.embedaspage.html – replace 26F1A5C3-DD2C-45FF-BE75-2BC7B85012D0 found on line 12 and 13 with the GUID you copied from step 6
    chat.basic.embedaswidget.html – replace 26F1A5C3-DD2C-45FF-BE75-2BC7B85012D0 found on line 17 and 18 with the GUID you copied from step 6
    chat.basic.popup.html – replace 26F1A5C3-DD2C-45FF-BE75-2BC7B85012D0 found on line 56 with the GUID you copied from step 6.
    chat.basic.bypassprechat.html – replace 0F8945DB-47EE-4EE2-B541-C86B75440C8F found on line 15 with the GUID you copied from step 6.
    You will see in this same line that a username (jon), email address (myaddress@mitel.com) and topic (something%20to%20talk%20about) are pre-populated. This is an example of how to craft a preformed URL to present to the chat system. A typical use case would be an authenticated user on a customer web-portal requesting chat – no need to re-enter chat form information and you can control the topics from a picklist of preselected.
    NOTE: To use a preform URL, you must set these queue specific configuration options (described below in step 8) :
    UsePrechatArea:false,
    PrechatDataFromUrl:true

    You now need to edit the ..\BasicSamples\Scripts\Chat.Config.js file
    Lines 38-47 are global controls that can be overridden at the individual queue level. Each option is explained in the comment. Example, you wish to display Estimated Wait Time for one queue but not show it on others, you need to enable it Globally true (on Line 38), then disable it for an individual queue (false on line 98).
    Edit lines 49-83 as desired. Each option is explained in the comment. These are settings that apply to the general chat landing page at http(s)://yourserver/ccmwa/chat (not queue specific but will be considered a queue default setting if not overridden at the queue level).
    Lines 86-193 show you how to customize the settings for 3 separate chat queues.
    Lines 86-121 (Music sales)
    Lines 122-157 (Arts&Theater Sales)
    Lines 158-193 (Sports Sales)
    In each queue section, replace the QUEUEID value with a valid GUID for one of your chat queues (like you did in step 7) and update the other options as desired. You can have different screen colors, chat topics, queue stat display options, etc. customized on a queue by queue basis, and that customization is controlled through the ..\Scripts\Chat.Config.js file.
    OutOfBusinessHoursMsg and QueueLabel can contain HTML such as:
    QueueLabel:<font size=”4″>MiCC Chat Demo</font><br><font size=”2″>Powered by Mitel MiCC</font>
    OutOfBusinessHoursMsg:<font size=”4″>We’re Closed Now!</font><br><font size=”2″>Open Mon-Sat 8-4</font>

    You now need to edit the file ..\Websites\CCMwa\Scripts\ContactUs.Config.js to update it with the specific configuration for your site similar to the customization you did in step 7 and 8. Please consult the Multimedia Installation and Deployment Guide section “Implementing Contact Us” for information details on editing the ContactUs.Config.js file to be specific to your voice, email,.chat, and SMS queues.

    Open a web browser that is able to access your MiCC Enterprise Server and go to http(s)://yourMiCCserver/miccbasicsamples
    (example: http://192.168.0.75/miccbasicsamples) and you will get a web page named Chat Deployment Scenarios and you will see:

    Chat Samples
    chat.basic.html
    chat.basic.embedAsPage.html
    chat.basic.embedAsWidget.html
    chat.basic.popup.html
    chat.basic.bypassPrechat.html

    Contact Us Samples
    contact.basic.stacked.html
    contact.basic.horizontal.html
    contact.sideslider.html

    TEST – Click on each of the Chat Samples and ContactUs links

    If you performed the above steps successfully, you will be taken to the chat queue you specified in step 6 when you click any of the chat.basi* links displayed in step 10. Clicking on the ContactUs samples will show you a ContactUs widget with your configured media types, horizontally stacked, vertically stacked, or a slider that slides from the right side of the browser window when clicked on.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.