+54 11 5258-8400
Login

Archivo de la etiqueta: multicuenta

Especial Resellers: Cómo crear un login personalizado para el nuevo Panel de Control

Si sos revendedor, sabés lo importante que es ofrecer una experiencia personalizada a tus clientes. Ya te contamos cómo hacer que Kinto, el nuevo Panel de Control, se adapte a la imagen de tu marca. Hoy te mostramos cómo hacer una pantalla de login, para que tus clientes ingresen a sus cuentas desde tu propio sitio. ¡Es muy simple!

El ejemplo terminado

Supongamos que la empresa ZonaHosting revende el servicio de ELSERVER. En su sitio, www.zonahosting.com.ar, informa sobre los planes y precios.

Pero también es el ingreso al Panel de Control. Cuando un usuario completa su SSO y clave:

reseller003

…. ingresa logueado:

reseller004

Y cuando cierra sesión, el Panel lo redirige a una pantalla personalizada donde ZonaHosting incluye un mensaje y promociones:

reseller005

Primer paso: armar el formulario de login

Por defecto, los clientes de este revendedor deben ingresar al Panel de Control a través de panelbeta.zonahosting.com.ar, donde verán una pantalla como esta:

reseller002

Esta es la interfaz genérica de ingreso. No tiene el logo y los colores de nuestra marca… es mejor crear una nueva. El HTML necesario es muy simple: debe ser un formulario que envíe un POST a panelbeta.tudominio.com/login/, con tres datos:

– El sso, la dirección de correo que el usuario utiliza siempre para entrar al Panel,
– El password, la clave correspondiente
– Y opcionalmente redirect, una URL adonde será dirigido el usuario en caso de errores (por ejemplo, por haber ingresado mal sus datos).

Entonces, sería algo como:

<form method="POST" action="http://panelbeta.tudominio.com/login/">
    <input type="text" name="sso" placeholder="Email">
    <input type="password" name="password" placeholder="Clave">
    <button>Ingresar</button>
</form>

Por supuesto, este formulario puede tener el estilo que quieras, y puede estar en cualquier parte de tu sitio, siempre que apunte a la dirección correcta.

Segundo paso: definir la URL de logout

Ahora vamos a ver cómo definir una página a la que son redirigidos todos tus clientes al poner “Salir” en el Panel de Control.

Supongamos que esa URL de salida debe ser zonahosting.com.ar/gracias_vuelva_pronto, una página donde le agradecemos por haber usado nuestro servicio y publicamos otras ofertas. Esta página puede tener el contenido y el estilo que vos elijas.

Para definirla, vamos a la sección “Inicio” de nuestro plan reseller, y hacemos click en “Configurar cuenta”. Donde dice “URL de salida”, completamos con la URL completa de la página correspondiente.

Es decir, de esta forma:

reseller001

Hacemos click en “Guardar cambios” y listo, todos tus clientes serán dirigidos allí al salir del Panel de Control.

Si no la definimos o dejamos el campo vacío, la URL de salida será la ruta base (en este caso, panelbeta.zonahosting.com.ar).

En resumen

Con estas nuevas herramientas, podés personalizar aún más la experiencia de tus clientes y aprovechar las ventajas de revender un servicio 100% marca blanca como el que te ofrece ELSERVER.

¡Buenas ventas!

Especial Resellers: Cómo crear skins para el nuevo Panel de Control

skins

Como saben, tenemos un gran estreno estos días: Kinto, nuestro nuevo Panel de Control. A partir del miércoles 14 de agosto, haremos la actualización progresiva y muchos usuarios verán esta nueva versión por defecto cuando ingresen al panel.

Si tenés un plan Cloud 4 Resellers, podés ganar tiempo probando el nuevo Panel de Control ahora mismo. En esta guía, te dejamos todo lo que tenés que saber para crear skins para la nueva interfaz. ¡Adelante!

Un sistema más simple

Antes, crear y mantener un skin era complicado: debías subir un complejo archivo CSS adaptando el estilo del panel a tu imagen de marca. Una pequeña actualización significaba pedirle a un diseñador o maquetador que hiciera los cambios, subir el CSS nuevamente… Esto también nos impedía a nosotros, ELSERVER.COM, crear nuevos elementos en la interfaz, ya que quienes utilizaran un skin diferente no los verían correctamente.

