Apariencia

Aplica la imagen de tu negocio al widget: tus tipografías, tus colores, tu estilo.

El widget ya usa la apariencia que tengas configurada en tu cuenta de Restoo, así que por defecto no hay que tocar nada en el código. Esta página solo entra en juego cuando una instalación concreta tiene que verse distinta del resto: para eso debes pasar un objeto appearance a .create().

widget.create({ appearance });

Esa excepción es de tenerlo incrustado en tu web. Si tus clientes reservan en la página alojada por Restoo, la apariencia sale siempre de tu cuenta: ahí no hay instalación que pueda desviarse, y todo lo que configures se aplica tal cual.

Declararlo es una decisión de todo o nada: sustituye la apariencia de tu cuenta por completo, no la retoca. Pasar appearance: { variables: { colorAccent: "#c0392b" } } te deja ese color y los valores por defecto de Restoo para todo lo demás; las tipografías, los redondeos y el fondo de tu cuenta desaparecen.

Si solo quieres cambiar un detalle, el sitio para hacerlo es tu cuenta de Restoo, así lo hereda cada instalación. Declara appearance aquí únicamente cuando esta integración deba verse distinta del resto y, en ese caso, define todo lo que necesite.

Normalmente basta con definir colorAccent: Restoo deriva de él las variantes de hover, de contraste y suaves. Hay muchas más variables para afinar, pero la mayoría de instalaciones no las necesitan.

Parámetros

style · "rounded" | "sharp" | "pill" · predeterminado: "rounded"

Controla el redondeo de las esquinas de botones y tarjetas:

Valor	Descripción
rounded	Redondeo suave y moderado.
sharp	Esquinas rectas, sin redondeo.
pill	Esquinas totalmente redondeadas, tipo cápsula.

Ejemplo: style: "pill".

hasShadowEffect · boolean · predeterminado: "false"

Añade una sombra alrededor del widget.

hasGlassEffect · boolean · predeterminado: "false"

Añade un efecto de cristal esmerilado con desenfoque.

fonts · object[]

Tipografías web que hay que cargar antes de aplicar variables.fontFamilyBody o variables.fontFamilyHeading. Cada entrada debe apuntar a la dirección de una hoja de estilos de fuentes, por ejemplo una URL de Google Fonts. Restoo la carga y tú después usas el nombre de la fuente en variables. cssSrc tiene que ser una URL HTTPS absoluta.

Si el nombre de la fuente lleva espacios, entrecomíllalo dentro del valor CSS —por ejemplo, '"Playfair Display", serif'—; si no, el navegador no lo reconocerá como un único nombre de fuente.

appearance: {
  fonts: [
    {
      cssSrc:
        "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&display=swap",
    },
  ],
  variables: { fontFamilyHeading: '"Playfair Display", serif' },
}

variables · object

Colores, tipografía y redondeos concretos: consulta Variables de uso habitual.

const appearance = {
  style: "rounded",
  hasShadowEffect: true,
  variables: {
    colorAccent: "#c0392b",
    fontFamilyHeading: '"Playfair Display", serif',
  },
};

---

​

Fondo de la página alojada

Estos tres campos visten la página que Restoo te aloja, no el widget en sí. Incrustado en tu web no hacen nada: ahí el widget va dentro de un iframe ajustado a su contenido, así que no hay página alrededor que vestir.

Se configuran en tu cuenta, como el resto de la apariencia.

Las dos URL van absolutas y en HTTPS. El widget no las valida, así que una URL rota no avisa por ninguna parte: simplemente no se ve el fondo.

backgroundImageUrl · string

Imagen de fondo de la página, a pantalla completa.

backgroundVideoUrl · string

Vídeo de fondo de la página, en MP4. Se reproduce solo, en bucle y sin sonido. Mientras carga se muestra backgroundImageUrl si lo has definido, así que conviene declarar los dos.

hasBackgroundOverlay · boolean · predeterminado: "false"

Extiende a escritorio la capa de oscurecido y desenfoque que va sobre el fondo. Con una imagen o un vídeo, Restoo ya la aplica en móvil para que el texto se lea; actívalo si en escritorio también hace falta.

Declarar una imagen o un vídeo de fondo cambia tres valores por defecto para que el widget siga legible encima: activa hasShadowEffect y pone colorPageBackground en blanco y colorWidgetShadow en un negro translúcido. Lo que declares tú manda sobre los tres.

Las dos variables de la superficie de esa página, colorPageBackground y colorPageForeground, van con este grupo: también son del marco de la página alojada.

---

​

Referencia de variables

Todos los campos son cadenas opcionales. Lo que omitas dentro de appearance toma el estilo por defecto del widget, no el de tu cuenta.

Recomendamos usar valores hexadecimales (por ejemplo, "#c0392b") en todas las variables de color, como en los ejemplos de esta página.

​

Variables de uso habitual

Estas cubren la gran mayoría de las necesidades de marca: ajustar el color de tu marca, el fondo del widget y la tipografía.

colorAccent · string

El color de tu marca y de las acciones: botones, enlaces y estados seleccionados. Ejemplo: "#c0392b".

