Apariencia y comportamiento

Apariencia y comportamiento

Un formulario de consentimiento hereda el branding de tu compañía y permite ajustes por formulario y por embed. Aprovecha cada capa según dónde quieras que el cambio se aplique.

Capas de apariencia

Capa	Dónde se configura	Alcance
Compañía	Configuración general	Default para todos los formularios.
Formulario	Editor del formulario (sección Apariencia)	Solo para ese formulario.
Embed	Prop appearance del ConsentFormBox o query params del link standalone	Solo para esa instancia.

Las capas se resuelven de menor a mayor especificidad: el embed gana sobre el formulario, que a su vez gana sobre la compañía.

Configuración a nivel de compañía

Estos ajustes afectan todos los embeds y formularios standalone de tu cuenta:

• Logo: imagen que aparece en el header del formulario y en el footer "powered by".
• Color primario: color usado en botones y elementos interactivos.
• Dominios permitidos (whitelisted_domains): hosts donde puede cargarse el iframe SDK.
• Variante de iconos: estilo de los iconos del módulo de consentimiento (duotone, outline, solid).

Configúralos desde Configuración > Apariencia del dashboard o vía PATCH /api/v1/company_configurations/general.

Configuración por formulario

Cada formulario acepta los siguientes overrides en su appearance:

appearance

{
  "hide_logo": false,
  "hide_title": false,
  "hide_description": false,
  "font_family": "Inter, system-ui, sans-serif",
  "primary_color": "#f54c27",
  "button_alignment": "left",
  "progress_indicator_style": "bar"
}

Opción	Valores	Comportamiento
hide_logo	boolean	Oculta el logo de la compañía en el header del formulario.
hide_title	boolean	Oculta el título del formulario.
hide_description	boolean	Oculta la descripción del formulario.
font_family	string CSS	Tipografía del formulario.
primary_color	#RRGGBB o #RGB	Color principal usado por botones y acentos.
button_alignment	left | center | right	Alineación de los botones de navegación.
progress_indicator_style	bar | steps	Estilo del indicador de progreso en formularios multi-página.

Configura font_family solo si tu marca usa una tipografía específica que no carga por defecto. Recuerda incluirla con un <link> en tu sitio para que el navegador la encuentre.

Asegúrate de mantener un contraste suficiente entre primary_color y el fondo blanco. Soyio no ajusta el contraste automáticamente.

Overrides por embed (iframe SDK)

Cuando usas ConsentFormBox, puedes ajustar la apariencia de esa instancia sin tocar la configuración del formulario:

src/consent-form.ts

const consentForm = new ConsentFormBox({
  consentFormToken: 'cform_<id>',
  appearance: {
    config: {
      showLogo: false,
      showHeader: true,
      showDescription: false,
      buttonAlignment: 'right',
      icon: {
        dataUseVariant: 'duotone',
      },
    },
  },
});

Opción	Valores	Comportamiento
appearance.config.showLogo	boolean	Sobrescribe hide_logo del formulario. true muestra el logo aunque el formulario lo oculte.
appearance.config.showHeader	boolean	Sobrescribe hide_title.
appearance.config.showDescription	boolean	Sobrescribe hide_description.
appearance.config.buttonAlignment	'left' | 'center' | 'right'	Sobrescribe button_alignment.
appearance.config.icon.dataUseVariant	'duotone' | 'line' | 'solid'	Variante de íconos del módulo de consentimiento.

Estos overrides son útiles cuando un mismo formulario se embebe en distintos contextos. Por ejemplo: usar showHeader: false dentro de un modal que ya tiene su propio título.

Overrides por link standalone

El link standalone acepta los mismos overrides como query parameters. Útil cuando compartes el mismo formulario en distintas campañas y quieres variar pequeños detalles:

URL con overrides

https://forms.soyio.id/<companySlug>/<formSlug>?showLogo=false&buttonAlignment=center&lang=en

Parámetros soportados:

• showLogo, showHeader, showDescription: true / false / 1 / 0.
• buttonAlignment: left, center o right.
• lang o locale: es o en.

Idioma

El formulario soporta español (es) e inglés (en):

• En el iframe SDK: configura locale: 'es' | 'en'.
• En el link standalone: agrega ?lang=es o ?lang=en a la URL.

Si no especificas idioma, Soyio elige es por defecto. Los textos traducidos cubren botones, errores de validación, etiquetas auxiliares y la pantalla de éxito.

Las cláusulas de tus consent templates no se traducen automáticamente. Si necesitas atender a usuarios en otro idioma, crea plantillas separadas con el copy traducido y arma un formulario por idioma.

Comportamiento por iframe

Algunos detalles solo aplican cuando integras el formulario por iframe:

• El iframe no navega solo al terminar. Recibirás el evento CONSENT_FORM_COMPLETED con el redirectUrl del formulario y tu integración decide qué hacer (cerrar modal, navegar el host, mostrar otro paso).
• El iframe ajusta su altura automáticamente vía post-robot. No necesitas configurar height manualmente.
• El ancho mínimo del iframe es 320px. Por debajo, el contenido puede recortarse.

Errores comunes de integración

Cuando algo falla en la apariencia o el comportamiento, el formulario muestra mensajes accionables. Los más frecuentes son:

• primary_color inválido: usa formato hex (#RRGGBB o #RGB). Otros formatos son rechazados al guardar.
• hostNotAllowed: el origen del sitio que embebe el iframe no está en whitelisted_domains. Agrégalo desde la configuración de la compañía.
• redirect_url inválida: debe comenzar con http:// o https://. URLs relativas no se aceptan.

Próximos pasos

• Arma tu formulario - Detalles de cada opción de configuración
• Personalización general - Guía de apariencia para todos los embeds de Soyio
• Configuración de empresa - Ajustes globales de marca y dominios