New chat widget customization possibilities

Hi guys,

A few days ago we released new chat widget customization options. Now, you are able to specify the action buttons’ color and set the widget’s background opacity. Thanks to it, you can create stunning themes with transparent backgrounds! See this example:

Currently, color customization includes:

  • the title bar
  • the agent bar
  • visitor’s and agent’s messages
  • the widget’s background and captions

You can also set the widget position, hide ratings, transcripts, and avatar, hide the widget on mobile or show it only after an invitation.

Krzysztof Kraus prepared an excellent summary of all available options with a detailed description - read more about them in his configurator update article.

What will come in the future?

We aren’t finishing our work on customization. We are going to prepare more options to help you integrate the chat widget with your website.

We’re planning to release new mobile settings:

  • a possibility to change the widget position separately for mobile devices
  • a possibility to change minimized type separately for mobile devices

Your mobile layout has some important action button in the bottom right corner? Set minimized type as “circle” and move it to the right, just for mobile.

Do you have more customization needs? Let me know!

8 Likes

The ability to auto send visitors a chat transcript at the end of the chat to the email they provided when they entered the chat could be a nice option.

The ability to decide the height and width of the expanded chat window could be useful. Our website is menu heavy at the top of the page and I’m concerned about covering any menus with the chat window at times.

4 Likes

We do get a few issues with the Chat visibility so are looking at this to see how we can use to help, like everything we do need to constantly review, lokoing forward to future updates

3 Likes

Hi Melissa! Hi Sue! Thank you for your comments!

@melissa.hannam Can you tell me more about your transcript request?

Do you want to send it automatically to every user who provided an email or do you want to trigger it manually in the Agent app after a chat?

We’re working on the chat resize option - we’re exploring customer’s needs in this area. Can you provide the URL or a screenshot of your website to better understand your needs?

@sue : Can you elaborate on those visibility issues?

For us, the ability to customise any element of the window on mobile and desktop using CSS is incredibly important! It helps us integrate the window beautifully into websites.

2 Likes

@Konrad - for the transcript, a setting to have a transcript automatically sent (or not sent, based on preference) was what we were thinking about yes.

Here is a pic of the chat window with our menus. Right now it does not cover menus, but you can see if we were to add another menu after the CONTACT menu, it could be obstructed with the chat window.

Hope that helps!

IMG_6092

1 Like

Hi @melissa.hannam! Thank you for the detailed response.

I’ve checked your website - chat widget size customization is not the best solution to your needs. Chat widget can still cover the menu when visitor’s display is lower.

The best solution is to increase the CSS “z-index” property of your menu’s pop-ups. Ask your webmaster about it. If he has any questions, let him contact me at k.kruk@livechatinc.com.

@Konrad sorry for delayed reply, when customers have the chat pop up in their accounts it can cover some key information, which other than switching chat off for ones that request or changing our site layout leaves me a tad baffled

1 Like

I don’t understand the decision to remove the custom CSS feature. When different popup providers including livechat are fighting to be the highest z-index, not being able to change it is a disaster.

You can’t really just say “Ask your webmaster to increase the z-index of the other elements”. What if the other z-index is a 3rd party tool just like yours where it can’t be changed? Then the user ends up without any possibilities.

Please re-implement this feature asap.

1 Like

Yes CSS is awesome. In not able to switch to the new window as I will lose my cuatomisations.

@Jone @Andy thanks a lot guys for your feedback! I’ve passed to our devs responsible for the new chat window!

Why not add mobile into the options for greetings too?! You already grab the users OS/device in chats. I imagine we aren’t the only customer that would like to greet desktop vs. mobile users differently.

Dear Konrad,

Good morning to you.
My questions as below :-

  • Is there will be any interruption or make confuse for the agent to view while chatting with customers due to transparent view column.
  • Can i suggest to add comment bar just beside the Good Rating bar as attached the image for your view as well.
  • Any possibilities of adding feature to delete message for everyone if we attempt to sent wrongly?

Regards Jen
( RSDH Contact Centre, Malaysia)

Thank you all for the feedback!

Currently, we are focusing on bringing the most popular customization options directly to new chat widget configurator. Since the initial release, we’ve added the possibility to choose different widget style, visibility and position for mobile, change widget side and bottom spacing.

Custom CSS feature gave us complete customization freedom, but it’s nearly impossible to provide such features as rich messages and extensions without breaking someone’s customization. For now, we will focus on adding most needed option to easy use in customizatator, with no need to use CSS.

@mkubot we are preparing new greetings settings. It would be possible to disable greetings on mobile.

@rajendren.maniam
Can you elaborate more on your first question? I’m not sure what do you mean.

Can i suggest to add comment bar just beside the Good Rating bar as attached the image for your view as well.

You mean rating’s comment? It’s possible to add it only after rating the chat with a good or bad option. Do you see it as a separate function?

Any possibilities of adding feature to delete message for everyone if we attempt to sent wrongly?

We have some feature requests about this feature, but it would release a lot of other problems to solve. It’s on our long roadmap, but it won’t be released soon.

2 Likes

I see where you can change the background color and opacity, How do you add a background image?

Yes, please go to Settings -> Chat window -> customization:

Thanks. How do I add a background image?

Unfortunately for now there’s no option to add a background image.