# 11.01 WEBCHAT

##

{% embed url="<https://drive.google.com/file/d/1yu7dMq8HHA4IwZHSsRkPV3JCZJiDdvye/view?usp=sharing>" %}

## 📝 Tutorial: Personalizar WebChat (idioma + color)

📂 Abre el archivo del **widget WebChat** y busca las siguientes líneas para editarlas.

***

### OPCIONAL&#x20;

### Cambiar el logo (debes tener una imagen en linea) debe ser .png

* **Línea 8**

```html
<img src="https://app.homyuu.com/webchat-logo.png" alt="WebChat Logo">
```

➡️ Puedes cambiarla, debe ser <http://utl\\_de\\_tu\\_imanen.com/imagen.png>:

```html
src="cambia_aqui_el_link_de_tu_imagen_en_linea_" 
```

### 1️⃣ Cambiar textos al español

* **Línea 15**

```html
<h3>WEBChat</h3>
```

➡️ Puedes poner el nombre que quieras en el encabezado:

```html
<h3>Chat en Vivo</h3>
```

***

* **Línea 18**

```html
title="Nova sessão"
```

➡️ Traducido al español:

```html
title="Nueva sesión"
```

***

* **Línea 19**

```html
title="Fechar"
```

➡️ Traducido al español:

```html
title="Cerrar"
```

***

* **Línea 24**

```html
placeholder="Digite sua mensagem..."
```

➡️ Traducido al español:

```html
placeholder="Escriba su mensaje..."
```

***

* **Línea 26**

```html
title="Anexar arquivo"
```

➡️ Traducido al español:

```html
title="Adjuntar archivo"
```

***

* **Línea 27**

```html
title="Enviar mensagem"
```

➡️ Traducido al español:

```html
title="Enviar mensaje"
```

***

### 2️⃣ Cambiar color del WebChat

El color original del widget es **azul (#2196F3)**.\
Puedes cambiarlo a cualquier color (ejemplo: verde corporativo `#4CAF50`).

Busca y reemplaza estas líneas:

* **Línea 26**

```css
color: #2196F3;
```

➡️

```css
color: #4CAF50;
```

***

* **Línea 27**

```css
color: #2196F3;
```

➡️

```css
color: #4CAF50;
```

***

* **Línea 43**

```css
background: #2196F3;
```

➡️

```css
background: #4CAF50;
```

***

* **Línea 86**

```css
background: #2196F3;
```

➡️

```css
background: #4CAF50;
```

***

* **Línea 131**

```css
color: #2196F3;
```

➡️

```css
color: #4CAF50;
```

***

* **Línea 156**

```css
color: #2196F3;
```

➡️

```css
color: #4CAF50;
```

***

* **Línea 434**

```css
color: #2196F3;
```

➡️

```css
color: #4CAF50;
```
