Branding
Planes: Starter (badge forzado on) · Growth · Pro · Agency (dominio personalizado en Pro+)
Los ajustes de branding de Clione te permiten envolver tu dashboard, widget de FAQ y entregables compartidos en tu propia identidad visual. Dos capas:
- Marca a nivel org — logo, color de acento, cover image, dominio personalizado. Aplica a todas tus tiendas y a entregables compartidos.
- Toggle del badge por tienda — controla si el badge "Powered by Clione" aparece en widgets para esa tienda específica.
La marca aparece en tres sitios independientemente de la plataforma del storefront: el chrome de tu dashboard, el widget de FAQ renderizado en el storefront (BC, Shopify o headless) y los entregables compartidos (branded reports y la página pública Pulse).
Marca a nivel org
Sidebar → Org → pestaña Brand.
Disponible en Growth, Pro y Agency. Starter ve un panel bloqueado con la sugerencia de upgrade.
Campos
| Campo | Usado por |
|---|---|
| Logo URL | Cabecera del sidebar del dashboard, entregables compartidos, cabecera del widget de FAQ. PNG / SVG / JPG, recomendado 512px+ en el lado largo. Debe ser https://. |
| Color de acento (hex) | Botones, enlaces, resaltes en entregables branded. Debe ser un #RGB o #RRGGBB válido. |
| Cover image URL | Página de portada de entregables branded. 1920×400 o ratio landscape similar. |
| Custom domain | Para entregables compartidos — consulta Branded reports — custom domain. |
Los cambios se guardan automáticamente al perder foco (estilo Notion) para inputs, y al cambiar el toggle para checkboxes. El indicador "Saved" aparece brevemente en cada campo.
Dominio personalizado
Solo Pro y Agency. Consulta el doc Branded reports para la guía completa de setup.
Badge "Powered by Clione" por tienda
Toggle por tienda en Store → Settings → Branding.
Estado por defecto por plan:
| Plan | Por defecto | ¿Se puede ocultar? |
|---|---|---|
| Trial | On | No |
| Starter | On | No |
| Growth | On | Sí |
| Pro | On | Sí |
| Agency | On | Sí |
El badge aparece en:
- El footer del acordeón FAQ (
Powered by Clione). - El footer de la página pública Pulse.
- Footers de entregables branded.
Cuando desactivas el badge, el cambio aplica en ~5 minutos (el widget cachea la política). Hard refresh de la página del storefront para verlo antes.
El refuerzo del badge es server-side, no client-side. Cambiar el toggle en la base de datos o vía la API no salta ningún refuerzo — las cuentas Starter seguirán viendo el badge sin importar el valor guardado. Es por diseño y está documentado en nuestros Términos de Servicio.
Comportamiento por plataforma
El branding es agnóstico a la plataforma en la capa de API — el mismo brand JSON se sirve a cada consumidor. Lo que difiere es la superficie donde se renderiza.
BigCommerce
- Cabecera del widget FAQ — Cuando el widget de embed se monta en una página BC Stencil, obtiene el brand JSON y aplica tu logo + color de acento a la cabecera del acordeón. Sin cambios de tema necesarios.
- Schema Injector — El script inyectado es agnóstico a plataforma; la marca no tiene efecto sobre el JSON-LD que inyecta.
- Superficie de BC Reviews — Si usas los Reviews built-in de BC, el snippet de rating renderizado por el JSON-LD de Clione usa tu color de acento solo en la preview del dashboard; en el storefront, el color de la estrella de rating lo controla el tema Stencil, no Clione.
Shopify
- Theme App Extension — El theme app embed Clione JSON-LD lee el brand JSON en render time, así que el color de acento y el logo aplican al bloque FAQ embebido.
- Sección Custom Liquid — Si embebes FAQ vía una sección Custom Liquid en lugar de la Theme App Extension, el brand JSON se obtiene en runtime por el script del widget y se aplica de forma idéntica.
- Hydrogen / Remix headless — Tu storefront headless hace fetch de
/api/v1/public/brand/:tenantSlugy aplica la marca inline. Consulta developers/embed-widget para el snippet.
Headless y otros storefronts
El brand JSON se sirve en https://app.clione.ai/api/v1/public/brand/:tenantSlug. Cualquier tema headless (Next.js, Hydrogen, Catalyst, Sapper, etc.) puede obtenerlo en build time o runtime. El schema es estable y está versionado en los docs de la API pública.
DNS del dominio personalizado
El dominio personalizado funciona en cualquier proveedor de DNS siempre que puedas añadir un registro CNAME. Combinaciones testadas:
| Proveedor DNS | CNAME flattening | Notas |
|---|---|---|
| Cloudflare | Sí | El proxy debe estar apagado (nube gris) para la petición inicial del cert; puede encenderse tras la verificación. |
| Route 53 | N/A | Usa un registro CNAME estándar. |
| GoDaddy | No | Configura CNAME directamente. Algunas cuentas legacy de GoDaddy añaden un punto al final — quítalo. |
| Namecheap | No | CNAME directo. |
| Google Domains / Squarespace Domains | Sí | Funciona con el registro ALIAS aplanado. |
| Hover | No | CNAME directo. |
Resolución de problemas
El logo no aparece en el sidebar — La URL debe ser https://. Las URLs http:// se rechazan al guardar. Revisa la consola del navegador para un error de CSP si el host de imagen bloquea hotlinking. Ofensores habituales: enlaces públicos de Dropbox, enlaces directos de Google Drive, Imgur. Hospeda el logo en tu propio dominio o en un CDN de imágenes conocido (Cloudinary, Imgix, Bunny, Cloudflare Images).
El color de acento no se aplica — Hard refresh. El dashboard cachea la marca durante 5 minutos. Si sigue mal tras refrescar, revisa el formato hex: debe ser #RRGGBB o #RGB, sin palabra al principio como red.
El widget FAQ sigue mostrando el badge tras desactivar el toggle — El TTL de caché del widget es de 5 minutos. Espera o hard-refresh. Si tras 10 minutos el badge persiste, tu plan es Starter o Trial — el badge no puede ocultarse en esos planes (consulta defaults de plan arriba).
La verificación del dominio personalizado da timeout — Propagación de DNS. Espera hasta 30 minutos. Si sigue fallando, vuelve a comprobar que el registro CNAME coincide exactamente con lo que Clione muestra (sin punto al final en algunos proveedores). Algunas cuentas de Cloudflare requieren apagar el proxy (nube gris) para la validación inicial de Let's Encrypt; puedes re-activarlo tras emitirse el cert.
El panel Brand está bloqueado — Tu plan es Starter. Sube a Growth o superior para desbloquear personalización de marca a nivel org. El badge "Powered by Clione" se queda en Starter sin importar nada.
Los cambios de marca aplican al dashboard pero no a mi widget FAQ en vivo — Los widgets cachean el brand JSON durante 5 minutos. Hard-refresh la página del storefront tras esperar. Si el cambio sigue sin propagarse tras 10 minutos, el script del widget puede estar cacheado por tu CDN — purga la caché del CDN del storefront para los paths /embed/*.
Schema de marca (lo que la API sirve)
Para los curiosos, el brand JSON servido en /api/v1/public/brand/:tenantSlug se ve así:
{
"tenantSlug": "your-org",
"logo": {
"url": "https://cdn.example.com/logo.svg",
"width": 512,
"height": 128,
"alt": "Your Org"
},
"accentColor": "#1f6feb",
"coverImage": {
"url": "https://cdn.example.com/cover.jpg",
"width": 1920,
"height": 400
},
"customDomain": {
"host": "insights.example.com",
"verified": true
},
"badge": {
"force": false,
"enabled": true
}
}
El schema está versionado (header de respuesta X-Brand-Version) para que los consumidores puedan cachear con seguridad. El Cache-Control es public, max-age=300 por defecto — 5 minutos.
Gestión multi-tenant de marca (Agency)
Los tenants Agency con sub-tenants obtienen una marca por sub-tenant. La marca del sub-tenant hereda de la marca a nivel Agency en la creación inicial pero puede ser sobrescrita por sub-tenant. El toggle de marca para el badge "Powered by Clione" también sigue el plan del sub-tenant, no el de la Agency — así que un sub-tenant en Starter aún vería el badge forzado on, aunque la Agency padre esté en Pro.
Para configurar la marca por sub-tenant, entra como un usuario con Owner/Admin en el sub-tenant, luego visita Org → Brand.
Consejos de aspect-ratio del logo
El logo aparece en tres sitios con necesidades de aspect ratio distintas:
- Cabecera del sidebar del dashboard — encaja en un slot de 32px de alto, escala por altura. Los logos anchos funcionan bien.
- Cabecera del widget FAQ — encaja en un slot de 24px de alto. Misma restricción.
- Portada de branded report — encaja en un slot de 256px de ancho, escala por ancho. Los logos cuadrados o casi cuadrados funcionan mejor aquí.
Si solo tienes un logo cuadrado, funciona en todas partes pero se ve pequeño en el sidebar. Si solo tienes un logo ancho, funciona en todas partes pero se ve perdido en la portada del report. El setup recomendado es un lock-up horizontal para uso en sidebar/widget más un icon mark para la portada del report.
Override por superficie:
- Campo Logo URL — el principal, aplicado en todas partes por defecto.
- Logo (square) — segundo slot opcional usado por la portada del report cuando se rellena.
Guardrails de contraste de color
El color de acento se usa para botones, enlaces y resaltes contra una superficie blanca o oscura. Clione corre un check de contraste WCAG AA al guardar:
- Si el color de acento falla contraste contra fondo blanco (usado en tema light), verás un chip de aviso. El cambio se guarda igualmente; el aviso es un heads-up.
- Si el color de acento falla contra fondo oscuro (usado en tema dark), mismo aviso.
Puedes ignorar el aviso, pero el widget FAQ usará una versión desaturada del acento para el fondo del botón y mantener los botones legibles. La saturación completa se usa para elementos no interactivos (iconos, divisores).
Preview de marca
La pestaña Brand tiene una preview en vivo que muestra tu logo, color de acento y cover image como se renderizarán en:
- La cabecera del widget FAQ.
- Una portada de branded report.
- El badge de la página pública Pulse.
Los cambios aplican inmediatamente a la preview (lee el estado del formulario, no el estado guardado). Úsalo para iterar antes de confirmar.
Resetear a valores por defecto
Cada campo de marca tiene un enlace "Reset to default" a su lado. Resetear:
- Logo → vuelve al mark por defecto de Clione.
- Color de acento → vuelve a
#1f6feb. - Cover image → vuelve a una portada genérica de Clione.
- Custom domain → quita la vinculación (el CNAME del subdominio que configuraste sigue resolviendo al host de Clione, pero Clione deja de asociarlo con tu tenant).
Herencia de marca para sub-tenants
Para tenants con plan Agency, la herencia de marca funciona así:
- Un sub-tenant nuevo hereda la marca a nivel Agency en la creación.
- El Owner/Admin del sub-tenant puede sobrescribir cualquier campo de marca independientemente.
- Los cambios de marca a nivel Agency no se cascadean retroactivamente a sub-tenants que han personalizado.
- El default del badge "Powered by Clione" sigue el plan del sub-tenant (no el de la Agency).
Esto permite a los operadores de agencia configurar defaults sensatos a nivel Agency (p. ej. su propia marca) mientras siguen permitiendo a clientes finales usar su propio branding.