Personalización

Cómo personalizar el widget de Jelou, incluyendo el menú y botones.

Opciones del Menú Superior

Puedes configurar las opciones del menú superior en el constructor del widget y agregar eventos personalizados para cada una de ellas.

Interfaz de TopMenu

interface TopMenu {
  options: Option[];
}

Descripción

Option	Descripción
opciones	Opciones list.

Añade al menú superior en el constructor

new WidgetService({
  apiKey: "<apiKey>",
  topMenu: {
    options: [
      {
        title: "Option 1",
        payload: {
          type: "event",
          flowId: "myCustomEvent",
        },
      },
      {
        title: "Option 2",
        payload: {
          type: "event",
          event: "anotherCustomEvent",
        },
      },
    ],
  },
});

Opciones del Menú de Inicio

Puedes configurar un menú inicial que aparecerá si no se ha enviado ningún mensaje o si la sala está vacía, estas dos opciones son configurables.

Interfaz HomeMenu

interface HomeMenuProps {
    showHomeMenuOnEmptyRoom?: boolean;
    showHomeMenuOnEmptyMessages?: boolean;
    disableInputs?: boolean;
    homeMenuTitle: string;
    options: Option[];
}

Descripción

Opción	Descripción
`showHomeMenuOnEmptyRoom`	Define si el menú debe mostrarse solo si la sala está vacía, es decir, no hay miembros aparte del usuario.
`showHomeMenuOnEmptyMessages`	Define si el menú debe mostrarse solo si no hay mensajes en la sala.
`disableInputs`	Define si las opciones de entrada deben estar deshabilitadas cuando se muestre el menú.
`homeMenuTitle`	Título del menú.
`options`	Lista de opciones.
Incluye el menu dentro del constructor

new WidgetService({
  apiKey: "<apiKey>",
  homeMenu: {
    showHomeMenuOnEmptyMessages: true,
    homeMenuTitle: "This is the home menu title.",
    options: [
      {
        title: "Option 1",
        payload: {
          type: "event",
          flowId: "myCustomEvent",
        },
      },
      {
        title: "Option 2",
        payload: {
          type: "event",
          event: "anotherCustomEvent",
        },
      },
    ],
  },
});

Opciones

{
    title: string;
    payload: {
        type: 'event' | 'flow';
        flowId?: number;
        event: string;
    };
}

Cuando un usuario hace clic en cualquiera de las opciones, se desencadena un evento en la instancia del widget:

widgetInstance.on("MyCustomEvent", (payload) => {
  // Attach behavior to the custom event
  // Payload: { room: Room }
});

nota

Cada evento personalizado contiene la sala en la que fue clickeado.

Botón de Inicio

Puedes personalizar el tamaño, el tamaño del logo y el logo.

Interfaz StartButtonProps

export interface StartButtonProps {
  logoUrl?: string;
  logoSize?: "lg" | "md" | "sm";
  size?: "lg" | "md" | "sm";
  background?: string;
}

Descripción

Opción	Descripción
`logoUrl`	URL del logo
`logoSize`	Tamaño del logo
`size`	Tamaño de la burbuja
`background`	Personaliza el color de fondo del botón utilizando una propiedad CSS

Agregar las opciones del startButton en el constructor

new WidgetService({
  apiKey: "<apiKey>",
  startButton: {
    logoUrl: "<someUrl>",
    logoSize: "md",
    size: "lg",
  },
});

Tamaño de burbujas

Color de Fondo de la burbuja Esta propiedad acepta una propiedad CSS de color, que puede ser un Propiedad de color, un color hex, o también un gradiente CSS.

Ejemplos:

background: 'red'
background: '#00A2CF'
background: 'linear-gradient(287.59deg, #082264 1.05%, #275795 72.39%, #447BC2 94.87%)'

Puedes personalizar el texto y el color de fondo.

Interfaz TooltipPanelProps

export interface TooltipPanelProps {
  backgroundColor?: string;
  message: {
    title?: string;
    text: string;
    textColor: "main" | "grey" | "light";
  };
  closeIcon?: string;
}

Descripción

Opción	Descripción
`backgroundColor`	Personaliza el color de fondo del tooltip utilizando una propiedad CSS
`message`	El mensaje que se muestra dentro del tooltip
`closeIcon`	Personaliza el color de fondo del ícono del botón de cerrar utilizando una propiedad CSS

Agregar las opciones del tooltipPanel en el constructor

