We are implementing a web messaging custom button for our client.
It has to have database.set command to parse data.
And to launch the messenger on button click.
The bug that we have noticed is that when the button shows before web messaging is ready, it creates error:
could not load plugin
could not register plugin - MessagingService
We tried the following:
Using only Messenger.ready, bug that MessagingService plugin is not registered is shown.
If we try to wait for MessagingService.ready event, than messenger wont work if there is no history. So. it only works if there is an conversation active.
If we reload the page or move through pages on portal, the following error occurs (and I believe it is related to the database.set command being called before all of messenger is loaded): genesys.min.js:10 TypeError: Cannot read properties of null (reading 'appendChild')
We decided to use promises because of Database.set not populating on time.
Can you please check if this code is something that is valid, using timeout and promises? Or if you have any other suggestion, please let me know.
You need to make sure everything is loaded before you start using the commands.
When I added notifications to the chat I had everything in the same script and called all custom code after the Genesys code for loading Web Messaging.
I would probably add the button on the page from the same script, but if it's part of your html, then that needs to be loaded before you can change the visibility.
Instead of making it a function if a promise if you just add this after the initial Genesys code
Do you know which event will show us that everything is loaded. That is what we tried initially without timeout,
but we went in circles with Messenger plugin and MessagingService plugin not being registered. Only the timeout somewhat helps, but it is not a guarantee that everything will load.
Do you have an example of custom launcher button with Database.set?
I'm seeing your struggle of framing things correctly. Let me guide you:
You should subscribe to Database.ready event before calling its command. There is no need to worry about the timing, once you set data in the Database plugin, it will be there and sent along with messages.
You can subscribe to Launcher.ready event if Messenger.ready event isn't working out for any reason. Ideally, it will work. Note that, although Launcher is hidden, Launcher.ready event is still published. There is no need of setTimeouts.
Here is the working script that I framed based on your use case:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<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.inindca.com/genesys-bootstrap/genesys.min.js',
{
environment: 'xx',
deploymentId: 'xxx',
debug: true
}
);
function openMessenger() {
Genesys("command", "Messenger.open");
}
/** Subscribe to Database.ready event before calling its command.**/
Genesys("subscribe", "Database.ready", function() {
// Set the data in the Database plugin. This data will automatically be included along when sending actual messages.
Genesys("command", "Database.set", {
messaging: {
customAttributes: {
name: "testing",
account: "534423"
}
}
})
});
/** You can subscribe to Messenger.ready event or Launcher.ready event **/
Genesys("subscribe", "Messenger.ready", function() {
document.getElementById("messenger_btn").style.display = "block";
});
</script>
</head>
<body>
<button type="button" id="messenger_btn" style="display: none;" onclick="openMessenger()">Launch Messenger</button>
</body>
</html>
Even when adding the code, the same error happens. Can you please check?
The button appears after some time but when I click on it, it displays the error but for the user nothing happens.
The client's home page is heavy with data and that must be the reason why loading of the snippet fails.
We are still having errors, and the button img never shows since the code failed.
The error:
genesys.min.js:10 TypeError: Cannot read properties of null (reading 'appendChild')
at genesys.min.js:36:6828
at genesys.min.js:10:11182
at new Promise ()
at ce (genesys.min.js:10:12501)
at ae (genesys.min.js:10:10960)
at Object.command (genesys.min.js:10:6962)
at genesys.min.js:46:2802
at genesys.min.js:10:12906
Can you please advise if onLoad would help?
Should we add the whole snippet into onLoad function as well as commands, or just commands?
For example here:
document.addEventListener("DOMContentLoaded", function(){
//....
});
It could be that customer page is heavy and thats trying to take time to load the script and initialize. You can try putting the entire code under DOMContentLoaded callback to see if it helps.
But looking at the error could not load plugin file: messenger.min.js, there path to that file is incorrect, it is telling me that Messenger isn't fully initialized and you are trying to execute some of its commands. Note that Any Messenger commands should be executed after Messenger is loaded. Indication for that is subscribing to Messenger.ready. Are there any other Messenger commands that you are calling before Messenger is ready?
If possible, is there a test page that I can see where this error is happening?
We fixed the issue by putting the whole code (except for openMessenger() ) as part of window.onload = function().
It was a heavy loading page and with this event we managed to have it work.
