I'm trying to develop a custom messenger client for my Genesys Messenger Deployment to replace the current chat window. The main reason for this is to follow the same styling and flow as the rest of my website forms. So far I've read through and tried the Build your own Messenger launcher example but I am confused as to what the workflow is to get a functioning chat client the same as I had before.
Do I need to build the entire chat window and its functions from scratch (i.e. the messages view with text bubbles, the input area, the send button, etc.) and then plug it into the various event subscriptions? I felt like the example guide left me off in an incomplete state without actually explaining the use-case of building a custom application.
Any suggestions on a good starting point or resource to look into that could help me with my use case would be appreciated! I'd love to know if you've also done something similar and how involved the development process was for you.
Thanks!
TL;DR: I want to recreate the exact same functionality as the native messenger UI but with my own UI design. How can I accomplish this?
Recommended approach is to use Messenger in "headless" mode: you would disable Messenger native UI via Admin configuration, and still deploy the Messenger snippet to your website. This way you can leverage all of the Commands & Events exposed by Messenger Service plugins, and this also mimics Messenger's internal architecture.
So let's say for example I want to build my own messenger UI, very similar to the way it already exists in the corner. I can build the component as a normal web component using HTML, but I'd need to connect all the actions to the subscribable events via JS code? So this wouldn't need any sort of custom web server to handle the connection between the client and Genesys?
I followed the examples on the headless client custom launcher, but wasn't entirely sure how to connect a custom built chat window to the events. Are there any good guides that showcase this specific use-case? Thank you again.
The custom launcher example there is not Headless mode. From reading above, what you need is to run Messenger with out native UI, for that you have disable the Messenger UI in Messenger configuration, then Messenger will run in headless mode where you can use commands to make API requests and events to listen for updates from service. So yes, you don't have to worry making API requests. You will still run Messenger in a web server as a normal static web app.
Here is how you would use headless SDK:
After you created the deployment configuration, next step is to get the sinppet for deployment in your webpage (see details here). This purpose of this snippet is to initialize Messenger based on the configuration you choosed.
When using Web Messenger in headless mode, it will not have its own UI. So yes, you will need to build your own UI for your Chat application, then use MessagingService plugin commands to make API requests and subscribe to events to make your Chat UI react accordingly. This plugin will be available for usage in Headless mode. There are lots of commands and events available to build your Chat application, please refer here to Messenger Headless mode SDK and MessagingService plugin .
I can give a simple example:
Say you want to start conversation - on click of start chat button in your Chat UI, you would call MessengingService.startConversation command by passing any required data, this would make the API request to setup WebSocket connection. To know if it has successfully setup connection, you can either use the success callback function that gets called or listen to MessagingService.started event. If any errors, then the error callback function of this command will get called, there is also generic MessagingService.error event published, this applies to all other errors as well. Once you have setup the connection, then you can use the MessagingService.sendMessage command to send a message. There are many commands and events available, I suggest please go through our entire documentation to understand what all can be done.
Hope I answered what you are looking for. Let me know if any other questions.