Hi,
We are trying to customize the widget , where we are trying to change the theme for and add customer branding(Logo) to the chat window.
We are referring to the [Customization] and couldn't get the steps we need to carry out for customizing the chat window. We tried the example.Webchat|690x336 (https://all.docs.genesys.com/WID/Current/Developer/GWCCustomize)
Please help us with the stepwise instructions and let us know where we can edit to customize the chat window.
Regards,
The doc you linked contains instructions for creating custom themes. Can you be more specific about what part you're having trouble with?
I need to understand how we can customized the widgets ?
Are there any CSS and .JS files where we could edit and add if any logo's or customize the themes.?
Are there any API we need to access to get this done ?
It would be great if we have an stepwise document for same.
Thanks,
Hello,
Maybe to start with what is not possibe:
What is possible is to:
change the labels values
if you wish to display a different text than the original one
Ex: "Live Chat" to "Company XYZ Chat"
https://all.docs.genesys.com/WID/Current/Developer/GWCInternat
Original labels for WebChat: https://all.docs.genesys.com/WID/Current/SDK/WebChat-combined#Default_i18n_JSON
change the css theme
[color for text/icon/borders/outlines, background, font-family, font-style, border-color, border-style, and other non-structural properties]
https://all.docs.genesys.com/WID/Current/Developer/GWCCustomize
change the WebChat Registration Form collected information
if you want to collect other information than firstname, lastname, email and subject
https://all.docs.genesys.com/WID/Current/SDK/WebChat-combined#Customizable_chat_registration_form
A) Changing label values - Example with the "Live Chat" text in WebChat window.
First, let's the find the key/reference of that label in https://all.docs.genesys.com/WID/Current/SDK/WebChat-combined#Default_i18n_JSON
The key for this label is "ChatTitle".
Note that "Live Chat" also appear in other "labels" used for Web Content Accessibility Guidelines (WCAG) 2.1, Level AA.
Info on Accessibility: https://all.docs.genesys.com/WID/Current/Developer/Accessibility
When we set the widgets configuration, we can override the label values the following way (let's say for US English):
window._genesys.widgets.main.i18n = {
"en": {
"webchat": {
"ChatTitle": "CompanyXYZ Chat",
"AriaWindowLabel": "CompanyXYZ Chat Window",
"AriaMinimize": "CompanyXYZ Chat Minimize",
"AriaMaximize": "CompanyXYZ Chat Maximize",
"AriaClose": "CompanyXYZ Chat Close"
}
}
};
B) Changing the css theme
There are 2 natives themes: "dark" and "light" modes.
You can add your own theme to change colors for text/background....
Let's say I want to add a new theme that I will name "mybrand" (this is just the keyname of the theme).
For the css class name, I will use "cx-theme-mybrand".
What I need to do is:
a)
In order to create your new css, you can start from the 2 samples provided in this page: https://all.docs.genesys.com/WID/Current/Developer/GWCCustomize
theme-template-dark.less or theme-template-light.less
(download links provided in the page)
I will download the "theme-template-dark.less".
I first need to convert it to a css format (from less).
You can find online webtool to do this. I have used this one: https://jsonformatter.org/less-to-css
Now, take the css and copy it into a file - ex: mybrand_custom.css
As we started from theme-template-dark.less, we need to replace the "cx-theme-dark" with the name we have chosen for our own theme: "cx-theme-mybrand".
You can modify colors in this css based on your needs.
You can also add additional style properties which will apply to the containers referenced in the css.
Ex for the window title:
.cx-widget.cx-theme-mybrand .cx-titlebar .cx-title {
color: #FDFDFD;
}
b)
In your html page, you need to reference this new css file (ex: mybrand_custom.css).
Before importing the scripts to load the widgets libraries and configuration, just add a link element.
This is what I have in my html page:
<link rel="stylesheet" href="mybrand_custom.css">
<script src="https://apps.mypurecloud.com/widgets/9.0/cxbus.min.js" onload="javascript:CXBus.configure({debug:true,pluginsPath:'https://apps.mypurecloud.com/widgets/9.0/plugins/'});CXBus.loadFile('pc_config.js').done(function(){CXBus.loadPlugin('widgets-core');});"></script>
Note 1: in my case, "mybrand_custom.css" is located at the same level than the html file.
Note 2: the "pc_config.js" I am referencing in the script element is where I set the widgets configuration and configuration. This is not mandatory to follow this approach. I just prefer to separate the html page/code from what relates to the widgets configuration and customization. The "pc_config.js" is also located at the same level than the html in my example (you can change this to a relative path or full url path if you prefer to store somewhere else).
c)
In my widgets configuration (initialization), I now need to tell the widgets to use that new theme (which is using a class name = "cx-theme-mybrand")
I just need to set the following (in my case, it is done in the pc_config.js).
window._genesys.widgets.main.theme = "mybrand";
window._genesys.widgets.main.themes = {
"mybrand": "cx-theme-mybrand"
};
d)
Coming back to the css - the cx-theme-dark, cx-theme-light or the cx-theme-mybrand you generated from one of the following native template will change the colors/... for all windows from Genesys Widgets (not just WebChat).
If you want to change the colors/fonts of one specific widget (Ex: WebChat) and apply a different set of colors/fonts to another widget (ex: SideBar), or if you want to change the color of a specific element in the widget, you can follow what is described in "Change the appearance of a specific widget" in this page: https://all.docs.genesys.com/WID/Current/Developer/GWCCustomize
In order to do that, you will have to specify the class name specific to the widget you want to change. Ex: cx-webchat for the WebChat window.
Or for the form inputs of the WebChat window only (and have other widgets use a different color): .cx-webchat .form input
If you want to use a different font (than the one used by Genesys Widgets), you can add something like this in your custom css:
.cx-widget{ font-family: name-of-font-here; }
Now, let's say I want to change the Title bar, setting a background-image with a different background-color.
In my css, I would add (as it is not present for this one specifically)
.cx-widget.cx-theme-mybrand .cx-titlebar {
background-color: rgb(142, 192, 248);
background-image: url("mybackground.png");
}
If I want to set this background image and color only for the WebChat widget, I would use:
.cx-widget.cx-theme-mybrand .cx-webchat .cx-titlebar {
background-color: rgb(142, 192, 248);
background-image: url("mybackground.png");
}
C) Collect different inputs in the Chat Registration Form
If you wish to collect additional information during the Chat Registration Form, you can define these via widgets configuration.
When you define new inputs, they will be automatically extracted and sent in the initial Chat Request (they will be added with keyname equal to what you have defined in the name property)).
See here for a basic example: https://all.docs.genesys.com/WID/Current/SDK/WebChat-combined#Default_example
Hope this clarifies.
Regards,
Thanks alot!!!!!!!! Jerome.Saint-Marc
@Jerome.Saint-Marc man, you are awesome!
You have simplified and explained life to me in this post, thank you very much!
I have a question, even if I add the option to upload files in my code "uploadsEnabled: true" does not work for me, could you give me a hand please? Is there any permission I should activate or something else I should do?
window._genesys.widgets.webchat = {
transport: {
type: "purecloud-v2-sockets",
dataURL: "https://api.usw2.pure.cloud",
deploymentKey: "------",
orgGuid: "------",
interactionData: {
routing: {
targetType: "QUEUE",
targetAddress: "SSD_Entrante",
priority: 2
}
}
},
emojis: true,
uploadsEnabled: true,
confirmFormCloseEnabled: true,
timeFormat: 24,
actionsMenu: true,
maxMessageLength: 700,
charCountEnabled: true,
autoInvite: {
enabled: true,
timeToInviteSeconds: 10,
inviteTimeoutSeconds: 30
},
minimizeOnMobileRestore: false,
markdown: false,
ariaIdleAlertIntervals:[50,25,10],
ariaCharRemainingIntervals:[75, 25, 10]
};
Hello Arnaldo.
Happy to hear this post could help you.
Regarding your question, unfortunately, upload of files is not supported yet on PureCloud.
The Genesys Widgets are available on all of our platforms (Genesys Cloud - also known as PureCloud; PureEngage and PureConnect). The same code is used (except some libraries to use different protocols - like Chat).
Currently, upload of file is not available when used with PureCloud.
So the "uploadsEnabled" option has no effect when Genesys Widgets are used with this platform.
Some side-notes:
A) Emojis
Emojis are available (just making a comment on this one as I see you have enabled it) with both V1 Emoji menu and V2 Emoji menu.
You can extend the list of emojis, add labels, or localize them using the V2 Emoji menu.
To use the V2 Emoji, you just need to add one more option - something like this (you can reduce/change the emojis).
window._genesys.widgets.webchat.emojiList = "🤩🤪🤭🤫🤨₿🤮🤯🧐🤬🧡🤟;🤲:Palms Up Together;🧠🧒🧑🧔🧓🧕🤱₿🧙🧚🧛🧜🧝🧞🧟🧖🧗🧘🦓🦒🦔🦕🦖🦗🥥🥦🥨🥩🇦🇺🇫🇷🎂;🛍:Black Friday;🇨🇦🇧🇷🐉🎅🇲🇽🕯🇨🇳🐰🎥🍂👨💪🎓🔥🎃🕎💕🕉🇺🇸👩🎊🏊🏳️🌈👑☪🌱☘☀🏈🦃💘👰;⛄:Snowman;🎿⚽🌎";
See here for more details: https://all.docs.genesys.com/WID/Current/SDK/WebChat-combined#Customizable_emoji_menu
B) Use of WebChat autoInvite and chatButton (native)
You may have understood that already as I see you have enabled the autoInvite.
The Genesys Widgets follow a model named "lazy-loading".
It just means that the different libraries (javascript for service or UI for each of the widget - like WebChat, SideBar, ChannelSelector, ...) will only be loaded when requested or necessary. This is to avoid having the webclient download all of them if it doesn't need them.
By requested, I mean per configuration.
By necessary, I mean that if not declared in a configuration, and if a widget command is called in the code (like WebChat.open), it will download the necessary libraries.
When you enable autoInvite or chatButton in webchat, it means that these must be enabled/started after the page is loaded.
So in this case, you have to declare the use of webchat in the configuration.
To do this, just add the following in the widgets configuration part of your code:
window._genesys.widgets.main.preload = [
"webchat"
];
One last comment regarding the upload of file: you can request new features and share your use case to help with prioritization of new features at https://purecloud.ideas.aha.io/ideas
There is probably an existing idea for the upload of file (in this case you can vote for it) - otherwise you can create a new one. This will help product management understand and prioritize the needs of our customers.
Regards,
Good morning Jerome, again very complete your explanation, thank you very much for clarifying that question, and also thank you very much for adding the additional comments, just the list of emoticons I could make your first post on this topic work, by adding it to my main index, I couldn't get the "emojilist" command to recognize me but adding it to the auxiliary .js worked perfectly for me.
I have one last question and excuse me for being so heavy with the topics, but maybe I can help others with the same problem as me.
Regarding the validations of the form, I am not getting it to work correctly, I have an index.html where I have put the format of the code provided in "https://developer.usw2.pure.cloud/developer-tools/# / webchat "and I've added validations to the input fields, but while it marks me" red "when I don't enter anything, it also marks me" red "when I add something to the first and last name fields. Is there something I should change or is there something I should add?
function getAdvancedConfig() {
return {
"form": {
"autoSubmit": false,
"firstname": "",
"lastname": "",
"email": "",
"subject": ""
},
"formJSON": {
"wrapper": "
The problem with this, is that even though I fill in the fields of "name and surname" it keeps marking me in red, not letting me enter the chat
It is the last problem that I am having, in advance again thank you very much for all the help.
Can you post again your getAdvancedConfig() function code - this time selecting the text and clicking on the Preformatted Text icon ("</>") before sending the reply. Otherwise content with dollar sign or html element gets "corrupted" when you publish/send the reply. So I am not seeing your full original code.
And also, if you can explain what you are trying to validate in the different fields. I mean what criteria you want to use to consider if the value is correct or incorrect (for firstname, lastname, email, subject)
"formJSON": {
"wrapper": "<table></table>",
"inputs": [
{
"id": "cx_webchat_form_firstname",
"name": "firstname",
"maxlength": "100",
"placeholder": "@i18n:webchat.ChatFormPlaceholderFirstName",
"label": "@i18n:webchat.ChatFormFirstName",
"autocomplete": "off",
"validateWhileTyping": true, // default is false
"validate": function(event, form, input, label, $, CXBus, Common){
return true; // or false
}
},
{
"id": "cx_webchat_form_lastname",
"name": "lastname",
"maxlength": "100",
"placeholder": "@i18n:webchat.ChatFormPlaceholderLastName",
"label": "@i18n:webchat.ChatFormLastName",
"autocomplete": "off",
"validateWhileTyping": true, // default is false
"validate": function(event, form, input, label, $, CXBus, Common){
return true; // or false
}
},
{
"id": "cx_webchat_form_email",
"name": "email",
"maxlength": "100",
"placeholder": "@i18n:webchat.ChatFormPlaceholderEmail",
"label": "@i18n:webchat.ChatFormEmail",
"autocomplete": "off",
"validateWhileTyping": true, // default is false
"validate": function(event, form, input, label, $, CXBus, Common){
return true; // or false
}
},
{
"id": "cx_webchat_form_subject",
"name": "subject",
"maxlength": "100",
"placeholder": "@i18n:webchat.ChatFormPlaceholderSubject",
"label": "@i18n:webchat.ChatFormSubject",
"autocomplete": "off",
"validateWhileTyping": true, // default is false
"validate": function(event, form, input, label, $, CXBus, Common){
return true; // or false
}
}
]
}
};
}
In the First and Last name field, I would like it to validate only that the field is not empty, or if more criteria can be added, that it contains 4 characters of text.
Email and subject are not required to validate, but I'm curious to know how to make the email field require an email containing an @
Thank you very much again
something like this:
validate: (event, form, input, label, $, CXBus, Common) => /^\S+@\S+\.\S{2,}$/.exec(input) !== null
That will match an email address that has at least one character before the @, one character after it, a period, and at least two characters after it. e.g. x@x.xx is the minimum value. There are certainly more robust regular expressions out there if you want to more strongly validate the input. Also note that's pseudocode and I haven't attempted to run it in an actual chat config. The regular expression is the key component.
That's how my formJSON looks like with the length greater or equal to 4, and the email validation.
I have used that approach for the email validation: https://www.w3resource.com/javascript/form/email-validation.php
"formJSON": {
"wrapper": "<table></table>",
"inputs": [
{
"id": "cx_webchat_form_firstname",
"name": "firstname",
"maxlength": "100",
"placeholder": "@i18n:webchat.ChatFormPlaceholderFirstName",
"label": "@i18n:webchat.ChatFormFirstName",
"autocomplete": "off",
"validateWhileTyping": true, // default is false
"validate": function (event, form, input, label, $, CXBus, Common) {
if (input && input.val() && (input.val()).length >= 4) {
return true;
} else {
return false;
}
}
},
{
"id": "cx_webchat_form_lastname",
"name": "lastname",
"maxlength": "100",
"placeholder": "@i18n:webchat.ChatFormPlaceholderLastName",
"label": "@i18n:webchat.ChatFormLastName",
"autocomplete": "off",
"validateWhileTyping": true, // default is false
"validate": function (event, form, input, label, $, CXBus, Common) {
if (input && input.val() && (input.val()).length >= 4) {
return true;
} else {
return false;
}
}
},
{
"id": "cx_webchat_form_email",
"name": "email",
"maxlength": "100",
"placeholder": "@i18n:webchat.ChatFormPlaceholderEmail",
"label": "@i18n:webchat.ChatFormEmail",
"autocomplete": "off",
"validateWhileTyping": true, // default is false
"validate": function (event, form, input, label, $, CXBus, Common) {
let mailRegEx = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (input && input.val() && mailRegEx.test(input.val())) {
return true;
} else {
return false;
}
}
},
{
"id": "cx_webchat_form_subject",
"name": "subject",
"maxlength": "100",
"placeholder": "@i18n:webchat.ChatFormPlaceholderSubject",
"label": "@i18n:webchat.ChatFormSubject",
"autocomplete": "off"
}
]
}It works perfect. I have no more questions or doubts, thank you very much for your help, time and clarifications.
Just one comment regarding the RegEx I have used.
It validates "regular" domain names ending with .biz, .edu, .ie, .com, .fr ...
If someone is using a strange domain address (which is now possible for certain ones), the regex will fail - like failing for a .cloud or .weird
Or if someone uses special characters in the local part (!#$%&'*+-/=?^_`{|}~) like my$server.com
https://en.wikipedia.org/wiki/Email_address#Local-part
If you need/want to accept these ones as well, you can either update the RegEx or use what Tim described in his post.
Hi Jerome,
We are using custom fields where in we have added some fields but the user input is not getting displayed to the user on Purecloud chat window attached are is the screenshots, appreciate if you can guide us
It should be the details like Subject : testing and Policy : 123456 getting displayed on Purecloud chat interaction details
To display custom fields, you need to use scripts or you can add any standard fields to external contacts if applicable. Here is the documentation: https://developer.mypurecloud.com/api/webchat/widget-version2.html#custom__userdata_
