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.

Recuerda que esta función permite sobrescribir o fusionar los ajustes y diseños que hayas configurado desde tu cuenta.

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:

{
   "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.

Lee a continuación antes de modificar la estructura del ajuste.

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

Es posible en HEX, HSL, pero no es recomendado.

• 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

Si deseas ocultar un título o subtitulo, simplemente puedes dejarlo como vacío, des decir, "".

• 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.

Esta opción solo marcará una opción (micrófono o cámara) por defecto, pero tu cliente podrá igualmente escoger el que desee.

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.

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.

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.

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.

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.

Refresca tu sitio y verás los cambios.

No modifiques el nombre clave widget-custom-style, de esta manera identificamos los parámetros personalizados.

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:

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.

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.

Ejemplo