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: