Original Message:
Sent: 02-10-2025 16:14
From: Robert Wakefield-Carl
Subject: Change Widget Icon within Messenger Configuration
Currently, not unless you use the SDKs. Here is the idea for what you want: Messenger - Icon Style Customization | Genesys Cloud Ideas Portal
------------------------------
Robert Wakefield-Carl
ttec Digital
Sr. Director - Innovation Architects
Robert.WC@ttecdigital.com
https://www.ttecDigital.com
https://RobertWC.Blogspot.com
Original Message:
Sent: 02-10-2025 16:07
From: Kaid Sadikot
Subject: Change Widget Icon within Messenger Configuration
Hi Robert,
Thank you for your message!
Do you know if its possible to change the icons if we aren't building our own messaging launcher?
For more context we are deploying the Messenger snippet code provided under 'Messenger Deployments'
<script type="text/javascript" charset="utf-8">
(function (g, e, n, es, ys) {
g['_genesysJs'] = e;
g[e] = g[e] || function () {
(g[e].q = g[e].q || []).push(arguments)
};
g[e].t = 1 * new Date();
g[e].c = es;
ys = document.createElement('script'); ys.async = 1; ys.src = n; ys.charset = 'utf-8'; document.head.appendChild(ys);
})(window, 'Genesys', 'https://apps.cac1.pure.cloud/genesys-bootstrap/genesys.min.js', {
environment: 'XXXXX',
deploymentId: 'XXXXXXXXXXXX'
});
</script>
------------------------------
Kaid Sadikot
Original Message:
Sent: 02-10-2025 15:12
From: Robert Wakefield-Carl
Subject: Change Widget Icon within Messenger Configuration
Isn't that from the Engage documentation? You are going to have to use the Headless SDK/Guest Messaging API to change that. Here is an example from this resource: Examples
<script type="text/javascript">
const customLauncher = document.getElementById('custom-launcher'); // Custom launcher button
let bMessengerOpened = false; // Initial status of Messenger: closed
// #1 Subscribe to the Messenger.ready event - Show custom launcher button when Messenger is ready
Genesys(
'subscribe',
'Messenger.ready',
(e) => (customLauncher.style.display = 'block')
);
// #2 Subscribe to the Messenger.opened event - Update the status of Messenger as opened
Genesys('subscribe', 'Messenger.opened', (e) => {
bMessengerOpened = true;
/*
Update your custom launcher button here indicating a Messenger opened state i.e. show a KeyboardArrowDownIcon
or hide your custom launcher button if you prefer not to indicate that Messenger is opened
*/
customLauncher.style.display = 'none';
console.log(e);
});
// #3 Subscribe to the Messenger.closed event - Update the status of Messenger as closed
Genesys('subscribe', 'Messenger.closed', (e) => {
bMessengerOpened = false;
/*
Update your custom launcher button here indicating a Messenger closed state i.e. show a MessageIcon
or show your custom launcher button if you prefer to indicate that Messenger is closed
*/
customLauncher.style.display = 'block';
console.log(e);
});
const openMessenger = () => {
console.log('Opening messenger...');
Genesys('command', 'Messenger.open');
};
const closeMessenger = () => {
console.log('Closing messenger...');
Genesys('command', 'Messenger.close');
};
const toggleMessenger = () => {
bMessengerOpened ? closeMessenger() : openMessenger();
};
</script>
------------------------------
Robert Wakefield-Carl
ttec Digital
Sr. Director - Innovation Architects
Robert.WC@ttecdigital.com
https://www.ttecDigital.com
https://RobertWC.Blogspot.com
Original Message:
Sent: 02-10-2025 14:16
From: Kaid Sadikot
Subject: Change Widget Icon within Messenger Configuration
Hello,
How can I change the messenger widget icon from a "chat" icon to "cobrowse"
Within this documentation Customize appearance - Genesys Documentation
It notes to run this:
$("#your-element").append( CXCommon.Generate.Icon("chat") );
There are difficulties with getting the above line to work as we are using the snippet code provided by the messenger configuration.
For more context we want to change the below icon.
#API/Integrations
#ConversationalAI(Bots,AgentAssist,etc.)
#DigitalChannels
------------------------------
Kaid Sadikot
------------------------------