Adapta tu cuenta de marca blanca a la imagen corporativa de tu empresa
- Cómo personalizar tu cuenta White Label
- 1. Ve a la sección Personalización de tu cuenta de marca blanca
- 2. Configura la apariencia de tu cuenta usando CSS y JS
- 3. Usa tu propio subdominio de producción
- 4. Usa tu propio subdominio para los usuarios extra de la cuenta de marca blanca (opcional)
- 5. Usa tu propio dominio para la URL corta del código QR (opcional)
Cómo personalizar tu cuenta White Label
1. Ve a la sección Personalización de tu cuenta de marca blanca
Primero, ve a la sección Personalización de tu cuenta White Label donde se pueden administrar todas estas configuraciones. Puedes comenzar dándole a la plataforma tu propio nombre.
2. Configura la apariencia de tu cuenta usando CSS y JS
Añade tu logo, tu favicon y usa tus propios colores.
Personalización
Colores
3. Usa tu propio subdominio de producción
Puedes cambiar el subdominio de tu cuenta de marca blanca para que sea tu propio dominio, ej.: qr.el-dominio-de-tu-empresa.com. Puedes consultar más información sobre cómo configurar tu propio dominio.
4. Usa tu propio subdominio para los usuarios extra de la cuenta de marca blanca (opcional)
Los usuarios adicionales de tus cuentas de Marca Blanca también pueden usar su propio subdominio. Esto puede ser útil para las agencias que configuran cuentas de usuario para sus clientes y que deben ejecutarse bajo su propio dominio.
5. Usa tu propio dominio para la URL corta del código QR (opcional)
Crea códigos QR más simples y fáciles de leer usando un dominio diferente o más corto en lugar de tu dominio de producción, Ej.: qr.vc. Consulta más información sobre cómo configurar un dominio raíz.
Usa tu propio dominio para las notificaciones por correo electrónico (opcional)
También puedes usar tu dominio para enviar las notificaciones por correo electrónico de escaneos, formularios de clientes potenciales, cupones, etc. Esto solo se aplica al dominio principal de la cuenta, los usuarios adicionales usarán el mismo dominio que el administrador.
Configuración regional - Idiomas personalizados
Personaliza tu plataforma con tu propio idioma personalizado además del idioma base seleccionado. Traduce bloques de texto específicos a tus idiomas locales y asigna los paquetes de idioma personalizados que hayas creado a los usuarios que desees.
Configuración avanzada - Hacks CSS
Personaliza tu instancia de marca blanca con tu propio código CSS o JS que se inyectará dentro de la etiqueta <head> de todas las páginas de tu cuenta de marca blanca. Puedes incluir tu propio widget de chat y mucho más.
Colores
Usa un color personalizado.
body{background-color: #cde;}
Fuentes
Utiliza una fuente personalizada o de Google Fonts.
@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro'; body{font-family: 'Source Sans Pro', sans-serif;}
Iconos
Este ejemplo sustituye el icono del usuario en el menú por una imagen personalizada en base64.
.admin-user{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAAsTAAALEwEAmpwYAAABvFBMVEUAAACt1q2m17Cn26+q1LKs1ays2ayr1rGp2K+p1q6q2bCfyqap2LCp16+p2K+q2LCp17Co2LCp2K+p16+o2K6q2LCo16+q17Co2K+p17Co1q6q2LCq2K6o2LCq1rCo2K6o2LCq2K6n2K2o2K6q2LCo2K6o1rCq1rCbu6GgzKWm1Kyo1q5gnL5jpMdjpsxkp81lqtFmqcxnpcJnp8Vnp8tnqs5nq85nrdRnrdVoq89orNJpq8trnLRsqb5tq8VtrMVvqchxrb9yp69yrLx2o7V2q654q8N5qqR5r8h5sMt6sbZ7q6R9qr19tbqBsqeCo4eFtKSGr5iIt8qIuauJssKJvrWNtJKPt8WRuJaSwaqXv5yYtZ+Yw6GYw6WZwZ6bxaCbxaGcv6KdyKOexaKfvKWfyqWhzaeiz6yjzKmj0Kqj0Kyj0a6k0Kqlw76l0aqm06ynza6n0ayn1K2n1a2o1a6o1q+p1q+p16+q2LCtyLWuzrSuzrWvyLez0Luz0bu407+508C71sS+2NXB29jD2MvD2svF3c3G39vH3tjH39vJ39LK4tzO5NjQ5d7X6+DX7OPY7OPZ7ePb7+Xc8Oa65Fc8AAAALHRSTlMAGRodHh8iUldZXnBxdHd4e5+kp6ustLW6vN7f5ebw8vP09fX6+/z9/v7+/pMxHZMAAAFbSURBVBgZBcFNThNhAADQ932dtsOktKVpKYaEjTvxECYkGhduMC64AuE4nsGYKGHpwjO4MjEuXCDqYkr5U/o3M0x9LwBa2UbStqwW8xIIoNUbvawaScTZ9K6CANnO6/NJGQZ7m/A+XyCge7z+eg2tp13w9p5IduziGsKw0VxWOElJtB4xhfRFh+3pTcb490PUfcMDFgcdGG6WHPXE1hgbGPeB3l8MGzF7ha2SLqBd4DCLG7C7V1gCygBZTCDsjFbnBXDVgiS24eb7XTv59AB3f/qQRih+LEgnH2fk30YR6mSJnzPYfZYxbt6CVayoJtB/nsFgdA9VXJAXqA4SYHNQYh7nZ/4FPE4B+jNO50k5Vddry30AzUGRTOuG8mK/09/qPgkAivsPl+tElW8jDwA0P+e1gM4Jl2EB4MuvGQHS8REA3uUrBNDoDQ8Bp9PbNQRAI8uStF5V83kN/Afai3sy4mNhxAAAAABJRU5ErkJggg==')}
Si quieres sustituir el CSS dentro del archivo (inlined css), tendrás que utilizar el comando !important, por ejemplo:
body{background-color: #cde !important;}
Logos
Quiero sustituir el logotipo de la cuenta de uno de mis usuarios.
Con dominio propio
Si tu usuario tiene su propio subdominio, sólo tienes que subir su logotipo a la mediateca de la cuenta de tu cliente y añadir este fragmento a tu sección de Personalización > CSS.
body[domain="my-subdomain-com"] .branding-logo a img { content: url(https://my.subdomain.com/l/media?xxxxxxxxxx&fullsize=1); }
Sin dominio propio
Si tu usuario no tiene su propio subdominio, sólo tienes que subir su logotipo a la mediateca de la cuenta de tu cliente y añadir este fragmento a tu sección de Personalización > CSS.
Ten en cuenta que para usuarios sin dominio personalizado no es posible personalizar el logotipo de la página de login.
body[domain="username"] .branding-logo a img { content: url(https://your.subdomain.com/l/media?xxxxxxxxxx&fullsize=1); }
Puedes encontrar más recursos de CSS en W3 Schools o en nuestra Guía de CSS y HTML.