Editor WYSIWYG para la página de login en los portales cautivos de Hotspots Edgecore

En este artículo enseñaremos los conceptos básicos del nuevo editor para portales cautivos de los Hotspots de EdgeCore.

En la versión 3.45.000 Edge-Core ha introducido el editor WYSIWYG para facilitar la edición de nuestro portal cautivo.

Cabe destacar que el editor, solo está disponible para la pagina de login. Las demás páginas que componen el portal (login success, login fail, etc) no disponen de dicho editor.

Desde WifiSafe, damos a nuestros clientes la posibilidad de contratar un portal cautivo totalmente personalizado, incluyendo todas las paginas del mismo (Disclaimer, General Login, Login Success, Login Fail, etc.)

Para acceder al editor de la pagina de Login de nuestro Hotspot, debemos entrar en la zona de servicio correspondiente. Encontraremos el editor dentro de la opción “Login Page Costumization”

Costumización de la pagina de login

Una vez dentro de la configuración de portal, vamos a “General Login Page” y seleccionamos la opción “editor”.

Selección del Editor en la pagina de login

Al hacer click en el botón “Editor” accederemos al WYSIWYG que por defecto, tiene la siguiente configuración.

Plantilla por defecto del editor de Edgecore

En los botones de la parte superior izquierda, podemos ver como seria el portal dependiendo del dispositivo (Pc, Smartphone, tablet).

Previsualización en smarthphone, table o PC

En la parte derecha, tenemos los iconos para guardar, reiniciar, deshacer o rehacer y guardar. Es recomendable ir guardando después de cada cambio.

Guardar cambios editor portal cautivo Hotspot Edgecore

En la columna de la izquierda, tenemos las opción de autenticacion y y edición, donde podemos cambiar la imagen de fondo, logo, y añadir o quitar métodos de autenticacion.

Opciones edicion portal cautivo Edgecore

En la columna de la parte derecha, podremos editar textos, colores, tamaño y posición de los elementos .

Mas Opciones edicion portal cautivo Edgecore

Es muy importante que mantengamos la estructura del portal, es que es la siguiente, en caso contrario el portal no funcionará correctamente.

Body -> Signin-form -> box ->Figuras de la columna izquierda.

Esta estructura la podemos ver si hacemos click en el menú de la parte superior derecha de la pantalla.

capas edicion portal cautivo Edgecore

Podemos añadir o quitar autenticacion, con solo arrastrar el elemento a la vista previa.

Por ejemplo, si queremos añadir autenticacion vía twitter, solo tenemos que seleccionarlo en el menú izquierdo, y arrastrarlo al centro, manteniendo la estructura que hemos comentado antes. Evidentemente hay que configurar previamente las credenciales de las APIs de las redes sociales que vayamos a utilizar.

Añadir redes sociiales edicion portal cautivo Edgecore

Al soltar el icono de la autenticacion dentro de la caja del portal, automáticamente aparecerá el método de login.

Añadir redes sociales edicion portal cautivo Edgecore 2

Podemos hacer lo mismo con los demás tipos de autenticación, por ejemplo, usuario y contraseña.

Añadir mas formas de autenticación de usuarios portal cautivo Edgecore

Si queremos cambiar el logo por uno nuestro, solo tenemos que hacer doble click en el logo original, y abrirá la ventana para que podamos subir nuestro propio logo.

Cambiar logotipo portal cautivo Edgecore

Si hacemos click en el recuadro de la izquierda, podemos seleccionar un logo desde nuestro PC. También podemos arrastrar el logo hacia el recuadro y aparecerá en la parte derecha.

Una vez hayamos localizado el logo, solo tenemos que hacer doble click sobre el mismo y se cambiará automáticamente.

Cambiar logotipo portal cautivo Edgecore 2

Con la imagen de fondo, los pasos son los mismo, pero dada la estructura del portal, es complicado seleccionarla haciendo doble click como con el logo. En este caso, lo mejor es usar las herramientas del menú izquierdo.

Hacemos en click en una parte vacía de la imagen de fondo, vamos al menú izquierdo y veremos el layer donde tenemos la imagen.

Al hacer un click en este layer, podemos cambiar la imagen del mismo.

Cambiar imagen de fondo portal cautivo Edgecore

A partir de ahí, solo tenemos que seleccionar la imagen en nuestro PC, o desde las imágenes que tengamos cargadas previamente en el equipo.

Es importante respetar los limites que te indica el equipo en cuando a tamaño y peso de la imagen.

Imagen de fondo portal cautivo Edgecore

Para guardar nuestro portal, solo tenemos que hacer click en el icono de guardar en la parte superior derecha.

Guardar cambios edición portal cautivo Edgecore

Siguiendo estos pasos, en pocos minutos podremos disponer de un portal cautivo personalizado para nuestro hotspot de EdgeCore.

Adicionalmente, podemos utilizar un selector de idiomas, el selector, traducirá automáticamente las palabras predeterminadas del portal.

Solo tenemos que mover el icono del selector a la parte que queramos del portal, y luego hacer un click en el lápiz para seleccionar los idiomas predeterminados.

Selector multiidioma en la pagina de login Hotspot Edgecore

Una vez seleccionados los idiomas aquí podeis ver como queda al seleccionar el Idioma en Ingles.

Pagina en Ingles pagina de login Hotspot Edgecore

Y en la siguiente imagen como quedaría al seleccionar el idioma Español.

Pagina en castellano login Hotspot Edgecore

Si quereis verlo en formato video, lo tenemos colgado en nuestro canal de youtube.

Más información y otros artículos/manuales en nuestro Blog de Wifisafe (https://www.wifisafe.com/blog/categoria/soporte/)

Contacto: soporte@wifisafe.com

Descargar manual en PDF



CONOCE NUESTROS PRODUCTOS Y SOLUCIONES WIRELESS