Personalizar widget
Ao utilizar os templates de CSS do Zenvia NLU, pode surgir a necessidade de uma parametrização um pouco mais específica.
Template Basic:

Template Zenvia NLU:

Siga os passos abaixo para realizar a modificação apenas com o CSS:
- Nas configurações do widget acesse Aparência e Comportamento

- No template que deseja utilizar insira o código abaixo, que fará com que a tag <span> que contém o título do widget seja ocultada. É recomendado colocar esta mudança próxima das linhas que definem o
.header-title
por organização.
.header-title span {
display: none
}
- Após o segundo passo o título estará oculto como no exemplo abaixo:

- Após remover o título basta ter o link da imagem e inserir ela junto com as mudanças abaixo na classe
.header-title
também na aba CSS do widget:
.header-title{
...
background-image: url(LINK DA IMAGEM);
background-repeat: no-repeat;
background-size: 50%;
background-position: center;
height: 100%;
width: 100%;
}
- Feitas estas mudanças você deverá ter a imagem centralizada no lugar do título.
Uma observação importante é que a imagem tenha dimensões como largura: 150px e altura: 50px ou equivalente a estes valores para que se encaixe bem. Para modificar o tamanho da imagem basta modificar o valor da propriedade
background-size.
Para o exemplo abaixo utilizou-se a seguinte imagem:


Last modified 10mo ago