colorWidgetBackground · string

Color de fondo del contenedor del widget. En modo OVERLAY, define también el fondo del propio panel del modal, es decir, el marco alrededor del widget, fuera del iframe. Ejemplo: "#ffffff".

colorWidgetForeground · string

Color de primer plano del contenedor del widget. En modo OVERLAY, define también el color del botón de cerrar. Ejemplo: "#1a1a1a".

Si pones un colorWidgetBackground oscuro, define también colorWidgetForeground: el contraste del panel del modal no se calcula automáticamente, igual que en el resto del widget.

fontFamilyBody · string

Familia tipográfica del cuerpo de texto. Ejemplo: "Inter, sans-serif".

fontFamilyHeading · string

Familia tipográfica de los títulos. Ejemplo: '"Playfair Display", serif'; fíjate en las comillas alrededor del nombre de la fuente, necesarias porque contiene un espacio.

​

El resto de variables

La mayoría de las instalaciones no las necesitan nunca: sirven para afinar colores, redondeos y detalles tipográficos concretos más allá de las variables de uso habitual de arriba.

Tipografía

fontWeightLight · string

Grosor usado en el texto ligero. Ejemplo: "300".

fontWeightNormal · string

Grosor usado en el texto normal. Ejemplo: "400".

fontWeightMedium · string

Grosor usado en el texto con algo de énfasis. Ejemplo: "500".

fontWeightSemibold · string

Grosor usado en los títulos y los botones. Ejemplo: "600".

bodyTextCase · string

Transformación aplicada al cuerpo de texto. Ejemplo: "none".

headingTextCase · string

Transformación aplicada a los títulos. Ejemplo: "capitalize".

buttonTextCase · string

Transformación aplicada al texto de los botones. Ejemplo: "uppercase".

Colores base

colorDark · string

Color oscuro de referencia que el widget usa como su base más oscura. Ejemplo: "#111111".

colorPageBackground · string

Fondo de la página sobre la que se asienta el widget. Solo se ve en la página alojada por Restoo. Ejemplo: "#ffffff".

colorPageForeground · string

Color de primer plano usado en esa página, como el texto del pie. También solo en la página alojada. Ejemplo: "#1a1a1a".

colorScrollbarThumb · string

Color del pulgar de la barra de desplazamiento. Ejemplo: "#c1c1c1".

colorScrollbarTrack · string

Color del carril de la barra de desplazamiento. Ejemplo: "#f1f1f1".

subtleOpacity · string

Opacidad aplicada a los elementos atenuados, como el texto secundario. Se aplica también al texto atenuado del formulario de pago. Ejemplo: "0.6".

Colores semánticos y variantes generadas

Los roles de color semánticos son Accent, Neutral, Success, Warning y Danger. Sus valores base se definen con colorAccent, colorNeutral, colorSuccess, colorWarning y colorDanger.

Sufijo	Significado
Sin sufijo	Color base del rol.
Hover	Color base usado en los estados de hover.
Soft	Fondo suave derivado del color base.
SoftHover	Fondo suave usado en los estados de hover.

Así, la familia completa del rol Accent es colorAccent, colorAccentHover, colorAccentSoft y colorAccentSoftHover. Normalmente basta con definir el base: Restoo deriva los otros tres.

El color del texto que se muestra sobre cada uno de estos fondos no es una variable. Restoo elige negro o blanco frente al color que hayas definido, de modo que siempre cumpla el mínimo de contraste WCAG AA. Si el resultado no es el que buscas, cambia el color base en lugar del texto que va encima.

Marco del widget (cabecera, pie y diálogos)

colorWidgetBorder · string

Color del borde del contenedor general del widget. Ejemplo: "#e5e5e5".

colorWidgetDialogBorder · string

Color del borde de los diálogos que se muestran dentro del widget. Ejemplo: "#e5e5e5".

colorWidgetDialogBackground · string

Color de fondo de los diálogos. Ejemplo: "#ffffff".

colorWidgetDialogForeground · string

Color de primer plano de los diálogos, usado por su texto y sus iconos. Ejemplo: "#1a1a1a".

colorWidgetShadow · string

Color de la sombra que se usa cuando hasShadowEffect está activado. Ejemplo: "#00000026" (negro a un 15 % de opacidad aproximadamente, mediante el canal alfa hexadecimal).

colorIcon · string

Color de los glifos que acompañan a un valor en las líneas de resumen: los iconos de calendario, hora y número de comensales que aparecen en cada resumen de reserva, de experiencia y de pedido. Es la iconografía principal del widget. Por defecto toma colorAccent. Ejemplo: "#c0392b".

colorControlIcon · string

Color de los controles cuyo cuerpo entero es un icono: el botón del menú, la flecha de volver, las flechas del carrusel y los controles de sugerencia de idioma. Por defecto toma colorWidgetForeground. Ejemplo: "#1a1a1a".

Cualquier otro icono sigue al elemento al que pertenece, y no tiene clave propia: un icono dentro de un botón toma el color del texto del botón, uno junto a un texto toma el del texto, uno dentro de un diálogo o de una tarjeta seleccionable sigue a esa superficie, y los iconos de estado siguen a su color semántico (colorWarning, colorDanger). Los iconos dentro de un campo los controla colorInputIcon.

