Chat window

Home > Customizations > Chats > Chat window

How to hide chat window settings

Even though there is no option to edit the chat window header by default, you are able to hide the "Send me a transcript" and/or the "Expand to new window" options using Custom CSS. To do so, navigate to Configuration > Chat > Chat buttons > Edit your chat button. Hide "Send me a transcript" In the "Chat window" tab scroll down to the "Custom CSS" section and add the following CSS code: .TranscriptPanel { display: none !important; } .PopOutButton { top: 35px !important; } Hide...

How to hide attachments icon in the chat window

Even though there is no option to hide the "Send attachment" icon by default, you are able to hide it using Custom CSS. To do so, navigate to Configuration > Chat > Chat buttons > Edit your chat button. Then in the "Chat window" tab scroll down to the "Custom CSS" section and add the following CSS code: .MessageFormAttach { visibility: hidden !important; } Do not forget to APPLY the CSS code and SAVE the chat window.

How to edit chat window header background

Even though there is no option to edit the chat window header by default, you are able to edit it using Custom CSS. To do so, navigate to Configuration > Chat > Chat buttons > Edit your chat button. Then in the "Chat window" tab scroll down to the "Custom CSS" section and add the following CSS code: .InfoPanel { background-color: black !important; border-top-left-radius: 8px; border-top-right-radius: 8px; } Do not forget to APPLY the CSS code and SAVE the chat window.

How to change the chat window branding

Even though there is no free option to edit the chat window footer/branding by default, you are able to hide or change the "Powered by LiveAgent" message using Custom CSS. To do so, navigate to Configuration > Chat > Chat buttons > Edit your chat button. In the "Chat window" tab scroll down to the "Custom CSS" section and add the following CSS code: .Branding { background-image: url(https://cdn.logojoy.com/wp-content/uploads/2019/01/25132926/logo_cocacola-600x197.png) !important; back...

How to hide customer´s initial automated message

Even though there is no default option to hide the customer´s initial message sent by the system if a pre-chat form is used, you are able to hide it using Custom CSS. To do so, navigate to Configuration > Chat > Chat buttons > Edit your chat button. In the "Chat window" tab scroll down to the "Custom CSS" section and add the following CSS code: .MessageNotificationTypeZ, .chatMessagesGroup-My:first-of-type { display: none !important; } Do not forget to APPLY the CSS code and SAVE th...

How to set custom background for chat window

Even though there is no option to use your own image as the chat window background by default, you are able to achieve this requirement using Custom CSS. To do so, navigate to Configuration > Chat > Chat buttons > Edit your chat button (https://www.liveagent.com/features/chat-button-gallery/). In the "Chat window" tab scroll down to the "Custom CSS" section and add the following CSS code: .ChatFrame { background-image: url(https://miro.medium.com/max/1400/1*dP81IJq-tGFxy1rIK3RYsg.png)...

How to change the color of new highlighted message

Even though there is no option to edit chat window messages by default, you are able to customize them using Custom CSS. To do so, navigate to Configuration > Chat > Chat buttons > Edit your chat button. Then in the "Chat window" tab scroll down to the "Custom CSS" section and add the following CSS code: .MessageNotification.MessageNotification-Unread { background: green !important; color: white !important; } Do not forget to APPLY the CSS code and SAVE the chat window.

How to Disable 'Start chat again' button in Chat Windows

By default, customers have an option to start a new chat directly from the previous chat via the 'Start chat again' function: But there is an option in the chat button settings that allows you to disable this function. First, navigate to Configuration > Chat > Chat Buttons > Edit the button you want to use. Then click on "Chat Window" on the left side of the options, and you'll see a check box for "Hide start chat again button" Now the visitors will not be able to start a...

How to display a custom message to the customer after chat

Sometimes you want to display a custom message to the customer when your chat is over. In this case, you can use a plugin called 'Live Chat Tracking'. - find the plugin in your agent panel > Configuration > System > Plugins - activate the plugin by clicking on the 'Activate' button next to it - when the plugin is activated, the agent panel will reload. Then navigate back to the plugins section and click on the 'Configure' button - popup with the plugin's setting will show up. Us...

How to change the color of message text/background

Even though there is no option to edit chat window messages by default, you are able to customize them using Custom CSS. To do so, navigate to Configuration > Chat > Chat buttons > Edit your chat button. Then in the "Chat window" tab scroll down to the "Custom CSS" section and add the following CSS code: /* In the below example, we are changing Avatar background, Messages background and Messages time color to BLACK. In order to change them to a different color, replace all blacks to a...

How to edit chat window system messages

In order to edit the "Calling an online representative..." and/or the "Leave us a message..." messages, you would need to edit your panel language´s translations. To do so, navigate to Configuration > System > Languages > Edit you language > Translations > Search for the message > Click the EDIT icon.

How to change chat window message size/weight

Even though there is no option to edit chat window messages by default, you are able to customize them using Custom CSS. To do so, navigate to Configuration > Chat > Chat buttons > Edit your chat button. Then in the "Chat window" tab scroll down to the "Custom CSS" section and add the following CSS code: .MessageWidgetText { font-weight: 800 !important; font-size: 15px !important; } Do not forget to APPLY the CSS code and SAVE the chat window.

How to force sending a chat transcript

Even though visitors are able to decide whether they wish to receive a transcript or not, you are able to force sending the transcript using an automated rule. A rule can be created in Configuration > Automation > Rules. Below is an example of a rule that will send a transcript regardless of the ticket state set after the chat ends. If you wish to also hide the "Send me a transcript" option from the chat window header, visit this article (https://support.liveagent.com/124150-How-to-hide...
×