Although ReplyCX offers two different themes to choose from, using the CSS edit feature, you can change the look and feel of the chat widget.

You can access it in the following way:

Channel Configuration -> Web -> Appearance.

You can only do this if you are on the Business or Enterprise plan.

Currently, you can only modify the 'Modern' theme chat widget

Here are some of the classes which you can modify on the chat widget.

Field

Class Name

Pop-up message

.avatar

.popup-message

.popup-close-button

Header Text

.bot-title

Header Logo

.avatar-title

Meta date information

.meta-info

.meta-info-label

text message in the chat section

.text-message

Time-stamp & typing indicator

.timestamp

Options / Buttons dialog

.option-button

Carousel Title / Subtitle / Buttons

.carousel-title

.carousel-subscribe

.carousel-button

Calendar Submit Button

.submit-button

Carousel Image

.card-view-image

Slider title & Submit button

.popup-title

.submit-file

.add-file

Home Button

.home-button

.reset-button

Action Buttons

.action-button

Input box on the chat widget

.chat-input

Avatar for Title

.avatar

Header of the chat widget

.message-screen-header

Carousel Root Image, carousel Slider frame

carousel & carousel-image:
.slider-frame
.card-image

File List item Root and Classes for title , icon

file-preview: label:
.filepond--root
.iconwrap
textwrap file list item:
.filepond--file-wrapper
.filepond--action-remove-item

Form Input

.form-input

Phone Input, Seach box for country dropdown , Country list

.phone-input:
.search-box-sub-container
.country-list

Google Calendar Drawer

.google-calendar

Common CSS customizations

1. Change the background for the Chat Widget

To modify the chat widget icon’s background, use the following CSS:

#chat-bubble-open {
background: url(https://www.hemfrid.se/_next/static/media/logo-chat.9d3ab5d1.png) 50% / cover no-repeat;
}

2. Adjust the Chatbot Size (Consistent on Web & Mobile)

To ensure the chatbot doesn’t take up the entire screen, you need to add the chat bubble code using widget-container-id and apply the following styles to the root element using a media query:

<script src="https://app.talkie.se/chat-widget/7JQoJfxPNVAd193002441108qMitvJJh.js" defer></script> widget-container-id="root" widget-height="500px" widget-width="600px" defer

3. Responsive chatbot sizing

To adjust the chatbot size for mobile screens, use this media query:

@media screen and (max-width: 499px) {
    iframe#widget-chat-window {
        width: 100% !important;
        height: 300px !important;
    }
}

4. Reduce the bot size through CSS below

.app-container{
width: 400px !important;
height: 425px !important;
}

Was this helpful?