new WidgetService({
  apiKey: "<apiKey>",
  tooltipPanel: {
    backgroundColor: "<some css property>",
    message: {
      title: "<some title>",
      text: "<some description>",
      textColor: "light",
    },
    closeIcon: "white",
  },
});

Cambiar de Sala

Este módulo se puede usar para alternar entre la sala personal del usuario y la sala compartida con el bot del widget.

COLORES EDITABLES Se puede cambiar el color de fondo y el color de enfoque del icono de este módulo. Los colores están dentro del objeto theme.

const theme = {
  vars: {
    color: {
      backgroundSwitch: "<string>",
      focusSwitch: "<string>",
    },
  },
};

Descripción

Opción	Descripción
`backgroundSwitch`	Personaliza el color de fondo del módulo de cambio utilizando una propiedad CSS
`focusSwitch`	Personaliza el color del icono y la etiqueta

Agrega las opciones de cambio de color en el constructor

new WidgetService({
  apiKey: "<apiKey>",
  theme: {
    vars: {
      color: {
        backgroundSwitch: "#CDD193",
        focusSwitch: "#013A20",
      },
    },
  },
});

Visuales Editables

Los iconos y las etiquetas de este módulo también son editables.

const properties = {
  allowClose: "<boolean>",
  switchEnable: {
    enabled: "<boolean>",
    logoUrl: "<string>",
    bot: {
      iconUrl: "<string>",
      label: "<string>",
    },
    group: {
      iconUrl: "<string>",
      label: "<string>",
    },
  },
};

Descripción

Opción	Descripción
`allowClose`	Muestra u oculta el botón de cierre para el widget.
`switchEnable`	Objeto que contiene propiedades para el módulo de cambio.
`switchEnable.enabled`	Booleano que habilita el módulo de cambio para ser mostrado.
`switchEnable.logoUrl`	Cadena de URL para el icono mostrado en el lado izquierdo del módulo. Si no se especifica, el icono provendrá del panel superior.
`switchEnable.bot`	Objeto que contiene propiedades para el icono y la etiqueta del bot.
`switchEnable.group`	Objeto que contiene propiedades para el icono y la etiqueta del grupo.
`...iconUrl`	Cadena para la imagen del icono de una de las opciones.
`...label`	Cadena para el texto de una de las opciones.

Agrega las opciones visuales en el constructor

new WidgetService({
  apiKey: "<apiKey>",
  properties: {
    enabledHeader: false,
    allowClose: false,
    switchEnable: {
      enabled: true,
      logoUrl: "https://picsum.photos/id/1042/3456/5184",
      bot: {
        iconUrl:
          "https://upload.wikimedia.org/wikipedia/commons/6/69/How_to_use_icon.svg",
        label: "first option",
      },
    },
  },
});

Mostrar eventos

Propiedad para mostrar cuando un miembro de una sala la abandona o cuando un nuevo miembro se une a la sala.

const properties = {
  showEvents: "boolean",
};

Descripción

Opción	Descripción
`showEvents`	Muestra u oculta los eventos de salir de la sala y unirse a la sala desde el lado de vista del operador en el Tipo de dato de grupo del widget.

Agregar las opciones de showEvents en el constructor

new WidgetService({
  apiKey: "<apiKey>",
  properties: {
    showEvents: true,
  },
});

Deshabilitar cuando esté solo

Propiedad para deshabilitar las entradas cuando solo haya 1 miembro en los miembros actuales de la sala.

const properties = {
  disableWhenAlone: "boolean",
};

Descripción

Opción	Descripción
`disableWhenAlone`	Deshabilita las entradas si solo hay 1 miembro en la sala.

Agregar las opciones de disableWhenAlone en el ejemplo del constructor

new WidgetService({
  apiKey: "<apiKey>",
  properties: {
    disableWhenAlone: true,
  },
});

Cómo personalizar el widget de Jelou, incluyendo el menú y botones.

Opciones del Menú Superior​

Opciones del Menú de Inicio​

Opciones​

Botón de Inicio​

Interfaz StartButtonProps​

Panel de Tooltip​

Interfaz TooltipPanelProps​

Cambiar de Sala​

Visuales Editables​

Mostrar eventos​

Deshabilitar cuando esté solo​

Opciones del Menú Superior

Opciones del Menú de Inicio

Opciones

Botón de Inicio

Interfaz StartButtonProps

Panel de Tooltip

Interfaz TooltipPanelProps

Cambiar de Sala

Visuales Editables

Mostrar eventos

Deshabilitar cuando esté solo