# Ajustes

Nuestro widget posee una configuración o ajuste que contiene componentes como colores de cabecera, cuerpo, botones y textos, donde cada uno de ellos se puede configurar por separado.

Por defecto, el comportamiento es obtener el ajuste del widget que hayas configurado en tu cuenta mediante nuestra API.

{% hint style="info" %}
Recuerda que esta función permite **sobrescribir o fusionar** los ajustes y diseños que hayas configurado desde tu cuenta.
{% endhint %}

Pero también es posible forzar un ajuste propio añadiendo un poco de código en tu sitio web. Para ello deberás tener en cuenta que la estructura es la siguiente:

```json
{
   "logo": {
      "url": "...",
      "height": 180
   },
   "colors": {
      "background": "rgb(255,255, 255, 1)",
      "font": "rgb(255,255, 255, 1)",
      "gradient": "linear-gradient(to right, rgb(23, 54, 189) 0%, rgb(0, 99, 255) 100%)"
   },
   "texts": {
      "title": "My title",
      "subtitle": "My subtitle.",
      "segmentsTitle": "Segment title",
      "segmentsSubtitle": "Segment subtitle."
   },
   "settings": { "defaultChannel": "video" },
   "orgName": "Company Name",
   "services": ["on-demand"]
}
```

Esta estructura de parámetros te permite modificar logotipo, colores, textos, ajustes y servicios a visibilizar.

{% hint style="warning" %}
Lee a continuación antes de modificar la estructura del ajuste.
{% endhint %}

### Logo

* `url` deberás colocar una URL válida de tu logotipo
* `height` deberás ingresar el tamaño del logotipo como número (sin unidades)

### Colors

{% hint style="info" %}
Es posible en HEX, HSL, pero no es recomendado.
{% endhint %}

* `background` deberás ingresar un color en formato RGB.
* `font` deberás ingresar un color en formato RGB.
* `gradient` deberás ingresar un gradiente en formato RGB o un solo color RGB.

### Texts

{% hint style="info" %}
Si deseas ocultar un título o subtitulo, simplemente puedes dejarlo como vacío, des decir, **`""`**.
{% endhint %}

* `title` deberás ingresar el título de la cabecera del widget.
* `subtitle` deberás ingresar el subtitulo de cabecera del widget.
* `segmentTitle` deberás ingresar el título que estará sobre el listado de segmentos.
* `segmentSubtitle` deberás ingresar el subtitulo que estará sobre el listado de segmentos.

### Settings

* `defaultChannel` permite seleccionar valor por defecto entre `video` o `audio`.

{% hint style="info" %}
Esta opción solo marcará una opción (micrófono o cámara) por defecto, pero tu cliente podrá igualmente escoger el que desee.
{% endhint %}

### OrgName

Ingresa el nombre de tu negocio en este campo.

### Services

Deberás escoger qué tipos de servicios están activos para tu widget, ya sea entre `on-demand` que representa tus segmentos y `schedule` para calendarios. Podrás escoger entre uno u otro.

{% hint style="danger" %}
**No añadas un servicio al listado si no posees al menos 1 segmento o calendario activo en tu cuenta.**

El comportamiento del widget podría ser inesperado.
{% endhint %}

## Aplicar estilos

Luego que haz modificado los parámetros del widget deberás aplicar este cambio añadiendo un poco de código a tu sitio web.

{% hint style="info" %}
La técnica a utilizar a continuación la puedes aplicar desde Devtools en tu navegador para pre-visualizar el diseño antes de aplicarlo en tu sitio.
{% endhint %}

```javascript
const widgetStyle = {...};
window.localStorage.setItem('widget-custom-style', JSON.stringify(widgetStyle));
```

`widgetStyle` corresponde a los parámetros configurados previamente. Si obtienes un error de `parsing` verifica que haz escrito correctamente en formato `JSON` o como objeto.

{% hint style="info" %}
Refresca tu sitio y verás los cambios.
{% endhint %}

{% hint style="warning" %}
No modifiques el nombre clave `widget-custom-style`, de esta manera identificamos los parámetros personalizados.
{% endhint %}

### Funsionando ajustes

Es posible solo definir solo ciertas keys en el objeto de ajustes personalizado, mientras que el resto se fusionará.

En otras palabras puedes hacer lo siguiente:

```javascript
const widgetStyle = { services: ['on-demand', 'appointment'], orgName: 'Acme' };
window.localStorage.setItem('widget-custom-style', JSON.stringify(widgetStyle));
```

En el ejemplo, solo se define `services` y `orgName`, mientras que el resto como `logo`, `colors`, `texts` y `settings` se fusionarán con estos valores.

{% hint style="danger" %}
**La fusión solo se realiza en primer nivel. Si modificas `logo`, `colors`, `texts` o `settings`, deberás añadir cada uno de los valores del objeto, de lo contrario se generarán errores.**
{% endhint %}

## Ejemplo

{% embed url="<https://codesandbox.io/s/widget-settings-docs-pgebyg?file=/main.js>" %}


---

# 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.videsk.io/es-developers/widgets/api/diseno.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.