Hi all,
We would like to help our client to create an interactive form that will put "participant data" into the conversation.
We are facing a problem during page reload because we can't define if there is an active session or not. Based on this information the form is being shown or not. The session information is stored in a cross-domain localStorage that cannot be fetched.
For this moment I use setTimeout and a helping flag set on Launcher.visible event but this solution is very "ugly":
<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.ie/genesys-bootstrap/genesys.min.js', {
environment: '..............',
deploymentId: '...............'
});
</script>
<script type="text/javascript">
Genesys("subscribe", "Messenger.ready", function(){
//hiding form
Genesys("subscribe", "Launcher.visible", function(){
window.launcherVisible = true;//helping flag for page reload with active session
document.getElementById("custom-form").style.display = "none";
});
//showing form after conversation is closed
Genesys("subscribe", "Launcher.hidden", function(){
document.getElementById("custom-form").style.display = "flex";
});
//showing form
Genesys("subscribe", "Launcher.ready", function(){
console.log("Launcher.ready");
setTimeout(()=>{
if(!window.launcherVisible){
document.getElementById("custom-form").style.display = "flex";
}
}, 1000);
});
});
</script>
<script type="text/javascript">
//submit form and start GC Messenger
function submitFormToMessenger(){
//some validation
if(!document.getElementById("custom-form-name").value || !document.getElementById("custom-form-surname").value)
{
alert("Please provide name and surname.");
return;
}
//inicjalizacja
Genesys("command", "Database.set", { messaging: { customAttributes: {
custom_name: document.getElementById("custom-form-name").value,
custom_surname: document.getElementById("custom-form-surname").value
}}},
function(data){ /* fulfilled, returns data */
Genesys("command", "Messenger.open",
{},
function() {
/*fulfilled callback*/
},
function() {
/*rejected callback*/
}
);
},
function(){ /* rejected */
});
}
</script>
<!-- some form -->
<form id="custom-form" style="margin:auto; width: 250px; display: none; flex-direction: column; padding: 16px; border-radius: 8px; background-color: #cccccc;">
<input placeholder="Name" type="text" id="custom-form-name" value=""/>
<br />
<input placeholder="Surname" type="text" id="custom-form-surname" value=""/>
<br />
<button type="button" onclick="submitFormToMessenger()">Submit</button>
</form>
Can you see more clean solution to find out if the chat session is active during a page loading?
BR,
Dominik
Hi @Dominik_Libner trying to better understand the criteria for showing the form: it sounds like you would need an Event from MessaigngService Plugin when a session already exists, to avoid showing the form again?
Hi @Dominik_Libner,
To determine if there is an active session available or not, you could rely on MessagingService.restoring event. This is something new that we added recently which is published when we detect that there is an active session to restore. This would be the earliest way for you determine any active conversation.You will soon see this available in our MessagingService Plugin documentation.
Alternatively, you could also rely on MessagingService.restored event which is published a bit later than MessagingService.restoring event as it waits until after the conversation history is fetched. Hope this helps, let us know.
Thank you for your answer. Technicaly "MessagingService.restoring" is equivalent to "Launcher.visible" for me because it indicates that Messenger is going to be displayed and I don't want to show my form component. This scenario is still "event racing" because I would like to show my form component as soon as possible if there is no session to restore. I actually need an information that there is no session to restore when "Messenger.ready".
Concept:
Genesys("subscribe", "Messenger.ready", function(data){
if(!data.session){
//show form component
}else{
//do not show form component
}
});
Can you see any equivalent solution for this?
Launcher.visible if I am correct is being displayed every time that circle button appears, which opens the chat, no matter if it is started or not.
Could I ask you if you use any custom button for the form to appear?
Because actually our web devs have achieved similar functionality and it went successfully. Probably it is a good point to show Form and Web Messaging only when all the plugins have loaded successfully and load the form only when there is not on-going conversation & hide chat by that time and launch it only when form is fulfilled.
The main idea if you want everything to fire in proper way, allow SDK to fully load and then perform actions on it, if the idea is understandable. Because if you make the form appear immediately when site is launched, you do not leave any space of time for SDK to do its actions on back-end, because it has to load all the plugins.
My form is hidden by default. I load the SDK and wait for the Messenger.ready event. On that event, I need to know whether to show the form, but the only events available for subscribtion are those informing about a running conversation (which would hide the form). In there was no conversation at all, there is no way to show the form other than setting a timeout for X seconds and waiting for conversation restoration. If the time elapses, the form will be show. I don't find this solution elegant.
Am I missing something? Isn't there a straightforward way to explicitly define whether there is a conversation to restore when the SDK is ready?
It is a bit hard to understand your initial setup which you expect to achieve, but I will assume its a button on the bottom right corner, which if you press shows up a form if conversation is new, but opens a chat if it is not.
If you use native Messenger button at the bottom right, I feel like it will create really flickery animations and really weird behaviour, the way I would set that up is create custom chat launcher button, which acts like this on press:
- Loads only when SDK loads successfully with the plugins needed.
- Conversations.ready - base plugin ready event for further initial chat launches
- Conversations.started - event that can be used to determine when chat is initially launched (for example chat has initially started, customer minimizes chat, opens chat again -> the form does not open, because Conversations.started has marked a flag that there is chat already on-going)
- MessagingService.ready - base plugin ready event for the further command which is used when page refreshes, redirects happen
- MessagingService.restored - event that can be used to see that conversation is on-going for the page refreshes, redirects to other pages within a website (for example there is chat on-going, customer redirects to another page OR refreshes the page, customer opens a chat, chat immediately opens without a form, because MessagingService.restored has marked a flag that there is on-going conversation already from previous website visits)
In Genesys Messenger Configuration do following:
- Hide chat launcher button, since you will open chat via this custom button with commands and code.
For this approach of course, remember to cover all scenarios:
- Set flags for on-going conversation as false if customer clicks on the trash icon in chat (if you allow it) when they want to clear conversation, because it clears out participant data and form needs to be shown again.
- If aschronous chat 72 hours sessions runs out, then session is cleared out and history is erased, but no need to add additional checks for that, since then MessagingService.restored will show that there is no on-going conversations which will force form to appear.
I can see now why we struggled to understand 
I was talking about a form automatically displayed at page without any interaction (no chat button in the right corner - just an optional form as a part of the page).
And you are talking about a form that shows up on intentional click on the custom button.
Anyway the custom flag to track starts and stops for interactions seems to be the solution. Thank you.