O sistema oferece várias opções para a personalização completa da aparência do widget da web. Para isso:
- Abra a pasta Luma na pasta luma-web-widget e edite a página luma-web-widget.css, que é exibida como mostrado abaixo.
- A fonte padrão fornecida na folha de estilos CSS é Montserrat. No entanto, é possível usar qualquer fonte de acordo com a necessidade.
- Para alterar a imagem do widget da web, forneça o URL da imagem na imagem de plano de fundo.
Recipiente de bate-papo da Luma
É possível personalizar o recipiente de bate-papo usando as seguintes opções:
- Largura
- Direita
- Inferior
- Altura
Alternar bate-papo da Luma
É possível alterar o ícone de alternância do bate-papo e posicioná-lo editando os seguintes estilos:
- Inferior
- Direita
- Altura
- Largura
- Imagem de plano de fundo
Ícone do bot
É possível alterar o ícone do bot e editar os seguintes estilos:
- Imagem de plano de fundo
- Repetir plano de fundo
- Altura
- Largura
Recipiente de cabeçalho do bate-papo da Luma
Para editar o Recipiente de cabeçalho (para alterar a cor do plano de fundo do cabeçalho do widget da web, como mostrado na imagem de exemplo a seguir), atualize os seguintes estilos:
- Plano de fundo
- Preenchimento
Texto do bot da Luma
É possível alterar a aparência do texto do bot editando os seguintes estilos:
- Cor
- Plano de fundo
- Preenchimento
- Exibir
- Tamanho da fonte
- Raio da borda
- Sombra da caixa
Texto do usuário da Luma
É possível alterar a aparência do texto inserido pelo usuário editando os seguintes estilos:
- Cor
- Plano de fundo
- Preenchimento
- Exibir
- Tamanho da fonte
- Raio da borda
- Sombra da caixa
Informações da mensagem do usuário
Para editar as informações da mensagem do usuário (que inclui a data e hora da mensagem exibida para o usuário), altere o tamanho da fonte.
Ícone de rosto do bot
Para modificar o ícone de rosto do bot, forneça o URL da imagem na imagem de plano de fundo.
Imagem de boas-vindas
Para modificar a imagem de boas-vindas, forneça o URL da imagem na imagem de plano de fundo.
Recipiente de boas-vindas
Para editar o Recipiente de boas-vindas (cor do plano de fundo do recipiente de boas-vindas, como mostrado na imagem a seguir), atualize o URL da imagem na imagem de plano de fundo.