Hi there,
I've been struggling with Dynamics 365 Customer Service for some months and the Community is not been helpful for the matter that I will describe below.
We have 2 chatbots in 2 of our websites.
One is using just PVA with no hand-off to an agent: https://www.mobilephoneinsurancedirect.com and the other one, which is our main website, is using PVA connected with Omnichannel, where the conversation can be handed-off to an agent https://www.loveitcoverit.com.
As we are using our FAQ to give the customers all the resources they need to resolve their issues, the multiple options became an enemy of the customers when it comes to UX.
So, using just PVA is possible to customise the whole chat window and how the multiple options will appear on the chat as you can see on this screenshot: https://www.mobilephoneinsurancedirect.com/chatscreenshot/mpid.png.
On the other hand, when using Dynamics 365 Customer Service, is not possible to customise more than a few things as D365CS does not give us any way possible of doing it. Therefore, the multiple options appears like you can see on this screenshot: https://www.loveitcoverit.com/wp-content/uploads/chaticon/lici.png.
As you can see in the second screenshot, the multiple options are displayed in a horizontal way where the users can't see the whole options. Pressing the arrow, it goes to the second option and so on. At the end of the day, it's not clear what the options are and the users get frustrated and abandon the chat without reaching a solution for their problems.
On the first screenshot, I managed to change the css on the PVA and show the multiple options in a vertical list.
It's just possible when using just PVA, but not when connecting to Omnichannel - D365CS.
How I managed to show the multiple options as a vertical list?
To do that I place some css to overwrite the css from the PVA engine as follow:
.react-film__filmstrip__list {
display: block !important;
word-wrap: break-word !important;
}
.react-film__filmstrip__item {
padding-left: 0 !important;
}
.react-film__filmstrip__item {
padding-right: 0 !important;
}
If the css above is implemented directly in the PVA engine, the multiple options will be displayed as a vertical list and consequently the Dynamics 365 Customer Service will follow the same path automatically.
I hope this change is clear and if not, please let me know.
Looking forward to the implementation of the Multiple Options Display as a Vertical List soon on PVA and D365CS.
Kind regards,
Fernando Silva
Administrator on 3/29/2023 10:37:22 PM
There are two options for accomplishing this:
1. With the out of box widget, you can adjust the suggested action layout using a data tag. See: Customize live chat widgets using data tags | Microsoft Learn
2. We have a much more customizable version of our live chat widget available in preview today. See: Develop a custom live chat widget | Microsoft Learn
Thanks for the feedback and interest in these features!
Jonathon Nelson
PM, Microsoft