Hello,
I am trying to design custom icon launcher for web messaging. But the chat window does not open up on the click. I am using snipped provided in the genesys cloyd website.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#custom-launcher {
border: none; /* Remove the border */
/*padding: 10px 20px; Add some padding */
cursor: pointer; /* Change the cursor on hover */
background-image: url(www.abc.com/image.png); /* Set the background image */
background-size: cover; /* Ensure the image covers the button */
color: transparent; /* Make the text transparent so only the image is visible */
background-repeat: no-repeat; /* Prevent the image from repeating */
background-position: center; /* Center the background image */
width: 100px; /* Set a fixed width */
height: 100px; /* Set a fixed height */
position: fixed; /* Use fixed positioning */
right: 20px; /* Position 20px from the right edge */
bottom: 20px; /* Position 20px from the bottom edge */
}
</style>
</head>
</html>
<button type="button" id="custom-launcher" onclick="toggleMessenger()"></button>
<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.mypurecloud.com/genesys-bootstrap/genesys.min.js', {
environment: 'prod',
deploymentId: 'xxxxxx-xxxx-xxxx-xxxx-xxxxxx'
});
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>
I am getting below error
