Comment on page

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:
Configuração
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:
Se quiser baixá-la, clique aqui.
Resultado:
​

Dicas de gestão de NLU

Next - Monitor

Dashboard

Last modified 1yr ago