Genesys Cloud - Main

 View Only
Discussion Thread View
Expand all | Collapse all

Genesys Cloud (PureCloud) Chat Widget

  • 1.  Genesys Cloud (PureCloud) Chat Widget

    Posted 02-19-2020 15:01
    Hi,

    I recently set up the basic chat widget that is provide on the Genesys site.  There are 3 fields by default

    1. First Name  "John"
    2. Last Name  "Doe"
    3. Agent Email "alex.agent@example.com"

    I noticed then if I take the agent email portion out of the code, the chat no longer establishes a call to the queue it it set up to call to.

    This works
    <table class="webchat-config"> <tbody> <tr> <th>First Name:</th> <td><input type="text" id="first-name" value="John" /></td> </tr> <tr> <th>Last Name:</th> <td><input type="text" id="last-name" value="Doe" /></td> </tr> <tr> <th>Agent Email:</th> <td><input type="text" id="agent-email" value="alex.agent@example.com" /></td> </tr>


    This does not
    <table class="webchat-config"> <tbody> <tr> <th>First Name:</th> <td><input type="text" id="first-name" value="John" /></td> </tr> <tr> <th>Last Name:</th> <td><input type="text" id="last-name" value="Doe" /></td> </tr>

    I would also like to add a phone number field in the widget that can be used on a web services lookup.

    Any help is appreciated
    Thanks!

    #PlatformAdministration

    ------------------------------
    Michael McQuaid
    AdaptHealth LLC
    ------------------------------


  • 2.  RE: Genesys Cloud (PureCloud) Chat Widget

    GENESYS
    Posted 02-19-2020 15:12
    There is a lot more information on how to configure the Chat Widget in the Developer Center:
    https://developer.mypurecloud.com/api/webchat/

    Regarding the agent-email value:

    • queueName- The queue name that receives chat messages. Example: 'Support' Note: You must specify a queueName or agentEmail. If you specify both, agentEmail takes precedence.

    • agentEmail - The email address for the agent that receives chat messages. Example: 'john.smith@example.com' Note: You must specify a queueName or agentEmail. If you specify both, agentEmail takes precedence.



    ------------------------------
    George Ganahl GCP (PureCloud), ICCE
    Principal Technology Consultant
    Genesys
    ------------------------------



  • 3.  RE: Genesys Cloud (PureCloud) Chat Widget

    Posted 02-19-2020 15:21
    That makes sense, but when I use queue and remove the agent email form the web widget, it breaks the widget, this is what is strange to me, I would not want to specify an agent it goes to, just the queue.

    ------------------------------
    Michael McQuaid
    AdaptHealth LLC
    ------------------------------



  • 4.  RE: Genesys Cloud (PureCloud) Chat Widget

    GENESYS
    Posted 02-19-2020 16:00
    Did you try the recommended sample format instead?
    (function(window) {
      var chatConfig = {
        webchatAppUrl: 'https://apps.mypurecloud.com/webchat',
        webchatServiceUrl: 'https://realtime.mypurecloud.com:443',
        orgGuid: 'YOUR_GUID_HERE',
        orgId: 'YOUR_ID_HERE',
        orgName: 'YOUR_ORGNAME_HERE',
        queueName : 'Support',
        chatNowElement: 'start-purecloud-chat',
        logLevel: 'INFO',
        reconnectEnabled: true,
        reconnectOrigins: [ 'https://example.com' ]
      };
      ININ.webchat.create(chatConfig).then(function(webchat) {
      // Render to popup
        return webchat.renderPopup({
          width: 400,
          height: 400,
          title: 'Chat',
          //set newTab to true if using screen share
          newTab: false
        }).catch(function(error) {
          console.error('Error starting chat');
          console.error(error);
        });
      }).catch(function(error) {
        console.error('Error initializing chat');
        console.error(error);
      });
    })(window);​


    ------------------------------
    George Ganahl GCP (PureCloud), ICCE
    Principal Technology Consultant
    Genesys
    ------------------------------



  • 5.  RE: Genesys Cloud (PureCloud) Chat Widget

    Posted 02-19-2020 16:10
    Edited by Michael McQuaid 02-19-2020 16:14
    The below is what I am using, with my org info and queue.  When I load this on the site, it works as it should, directs to the queue I have designated.  I am just trying to remove the Agent Email from the web form, when I removed what I have striked out on the web form, the chat no longer works.

      <form id="chatForm">
    <h3>Participant Information- local</h3>

    <table class="webchat-config">
    <tbody>
    <tr>
    <th>First Name:</th>
    <td><input type="text" id="first-name" value="" /></td>
    </tr>
    <tr>
    <th>Last Name:</th>
    <td><input type="text" id="last-name" value="" /></td>
    </tr>
    <tr>
    <th>Agent Email:</th>
    <td><input type="text" id="agent-email" value="alex.agent@example.com" /></td>
    </tr>
    </tbody>
    </table>
    <button type="button" id="chat-button">Start Chat</button>
    </form>
    <div id="chat-container" style="height:600px"></div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script
    id="purecloud-webchat-js"
    type="text/javascript"
    src="https://apps.mypurecloud.com/webchat/jsapi-v1.js"
    region="us-east-1"
    org-guid="MY ORG GUID"
    deployment-key=""MY DEPLOYMENT KEY"
    ></script>

    <script type="text/javascript">

    $(document).ready(function initializeChat () {
    var chatConfig = {
    // Web chat application URL
    webchatAppUrl: 'https://apps.mypurecloud.com/webchat',

    // Web chat service URL
    webchatServiceUrl: 'https://realtime.mypurecloud.com:443',

    // organization GUID
    orgGuid: '',

    // Numeric organization ID
    orgId: MY ORG ID ,

    // Organization name. Replace with your org name.
    orgName: '',

    // Requested agent language skill (Agent must have this language skill to receive chat)
    language: 'English - Written',

    // Requested agent skills (Agent must have these skills to receive chat)
    skills: ['Mike Test Chat'],
    // OR
    //skills: [],

    // Priority
    priority: 0,

    // Queue Name
    queueName : 'Z_Mike_Test_Queue 1',

    ------------------------------
    Michael McQuaid
    AdaptHealth LLC
    ------------------------------



  • 6.  RE: Genesys Cloud (PureCloud) Chat Widget

    GENESYS
    Posted 02-19-2020 16:27
    Just checking, based on what you show...I'm not sure what happens when you try to leave an empty row in a table. Did you try deleting the <tr> and </tr> that are wrapped around the agent email row data?

    ------------------------------
    George Ganahl GCP (PureCloud), ICCE
    Principal Technology Consultant
    Genesys
    ------------------------------



  • 7.  RE: Genesys Cloud (PureCloud) Chat Widget

    Posted 02-20-2020 09:01
    Correct, they have been removed.  Below is what I have on the site when it does now work.

    <table class="webchat-config">
    <tbody>
    <tr>
    <th>First Name:</th>
    <td><input type="text" id="first-name" value="" /></td>
    </tr>
    <tr>
    <th>Last Name:</th>
    <td><input type="text" id="last-name" value="" /></td>
    </tr>
    </tbody>
    </table>

    Here is what it looks like when it does work.

    <table class="webchat-config">
    <tbody>
    <tr>
    <th>First Name:</th>
    <td><input type="text" id="first-name" value="John" /></td>
    </tr>
    <tr>
    <th>Last Name:</th>
    <td><input type="text" id="last-name" value="Doe" /></td>
    </tr>
    <tr>
    <th>Agent Email:</th>
    <td><input type="text" id="agent-email" value="alex.agent@example.com" /></td>
    </tr>
    </tbody>


    ------------------------------
    Michael McQuaid
    AdaptHealth LLC
    ------------------------------



  • 8.  RE: Genesys Cloud (PureCloud) Chat Widget

    GENESYS
    Posted 02-20-2020 10:58
    It's just a guess, but perhaps you are using that input value of "agent-email" elsewhere on the page when you submit the request to start the chat.

    You might want to post on the forum at https://developer.mypurecloud.com as well, since that is where more folks participate who can help with the web page configuration for chat.

    I don't have it set up to be able to test things out on my end.

    ------------------------------
    George Ganahl GCP (PureCloud), ICCE
    Principal Technology Consultant
    Genesys
    ------------------------------



  • 9.  RE: Genesys Cloud (PureCloud) Chat Widget

    Posted 02-20-2020 11:18
    Thanks! That was it, you are the BESSSSTTTT...

    It was referencing a variable later in the code, here are the two snippets

    The Presented Fields to user

     <tbody>
    <tr>
    <th>First Name:</th>
    <td><input type="text" id="first-name" value="John" /></td>
    </tr>
    <tr>
    <th>Last Name:</th>
    <td><input type="text" id="last-name" value="Doe" /></td>
    </tr>
    <tr>
    <th>Agent Email:</th>
    <td><input type="text" id="agent-email" value="alex.agent@example.com" /></td>
    </tr>
    </tbody>

    The variables

    else {
    chatButton.onclick = function () {
    var firstName = document.getElementById('first-name').value;
    var lastName = document.getElementById('last-name').value;
    var agentEmail = document.getElementById('agent-email').value;


    How it was fixed with your help

    The Presented Fields to user

    <tbody>
    <tr>
    <th>First Name:</th>
    <td><input type="text" id="first-name" value="John" /></td>
    </tr>
    <tr>
    <th>Last Name:</th>
    <td><input type="text" id="last-name" value="Doe" /></td>
    </tr>
    <tr>
    <th>Phone Number:</th>
    <td><input type="text" id="phone-number" value="" /></td>
    </tr>

    The variables

    else {
    chatButton.onclick = function () {
    var firstName = document.getElementById('first-name').value;
    var lastName = document.getElementById('last-name').value;
    var phoneNumber = document.getElementById('phone-number').value;

    ------------------------------
    Michael McQuaid
    AdaptHealth LLC
    ------------------------------



  • 10.  RE: Genesys Cloud (PureCloud) Chat Widget

    GENESYS
    Posted 02-20-2020 13:21
    Aaaahhhh...it all makes sense now. I kept looking through what you posted for where the agent-name variable was used...finally realized it might be elsewhere on the page :-)

    I'm glad you got it working.

    ------------------------------
    George Ganahl GCP (PureCloud), ICCE
    Principal Technology Consultant
    Genesys
    ------------------------------



  • 11.  RE: Genesys Cloud (PureCloud) Chat Widget

    Posted 02-21-2020 11:19
    Hi George,

    So, I had all this working.  Figured out how to store variables and route to the architect call flow.  All was working, now, today, I can not even launch the web form, was wondering if you could maybe help me?  This is super frustrating

    ------------------------------
    Michael McQuaid
    AdaptHealth LLC
    ------------------------------



  • 12.  RE: Genesys Cloud (PureCloud) Chat Widget

    GENESYS
    Posted 02-24-2020 12:44
    Michael,

    Are you actually editing the javascript source code of the widget in order to hide/remove the email address?  If so, that's not a great idea, as other places in the source could might have dependencies on the existence of those fields, and you would have to modify the source code every time there is a new update to the widget's source code.

    Instead you should use the customization capabilities of the widgets to actually override the form with your own HTML as shown in the example at the bottom of this documentation: https://developer.mypurecloud.com/api/webchat/widget-version2.html#configuration

    What might not be apparent from that documentation page is that there is a 'type' properties that can be applied to each of the fields.  If not specified, the default 'type' value is 'text' meaning to use a text <input> field.  But you can also specify 'hidden', or any other <input> field type there.  This is all described in the detailed widget documentation here: https://docs.genesys.com/Documentation/GWC/Current/WidgetsAPI/CustCRF

    You can specify the form properties statically in the config of the webchat widget, or dynamically by registering a handler for the 'webchat.open' event.



    ------------------------------
    Jim Crespino
    Senior Director, Developer Evangelism
    Genesys
    https://developer.genesys.com
    ------------------------------



  • 13.  RE: Genesys Cloud (PureCloud) Chat Widget

    Posted 02-24-2020 13:03
    It appears that Genesys is blocking our dev web domain. The code works as it should from my wix site, it also works from jsfiddle.com (html test site), and our production web domain. Have a case opened. Hoping to have it resolved soon.

    ------------------------------
    Michael McQuaid
    AdaptHealth LLC
    ------------------------------



Need Help finding something?

Check out the Genesys Knowledge Network - your all-in-one access point for Genesys resources