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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.altu.d1.cx/boas-praticas/personalizar-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.