Embora o ReplyCX ofereça dois temas diferentes para escolher, usando o recurso de edição de CSS, você pode alterar a aparência do widget de chat.

Você pode acessá-lo da seguinte forma:

Configuração do Canal -> Web -> Aparência.

Você só pode fazer isso se estiver no plano Business ou Enterprise.

Atualmente, você só pode modificar o widget de chat do tema 'Moderno'

Personalizações CSS comuns

1. Alterar o plano de fundo do Widget de Chat

Para modificar o plano de fundo do ícone do widget de chat, use o seguinte CSS:

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

2. Ajustar o Tamanho do Chatbot (Consistente na Web e Mobile)

Para garantir que o chatbot não ocupe a tela inteira, você precisa adicionar o código da bolha de chat usando o widget-container-id e aplicar os seguintes estilos ao elemento raiz usando uma media query:

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

3. Dimensionamento responsivo do chatbot

Para ajustar o tamanho do chatbot em telas mobile, use esta media query:

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

4. Reduzir o tamanho do bot pelo CSS abaixo

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

Aqui estão algumas das classes que você pode modificar no widget de chat.

Campo

Nome da Classe

Mensagem pop-up

.avatar

.popup-message

.popup-close-button

Texto do Cabeçalho

.bot-title

Logo do Cabeçalho

.avatar-title

Informações de metadados

.meta-info

.meta-info-label

Mensagem de texto na seção de chat

.text-message

Carimbo de data/hora e indicador de digitação

.timestamp

Diálogo de Opções / Botões

.option-button

Título / Subtítulo / Botões do Carrossel

.carousel-title

.carousel-subscribe

.carousel-button

Botão Enviar do Calendário

.submit-button

Imagem do Carrossel

.card-view-image

Título do Controle Deslizante e Botão Enviar

.popup-title

.submit-file

.add-file

Botão Início

.home-button

.reset-button

Botões de Ação

.action-button

Caixa de entrada no widget de chat

.chat-input

Avatar do Título

.avatar

Cabeçalho do widget de chat

.message-screen-header

Imagem raiz do Carrossel, moldura do Carrossel deslizante

carousel & carousel-image:

.slider-frame

.card-image

Raiz do item da Lista de Arquivos e classes para título, ícone

file-preview: label:

.filepond--root

.iconwrap item da lista de arquivos textwrap:

.filepond--file-wrapper

.filepond--action-remove-item

Entrada de Formulário

.form-input

Entrada de Telefone, caixa de pesquisa para lista suspensa de países, lista de países

.phone-input:

.search-box-sub-container

.country-list

Gaveta do Google Agenda

.google-calendar

Was this helpful?