colorOverlay · string

Color del fondo que queda detrás de los diálogos que se muestran dentro del widget. Ejemplo: "#00000080" (negro al 50 % de opacidad, mediante el canal alfa hexadecimal).

colorDisabledButtonBackground · string

Color de fondo de un botón desactivado. Usa un color opaco: uno translúcido deja ver el contenido que hay debajo. Ejemplo: "#e8e8e8".

colorDisabledButtonForeground · string

Color del texto de un botón desactivado. Ejemplo: "#9a9a9a".

Campos y controles de formulario

colorInputBorder · string

Color del borde de los campos. Ejemplo: "#d4d4d4".

colorInputBackground · string

Color de fondo de los campos. Ejemplo: "#ffffff".

colorInputBackgroundHover · string

Color de fondo que se usa al pasar el ratón por encima de una opción de un campo. Ejemplo: "#1a1a1a1a".

colorInputForeground · string

Color de primer plano de los campos, usado por el valor que se escribe. Ejemplo: "#1a1a1a".

colorInputIcon · string

Color de los iconos que se muestran dentro de un campo: el icono inicial de un campo, la flecha de un desplegable, las flechas del selector de fecha y los controles del contador numérico. Por defecto toma colorAccent. Ejemplo: "#6b7280".

colorInputPlaceholder · string

Color del texto de ayuda de un campo vacío. Ejemplo: "#a3a3a3".

colorRadioGroupButtonBorder · string

Color del borde de un botón tipo radio sin seleccionar. Ejemplo: "#d4d4d4".

colorRadioGroupButtonBackground · string

Color de fondo de un botón tipo radio sin seleccionar. Ejemplo: "#ffffff".

colorRadioGroupButtonForeground · string

Color del texto y de los iconos de un botón tipo radio sin seleccionar. Ejemplo: "#1a1a1a".

colorRadioGroupButtonBorderSelected · string

Color del borde del botón tipo radio seleccionado. Ejemplo: "#c0392b".

colorRadioGroupButtonBackgroundSelected · string

Color de fondo del botón tipo radio seleccionado. Ejemplo: "#c0392b".

colorRadioGroupButtonForegroundSelected · string

Color del texto y de los iconos del botón tipo radio seleccionado. Ejemplo: "#ffffff".

colorToggleBackground · string

Color del carril de un interruptor apagado. Por defecto toma colorWidgetForeground al 25 %. Ejemplo: "#d4d4d4".

colorToggleBackgroundSelected · string

Color del carril de un interruptor encendido. Por defecto toma colorAccent. Ejemplo: "#c0392b".

El mando del interruptor no es configurable: se deriva para que siga legible sobre su carril y, en el carril de encendido, sigue el contraste calculado para colorAccent. Si pones en colorToggleBackgroundSelected un color muy alejado de colorAccent, comprueba que el mando se sigue distinguiendo bien.

Redondeo de esquinas y efectos

Cada escala de redondeo se define a partir de un único valor base, y el widget deriva de él los distintos pasos, de modo que las proporciones se mantienen coherentes.

radiusBase · string

Redondeo base del que derivan las tarjetas y las superficies. Ejemplo: "8px".

radiusBtnBase · string

Redondeo base del que derivan los botones. Ejemplo: "4px".

radiusInputBase · string

Redondeo base del que derivan los campos y los controles de formulario. Ejemplo: "2px".

radiusWidget · string

Redondeo de las esquinas del contenedor exterior del widget. Ejemplo: "16px".

remSizeBase · string

Tamaño rem base del que derivan las escalas de tipografía y espaciado del widget. El widget lo aumenta en pantallas muy grandes y usa un tamaño pensado para impresión cuando se imprime la página. Ejemplo: "16px".

blurGlassEffect · string

Intensidad del desenfoque que se usa cuando hasGlassEffect está activado. Ejemplo: "12px".

---

​

Ejemplo completo

Una configuración realista que combina un campo de primer nivel, unas cuantas variables de uso habitual y un par de las menos habituales de distintas categorías. No hace falta definirlas todas, solo las que se separen de los valores por defecto del widget:

widget.create({
  appearance: {
    style: "pill",
    hasShadowEffect: true,
    fonts: [
      {
        cssSrc:
          "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&display=swap",
      },
    ],
    variables: {
      // De uso habitual
      colorAccent: "#c0392b",
      colorWidgetBackground: "#fffaf5",
      fontFamilyBody: "Inter, sans-serif",
      fontFamilyHeading: '"Playfair Display", serif',

      // Menos habituales, de distintas categorías
      colorSuccess: "#16a34a",
      radiusWidget: "24px",
    },
  },
});

---

​

Siguientes pasos

Configurar tus integraciones

Activa GA4, Google Ads, Meta, TikTok, ChatGPT Ads o GTM en tu cuenta de Restoo.

Consentimiento

Hasta conocer la decisión del visitante no sale nada hacia ninguna plataforma.