# Personalizar widget

Template Basic:

![](https://776911411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MBjaNm5lB1Yqgih1JCA%2Fuploads%2FBXt4fMPSJ45gd6Z5V8Uv%2Fbasic.png?alt=media\&token=8d041eb7-628f-4a1a-b1d8-736531b60b5b)

Template Zenvia NLU:

![](https://776911411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MBjaNm5lB1Yqgih1JCA%2Fuploads%2FBJ8ypEdpSRLpnOfMsuoM%2FALTU.png?alt=media\&token=b4fd0e2f-41a8-4006-b2c7-bdf317e468a9)

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

![](https://776911411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MBjaNm5lB1Yqgih1JCA%2Fuploads%2FJhbg97UQaFcB3JUNuONJ%2FScreen%20Shot%202022-03-15%20at%2015.30.20.png?alt=media\&token=5047f526-1184-4249-bad0-f92f4016cde4)

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

![](https://776911411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MBjaNm5lB1Yqgih1JCA%2Fuploads%2FJNC5dWq3uc8z3kKLO0ov%2FScreen%20Shot%202022-03-15%20at%2015.33.39.png?alt=media\&token=ca457645-f79d-4137-bb62-b3a33a77f92c)

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

![](https://776911411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MBjaNm5lB1Yqgih1JCA%2Fuploads%2FZ2BqjOyUlfv0xROFizbR%2Flogo-d1-direct-one-empreendedor-endeavor-360x115.png?alt=media\&token=aa6113ec-18e6-4861-99e5-30686e56cf3f)

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

#### **Resultado:**

![](https://776911411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MBjaNm5lB1Yqgih1JCA%2Fuploads%2F93w3ANc39xP2GZsUZh92%2FScreen%20Shot%202022-03-15%20at%2015.41.03.png?alt=media\&token=61dc61d8-fc48-43c6-814e-7b8caa4b050e)