> For the complete documentation index, see [llms.txt](https://docs.altu.d1.cx/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.altu.d1.cx/boas-praticas/personalizar-widget.md).

# Personalizar widget

Template Basic:

![](/files/4q0holZNx8V7x6sD3kVi)

Template Zenvia NLU:

![](/files/lmSy7cUZBDaLcTwD8mUH)

### 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

![](/files/fqzMqoqm4s9Z4tsfuVLC)

* 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:

![](/files/2fycRk6259gdevuiXJY7)

* 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.&#x20;

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:

![](/files/6faX2pBPu2pfneUiBKFy)

Se quiser baixá-la, [clique aqui](https://images.endeavor.org.br/uploads/2020/03/27110331/logo-d1-direct-one-empreendedor-endeavor-360x115.png).

#### **Resultado:**

![](/files/3CYhRnVSPh5BAxMvTlmA)