Ahora, para crear un skin solamente debés elegir los colores, el tipo de letra y la URL de tu logo. ¡Y listo! Podés crear tantos como quieras, para que tus clientes tengan opciones que se adapten a su gusto.

Porque otra de las novedades es esa: el skin ya no depende de la cuenta, sino del usuario. Podés armar cuatro o cinco opciones, el usuario desde la configuración de su SSO puede guardar su favorita.

Listado de skins

Si tenés un plan Reseller, al ingresar al nuevo Panel de Control verás en el menú izquierdo la opción “Temas”.

Al hacer click allí, verás el listado de todos los temas (skins) que tenés disponibles para tus clientes. Por defecto, verás dos:

– Uno llamado Default, el skin marca blanca por defecto disponible para todas las cuentas de la plataforma.

– Y otro llamado elserver, un skin heredado: podés verlo y tomarlo como referencia, pero no lo van a ver tus clientes.

Crear un nuevo skin

Para crear tu primer skin, hacé click en “Nuevo tema”. Verás un formulario en la parte derecha, donde podrás completar:

Datos básicos

– El nombre del skin: cualquier nombre que te ayude a identificarlo.

– Si es visible: mientras lo estés preparando, quizás no quieras que tus clientes lo vean. Si es así, dejá esta opción destildada.

– Si es el skin por defecto: define si es el tema predeterminado para tus clientes. Cada usuario SSO puede guardar en sus preferencias el skin que quiere utilizar, pero por defecto verá el tema que tildes con esta opción.

Apariencia

Logo: es la imagen que aparecerá en la esquina superior izquierda del panel. Debe ser un PNG con fondo transparente, de 245 x 35 pixels. Debés escribir la URL completa de la imagen, incluyendo http://. Si querés, podés utilizar este ejemplo como punto de partida.

Color principal: es el color que tendrán la barra superior, los enlaces, el indicador de sección activa, las carpetas… ¡todo! Cambiando este color, podés cambiar toda la apariencia del panel. Debe ser un código de color hexadecimal completo, por ejemplo #0088cc. Pronto incluiremos un colorpicker para que el trabajo sea aún más sencillo.

Tamaño de letra: el tamaño base que tendrá el texto en el panel. Debe ser un valor en pixels, entre 12 y 15.

Tipo de letra: podés elegir entre Open Sans, Tahoma, Arial y Verdana.

Previsualizar un skin

Para ver cómo quedaría, podés hacer click en “Previsualizar”. Se abrirá una ventana modal donde podrás ver el skin en acción.

Cambios en el skin

Los cambios podés hacerlos y previsualizarlos en cualquier momento, pero los usuarios que ya estuvieran logueados al panel y utilizando ese skin verán el cambio recién una vez que inicien sesión nuevamente.

Tu skin, tu estilo

Como ves, crear un skin es muy sencillo y tiene un gran efecto en cada detalle de la interfaz de Kinto. Por ejemplo, eligiendo un logo y definiendo el color principal en un tono violeta, podemos lograr algo como:

custom01

El color principal define también los colores de las carpetas, por ejemplo, cuando navegamos por los backups web:

custom02

Ahora con un sólo cambio, podés hacer que tus clientes se sientan como en casa.

Utilizar tus propios skins

Los usuarios SSO de cuentas revendedoras son los únicos que pueden elegir un skin que ellos mismos han creado. Desde el menú de tu SSO, en la esquina superior derecha del panel, podés ir a la sección “Temas” y seleccionar para tu uso personal un skin provisto por ELSERVER o creado en tu multicuenta.

Esto es muy útil para que, si estás vendiendo a la vista de tu potencial cliente, no vea el logo de ELSERVER en ninguna parte de tu pantalla.

En resumen

Esperamos que puedan crear skins con su logo y sus colores de una forma más simple. Si tienen alguna consulta, no duden en contactarnos por mail o bien en los comentarios de esta nota, para que podamos ayudarlos.

¡Nos leemos la próxima!

LAYOUT

SAMPLE COLOR

Please read our documentation file to know how to change colors as you want

BACKGROUND COLOR

BACKGROUND TEXTURE