We’ve received a request from a customer that wants the PC web chat widget look and feel changed but they seem unable to. They want to be able to add logo’s and change backgrounds and such. I’ve taken a quick look at the API resource online, and following that I did a quick test by modifying the cssClass and css parameters in the chatConfig object (e.g. background-color), but this doesn’t have any effect.
I also tried to change the css by adding css rules in a local style sheet, but the chat container this pertains to, gets hidden below the other content (chat messages). E.g. changing the background of that container only shows very briefly before the rest of the container is created.
Also trying to change the webchat-conversation classes doesn’t have any effect, as these are loaded in the iframe with seemingly little control over them, even when specified locally.
Could you check from your end if this works alright or something else needs to be done?
The customer should be able to use the "companyLogo" and "companyLogoSmall" config params to change the logo displayed, without needing to touch CSS directly.
Ditto for agentAvatar and userAvatar. However, just setting an agent profile picture in Directory would be a better option than agentAvatar, assuming each agent is to have a picture that is unique to them, rather than a generic picture for all agents.
You're correct that "cssClass" applies only to the iframe element itself, i.e. width/height/border and can not be used to style anything contained within the iframe.
Likewise, the "css" config parameter only accepts attr/value pairs which will be applied to the iframe itself. This param does not accept full CSS selectors to target things within the iframe.
For the voice->screenshare widget, I just added a thing called contentCssUrl, which can be set to http://customers-site.com/blahblah/something.css and then it will pull that in and apply it to everything within the iframe. It hasn't made it to prod yet, and I haven't written code to even do it for chat, but if there's demand, we can SCR it. The other thing is that what it does currently is display it with the default styles, make the network request for the customer's CSS file, and then when that comes in it changes the styles. It only takes about 250ms but there is a very noticeable flicker. I can spend some time thinking about how to mitigate that.
Hi Jon, I guess we'll have to wait for that contentCssUrl then. I am aware of the logos and avatars but this is not sufficient. Just so you understand the situation better: this is for a company that handles chat interactions for a few companies such as Maserati and Ferrari and a few others, so you'll understand branding is of paramount interest to them. Could this be prioritized at all?
HI there, has this been implemented? I mean, can css control more than just the iframe element? This is essential in any branded website, as far as I can see.
Let me echo that this is essential for branding the chat experience. I'm a UX designer, and customizing the chat window is the biggest request I get from contact-center clients. Can we get an update on this feature?
Hi everyone,
Right now this feature has not been implemented as we have been hard at work on other features. Since this looks to be something more people are talking about I will look into moving this up and see when we can get the work started. I will respond back when I have more details.
Hi everyone,
I took a look this morning at the SCR to add this to the web chat side and was able to get the code up for review. I hope this should get put into our main code this week and out to production in the next couple week hopefully as soon as next week. Once I know a date for release I will come and update the thread.
Hi everyone,
Giving a quick update here. The code is still being looked at and we are talking about the side effects of opening this door. If we open this up customers run the risk of styles not working with updates as we may change a class or an element around. I am looking to get the doc in place on this before we release it so that everyone understands what adding your custom style sheet means. Also for those looking to use this is the risk fine or if not let me understand so that we can build this the right way starting out.
At this time I am going to looking into changing around the issue listed above to not just open the door for CSS. Instead I am going to look into exposing options that can be filled out. Like font,text color, background color. Stuff like that. If you could please list some options that customers are wanting to control that would be great. With this solution we do not run the risk of messing up customer web chats but changing around the UI on them.
Hello, as you wrote, ability to alter font, color, background are something that everyone ask. (both on generic messages like connecting, waiting and when client types the message) Also adding some custom labels on UI is something that clients want. Some clients ask to add banners and additional buttons.
As we understand it will be discussion before it's exposed, just hope it will not take much of the time before it goes in production.
RASKO
Thanks for the input. Yeah I understand we want it out quickly just need to make sure we do it in a way that does not cause customers to be fixing their CSS all the time. I will update this thread more as I get to the bottom of what we are going to do and when we get time frames.
Hello @Frederick_Joshua I know that you have written that you will updated this thread once when you get what will be available, but can you share any details about the current status?
Thanks, Rasko
Yeah I have been talking with the product management team and others on how we want to handle this. At this time I can tell you this will not be a small under taking. We do not have a timeframe yet as more needs to be figured out with this feature. Also figuring out when we have the resources to start in on it. My first ideas with opening options is not a sustainably option because customer want to be able to do so much custom css on almost everything. The good news is we have some ideas on how to tackle it. I cannot say anything on timelines at this time though, but know that we understand this is a big thing customers want and are looking into it.
Small updates at this time. We just had an internal hack-a-thon where we explored a solution. We are now meeting with Product Management next week to talk about moving forward. I do not know much more yet. Please know that this is one of the issues we are currently talking about how to implement so we are not just letting it sit.
Thank you. I have another issue I cannot figure out; I am popping the embedded webchat into a div at the bottom of the page. I need the div to close when the 'end chat' button is pressed. This is just javascript close(this) function. Is there any way of adding that to the end chat button operations?
I work as a Product Designer and we're looking to implement your chat feature on our member dashboard. I'm very interest in any custom CSS functionality. I'd love to be informed if anything like this becomes available soon.