WebChat Configuration

Genesys Cloud Web Chat
1

Hi,

I'm working on a webchat for one of the company service (internal IT helpedsk). And to be honest , I clearly lack competence.
I want to implement a version 2 web chat on a google site (so only html block available, i can't import external script, everything has to be in the same file.). Here is what i want to get at the final :

  • I need to get some specific fields (this is ok for me), and want to update some colors, and assets in the chat to be more representative for the company.
  • I would need a dropdown list for one last item
  • If possible, i need a item to import external files (picture for the most of times)
  • Last thing, if possible, i need that tchat to be opened in a new window.

Here is my code for the moment, very simple :

<"script src="https://apps.mypurecloud.de/widgets/9.0/cxbus.min.js" onload="javascript:CXBus.configure({debug:false,pluginsPath:'https://apps.mypurecloud.de/widgets/9.0/plugins/'}); CXBus.loadPlugin('widgets-core');"></script">

<"script>
window._genesys = {
"widgets": {
"webchat": {
"transport": {
"type": "purecloud-v2-sockets",
"dataURL": "https://api.mypurecloud.de",
"deploymentKey": "xxxxxxxxxxxx",
"orgGuid": "yyyyyyyyyyyyyy",
"interactionData": {
"routing": {
"targetType": "QUEUE",
"targetAddress": "Test Chat",
"priority": 2
}
}
},
"userData": {
"addressStreet": "",
"addressCity": "",
"addressPostalCode": "",
"addressState": "",
"phoneNumber": "",
"customField1Label": "",
"customField1": "",
"customField2Label": "",
"customField2": "",
"customField3Label": "",
"customField3": ""
},
}
}
};
function getAdvancedConfig() {
return {
"form": {
"autoSubmit": false,
"firstname": "",
"lastname": "",
"email": "",
"subject": ""
},
"formJSON": {
"wrapper": "

",
"inputs": [
{
"id": "cx_webchat_form_firstname",
"name": "Prénom",
"maxlength": "100",
"placeholder": "Required",
"label": "Prénom"
},
{
"id": "cx_webchat_form_lastname",
"name": "Nom",
"maxlength": "100",
"placeholder": "Required",
"label": "Nom"
},
{
"id": "cx_webchat_form_email",
"name": "Numéro de Série de la machine",
"maxlength": "100",
"placeholder": "Optional",
"label": "Numéro de Série de la machine"
},
{
"id": "cx_webchat_form_subject",
"name": "Ticket SMA",
"maxlength": "100",
"placeholder": "Optional",
"label": "Ticket SMA-X"
}
]
}
};
}
const customPlugin = CXBus.registerPlugin('Custom');
<"/script>
<"button type="button" id="chat-button" onclick="customPlugin.command('WebChat.open', getAdvancedConfig());">Start Chat</"button>

I've reached out lot of article in all around the community (this one helped me a lot for example)
I don't understand the global code disposal (should the i18n JSON go in the _genesys.widgets.webchat ? Can i implement the Less (css converted) file in the header, as a classic html file ? What is the widgets-core file, is it the the json window._genesys.widgets ?

Thanks a lot for your time.

2

Hello,

Just as a note, I have edited your question to "hide"/"replace" the deploymentKey and orgGuid. You should always remove such identifiers before posting - this is just for your own security.

Regarding your questions, I'll try to post some answers a bit later - need to aggregate different information.

But could you clarify the following first?

When you're saying that you can't import external scripts, do you mean that you only have the ability to add code in a single file (html) and that you can't host an additional file (css, js, ....), but that you can load external files/libraries available on a public/global address? Right?

Regarding language, are you just trying to display the widgets standard labels in a specific language (I guess French - it is a supported language)? Or will you have to change/customize the labels (using a different value than the widgets built-in ones)?
Language for French is here: https://apps.mypurecloud.com/widgets/9.0/i18n/widgets-fr.i18n.json

In order to start a chat, do you need to put a custom button in a specific place in your html page?
Or do you want to use the native WebChat Widget button (it would be a small button on the right hand-side of the page)? Or do you want to use as well the native WebChat AutoInvite (a small overlay that will appear at the bottom of the html page after few seconds, inviting the customer to start a chat)?

Regards,

1 Like
3

Hi Jerome !

Thanks for your reply. Let me clarify those points :

  • The external css, js files : The only problem here is that i have to work with block and containers provided by the google sites builder. I can import from free library for sure, but i prefer getting a single html elemnt (where i can include some js and styles elements). Actually this point is not very problematic, i've solved this. :wink:

  • For the language, we are french as you noticed. Considering that the service is an international service within the company, leaving English as the main language is not a problem, on the contrary.

  • The WebChat Widget button would be great for this but it's only a matter of deisgn to be honest. My main preocupation is to know if i can open the chat in a new window. According to the comparison table for webchats widgets, this is not something feasable for the version 2 of the widget, is there any tips we can do for ? (like a simple onClick="window.open(..." for example)

  • Also, i can not find any clear information about an attachment file availability. Some documentations are showing a button to attach files on a web chats, some other not, and some topics in the forum are telling that it's not available for now. Do you have any information about this ?

To resume, the two first points are not my first concern. The major point i need to solve are the two last ones. the attachement is something very important for the service. As an IT helpdesk, they have to be able to receive some screenshots, files from customers, as you can understand.

thanks for your time

4

"if i can open the chat in a new window"
No, calling Widgets start chat will make the webchat window part of your existing page (as an overlay).
If you want to open a chat in a different window, you'll have to do this via html/js (outside of the Genesys Widgets). I mean opening a different page in a popup. And that second page will be the one containing the Widgets libraries, configuration and customization.

"attachment file availability"
Attachment of file is not supported at this time with Widgets v2 (Chat v2).
This is in the roadmap for next generation of chat protocol (web messaging). Here's the link to the high-level idea for web messaging https://genesyscloud.ideas.aha.io/ideas/CLDIG-I-589

Regards,

1 Like
5

Thanks Jerome for those explanations.

Last point, is there a way to resize the chat window ?

Thanks

6

No, there is no configuration allowing to resize the chat window (to a specific size).

But in case that can answer your need, it is possible to have the chat window take the entire size of the page it is added to.
This is what happens when you view the Chat Window from a mobile browser.
So what you can do is to force the mobile mode, setting mobileMode to true in the widgets main configuration.
See below:

window._genesys = {
    widgets: {
        main: {
            debug: true,
            theme: 'mybrand',
            themes: {
                 "mybrand": "cx-theme-mybrand"
            },
            timeFormat: 24,
            lang: 'fr',
            i18n: "https://apps.mypurecloud.com/widgets/9.0/i18n/widgets-fr.i18n.json",
            mobileMode: true,
            mobileModeBreakpoint: 600
        },
        webchat: {
            ...
        }
    }
};
7

To correct something in your original post/widgets configuration.
When you define your custom fields, be aware that the "name" attribute corresponds to the keyname which will be used to store that data into the Genesys Cloud Chat Conversation (participant attribute).
Ex: name: "firstname" means that the value will be propagated to the Chat Conversation participant attribute as context.firstname
So do not change them for your Prenom and Nom. I mean use firstname and lastname for these 2 fields (as name attributes).
For the other two, pick something working for a variable/keyname like computerSerialNumber (not name: "Numéro de Série de la machine") and smaTicket (not name: "Ticket SMA")

To answer some of your other questions.

Can i implement the Less (css converted) file in the header, as a classic html file ?
Yes, you can just add the converted css (following what's explained here) inside a <style>....</style> element

I would need a dropdown list for one last item
You can check the example I gave on this post here.

i18n - language
You can see the list of supported languages here.
For other languages than english, you have to set the lang attribute and you can set the i18n to a url (Global CDN) where we store the corresponding labels/translations. See for french in my example above (previous post). Or this other post for spanish.
For english, the language file is included in the widgets library, so you just need to set lang to 'en'.
This is if you use the predefined/built-in translations.

Regards,

8

Hello Jerome,

Thanks for all those details. This is helping a lot. I'm interested about one last element that evocated before :

Or do you want to use the native WebChat Widget button (it would be a small button on the right hand-side of the page)?

Can you share with me some documentation to deploy by this way ?

9

Sure.

Under window._genesys.widgets.webchat , you would add these 2 attributes: autoInvite (for the toast inviting customer to chat) and chatButton (for the native chatButton on right hand-side of the page) [with enabled: true if you want these to be active]:

window._genesys.widgets.webchat = {
    ...
    autoInvite: {
        enabled: true,
        timeToInviteSeconds: 5,
        inviteTimeoutSeconds: 30
    },
    chatButton: {
        enabled: true,
        openDelay: 100,
        effectDuration: 100,
        hideDuringInvite: true,
        template: "<div class='cx-widget cx-webchat-chat-button cx-side-button' role='button' tabindex='0' data-message='ChatButton' data-gcb-service-node='true'><span class='cx-icon' data-icon='chat'></span><span class='i18n cx-chat-button-label' data-message='ChatButton'></span></div>"
    }
};

Similar to the webchat configuration description here.

You would also need to preload the webchat plugin. The Widgets are using a "lazy-loading" model - which means that the library/module specific to a widget plugin (like webchat, sidebar, ...) is only loaded when you invoke a widgets command (WebChat command, Sidebar command) or if you ask to specifically preload that lplugin.
In the case of autoInvite and chatButton, as you want these 2 to start working as soon as the page is loaded, you need to tell the widgets configuration to preload webchat plugin.

In your Widgets main configuration section, add the preload attribute (I am showing it as a separate assignment here - but you can add it to the main structure I was showing above):

window._genesys.widgets.main.preload = [
    "webchat"
];

Regards,

10

Hey Jerome !

Thanks for those elements.

I finally decided to go for the versions 1.1 for the webchat because of teh pop up window possibility.
Is it possible inf this version to include the attachment? Also can we use smiley there ? I don't see the variable to allow it or not.

Regards,

11

I haven't used Widgets v1.0/v1.1 much.
There is no configuration to have a list of smileys exposed in a drop-down. But sending it via the chat window might work.
There is no file attachment there either.

Here for feature comparison: https://help.mypurecloud.com/articles/widget-feature-comparison/

And what's available regarding configuration on Widgets 1.0 (it applies to Widgets v1.0 and Widgets v1.1):
https://developer.mypurecloud.com/api/webchat/index.html
https://developer.mypurecloud.com/api/webchat/schedules.html

12

This topic was automatically closed 31 days after the last reply. New replies are no longer allowed.