.svg?alt=media&token=d4e6f36f-8994-47d0-b855-83e47927012c)
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-titlepor 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-titletambé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