Bienvenido a Soporte Purple

Fragmentos

  • Actualización

Los fragmentos son códigos cortos que puedes incrustar en tus páginas de presentación HTML para representar elementos comunes, como un enlace para que tus visitantes se autentiquen a través de las redes sociales o un formulario de registro WiFi. Tu plantilla HTML personalizada incluye JavaScript repetitivo que vincula eventos a ciertos fragmentos (por ejemplo, fragmentos de autenticación de WiFi, como enlaces de autenticación de redes sociales y formularios de inicio de sesión y registro de WiFi). Este JavaScript proporciona la funcionalidad principal para todos los fragmentos. Para vincular tus propios eventos a salidas de fragmentos, puedes usar el editor de JavaScript

Un fragmento de ejemplo para un formulario de registro se ve así:

[[!RegistrationForm]]

Puedes incrustar fragmentos dentro de tu propio marcado y utilizar el editor de CSS para diseñar la salida HTML. Por ejemplo, si deseas diseñar el formulario de registro, puedes crear el siguiente marcado personalizado e incrustar el fragmento:

<div class="registration-form-container">
<p>Create an account</p>
[[!RegistrationForm]]
</div>

También puedes diseñar algunos de los fragmentos con un parámetro "id" o "class" y definir este estilo dentro del CSS. Por ejemplo:

<div>
    [[!RegistrationForm &class=`my-form`]]
</div>

Cuando se compila la página de bienvenida, los fragmentos se convierten en HTML.

Para insertar un fragmento, asegúrate de que el cursor esté en la ubicación correcta y haz clic en el título del fragmento requerido. Los siguientes fragmentos están disponibles, las opciones son los parámetros de identificación o clase que puedes aplicar al fragmento:

Fuentes

Nombre

Código de fragmento

Descripción

Salida HTML de ejemplo

Insertar una fuente de Google

[[!GoogleFont]]

Inserta una etiqueta de estilo que se vincula a una fuente de Google.

<link href="https://dowj6t3sraq9r.cloudfront.net/Roboto.css" rel="stylesheet" type="text/css">

Opciones

Opción

Descripción de opción

Ejemplo de opción

fuente

La identificación de la familia tipográfica

[[!GoogleFont &font='Roboto']]

Etiquetas dinámicas

No hay opciones para estos fragmentos.

Nombre

Código de fragmento

Descripción

Salida HTML de ejemplo

Nombre del lugar

%%VENUE.NAME%%

Muestra el nombre para mostrar del lugar en el que se encuentra actualmente el visitante con acceso a WiFi. Puedes agregar nombres para mostrar para lugares en Administración >Detalles. Esto genera una cadena vacía si el lugar no tiene un nombre para mostrar.

Café urbano

Identificación de terceros del lugar

%%VENUE.THIRD_PARTY_ID%%

Genera la identificación de terceros.

aa1122

Ciudad del lugar

%%%VENUE.TOWN%%

La ciudad del lugar.

Manchester

País del lugar

%%%VENUE.COUNTRY%%

Muestra el país del lugar.

Inglaterra

Nombre de empresa

%%%COMPANY.NAME%%

Genera el nombre de la empresa.

Café urbano

Punto de acceso Mac

%%%ACCESSPOINT.MAC%%

Muestra la dirección mac del punto de acceso.

00-11-22-33-44-55

SSID del punto de acceso

%%%ACCESSPOINT.SSID%%

Genera el SSID de la red si está disponible.

UrbanCafePublicWifi

Vínculos de autenticación

Nombre

Código de fragmento

Descripción

Salida HTML de ejemplo

Formulario de inscripción

[[!RegistrationFormAuthLink]]

Embeds an HTML anchor element so visitors can authenticate on to your WiFi via the registration form. Haz clic en el engranaje para editar la configuración del formulario para determinar qué campos aparecen en tus formularios de registro del WiFi.

<a href="#form" data-auth-provider="Form">Form</a>

Formulario de inicio de sesión

[[!LoginFormAuthLink]]

Incorpora un elemento de anclaje HTML para que los visitantes repetidos puedan autenticarse en tu WiFi a través del formulario de inicio de sesión.

<a href="#login" data-auth-provider="Login">Login</a>

Facebook

[[!FacebookAuthLink]]

Incorpora un elemento de anclaje HTML para permitir que los visitantes se autentiquen en tu WiFi a través de Facebook.

<a href="#facebook" data-auth-provider="Facebook">Facebook</a>

X

[[!TwitterAuthLink]]

Incorpora un elemento de anclaje HTML para permitir que los visitantes se autentiquen en tu WiFi a través de X.

<a href="#twitter" data-auth-provider="Twitter">Twitter</a>

LinkedIn

[[!LinkedInAuthLink]]

Incorpora un elemento de anclaje HTML para permitir que los visitantes se autentiquen en tu WiFi a través de LinkedIn.

<a href="#linkedin" data-auth-provider="LinkedIn">LinkedIn</a>

Vkontakte

[[!VkontakteAuthLink]]

Incorpora un elemento de anclaje HTML para permitir que los visitantes se autentiquen en tu WiFi a través de Vkontakte.

<a href="#vkontakte" data-auth-provider="Vkontakte">Vkontakte</a>

Inicio de sesión del personal

[[!StaffWifiAuthLink]]

Incorpora un elemento de anclaje HTML para permitir que el personal inicie sesión a través de SAML.

<a href="#staffwifi" data-auth-provider="StaffWiFi">Staff WiFi</a>

Apple

[[!AppleAuthLink]]

Incorpora un elemento de anclaje HTML para permitir que los visitantes se autentiquen en tu WiFi a través de Apple ID incluyendo Face ID y Touch ID.

<a href="#apple" data-auth-provider="apple">Apple</a>

Opciones

Opción

Descripción de opción

Ejemplo de opción

identificación

Agrega un ID de DOM al elemento.

[[!RegistrationFormAuthLink &id=`reg-auth-button`]]

clase

Agrega una clase al elemento.

[[!LoginFormAuthLink &class=`login-auth-button`]]

texto

Establece el texto del elemento. Por defecto es una cadena traducida si no se establece.

[[!FacebookAuthLink &text=`Facebook`]]

Atributos de autenticación

No hay opciones para estos fragmentos.

Nombre

Código de fragmento

Descripción

Salida HTML de ejemplo

Formulario de inscripción

[[!RegistrationFormAuthAttr]]

Incorpora un atributo de datos HTML para que los visitantes puedan autenticarse en tu WiFi a través del formulario de registro. Este fragmento debe estar incrustado como un atributo en línea dentro de un elemento HTML existente. Haz clic en el engranaje para editar la configuración del formulario para determinar qué campos aparecen en tus formularios de registro del WiFi.

<div class="my-login-auth-button" href="#" data-auth-provider="Login"></div>

Formulario de inicio de sesión

[[!LoginFormAuthAttr]]

Incorpora un atributo de datos HTML para que los visitantes habituales puedan autenticarse en tu WiFi a través del formulario de inicio de sesión. Este fragmento debe estar incrustado como un atributo en línea dentro de un elemento HTML existente.

<div class="my-login-auth-button" href="#" data-auth-provider="Login"></div>

Facebook

[[!FacebookAuthAttr]]

Incorpora un atributo de datos HTML para permitir que los visitantes se autentiquen en tu WiFi a través de Facebook. Este fragmento debe estar incrustado como un atributo en línea dentro de un elemento HTML existente.

<div class="my-auth-button" href="#" data-auth-provider="Facebook"></div>

X

[[!TwitterAuthAttr]]

Incorpora un atributo de datos HTML para permitir que los visitantes se autentiquen en tu WiFi a través de X. Este fragmento debe estar incrustado como un atributo en línea dentro de un elemento HTML existente.

<div class="my-auth-button" href="#" data-auth-provider="Twitter"></div>

LinkedIn

[[!LinkedInAuthAttr]]

Incorpora un atributo de datos HTML para permitir que los visitantes se autentiquen en tu WiFi a través de LinkedIn. Este fragmento debe estar incrustado como un atributo en línea dentro de un elemento HTML existente.

<div class="my-auth-button" href="#" data-auth-provider="LinkedIn"></div>

Vkontakte

[[!VkontakteAuthAttr]]

Incorpora un atributo de datos HTML para permitir que los visitantes se autentiquen en tu WiFi a través de Vkontakte. Este fragmento debe estar incrustado como un atributo en línea dentro de un elemento HTML existente.

<div class="my-auth-button" href="#" data-auth-provider="Vkontakte"></div>

Inicio de sesión del personal

[[!StaffWifiAuthAttr]]

Incorpora un elemento de anclaje HTML para permitir que el personal inicie sesión a través de SAML.

data-auth-provider="StaffWiFi"

Formulario de autenticación

Nombre

Código de fragmento

Descripción

Salida HTML de ejemplo

Formulario de inscripción

[[!RegistrationForm]]

Incorpora un formulario de registro en tu HTML para que los nuevos visitantes puedan autenticarse en tu red WiFi. Por favor, ten en cuenta que en el modo de vista previa no se puede enviar este formulario. Haz clic en el engranaje para editar la configuración del formulario para determinar qué campos aparecen en tus formularios de registro del WiFi.

<div class="cf">

<form action="/access/register" method="post" data-registration-form="" data-msg-errors="Something doesn't look right.">

<div class="form-alert"></div>

<div class="form-field register-email required-field" data-error="Please enter a valid email address.">

<label for="regform-email">Dirección de correo electrónico<span class="required"> *</span></label>

<input type="email" id="regform-email" name="email" required="required" autocomplete="off" class="email">

</div>

<div class="form-field register-confirm-email required-field" data-error="Please confirm the email address.">

<label for="regform-email">Confirmar dirección de correo electrónico<span class="required"> *</span></label>

<input type="email" id="regform-email_confirm" name="email_confirm" required="required" autocomplete="off" class="email_confirm">

</div>

<div class="form-field register-password required-field" data-error="Please enter a password.">

<label for="regform-password">Contraseña<span class="required"> *</span></label>

<input type="password" id="regform-password" name="password" required="required" autocomplete="off" class="password" data-min-length="8">

</div>

<div class="form-field register-confirm-password required-field" data-error="Please confirm the password." data-error-confirm="Passwords do not match.">

<label for="regform-password-confirm">Confirmar Contraseña<span class="required"> *</span></label>

<input type="password" id="regform-password-confirm" name="password_confirm" required="required" autocomplete="off" class="password-confirm" data-min-length="8">

</div>

<div class="form-field checkbox-field register-agree-terms" data-terms-block="" data-trans-and="and">

<input id="accept-terms-615c76d1f0b92" name="accept_terms" type="checkbox" value="1" data-error="Please agree to the terms and conditions.">

<label for="accept-terms-615c76d1f0b92"></label>

<span class="default-terms">Estoy de acuerdo con <a href="/terms/wifi/agreement/terms" target="_blank" class="terms-link">de Purple de EULA</a> y <a href="/terms/wifi/agreement/privacy" target="_blank" class="terms-link">la Política de privacidad</a></span>

<span class="custom-terms" style="display: none;">Estoy de acuerdo con <a href="/terms/wifi/agreement/terms" target="_blank" class="terms-link">de Purple de EULA</a> y <a href="/terms/wifi/agreement/privacy" target="_blank" class="terms-link">la Política de privacidad</a></span>

<span data-tpl-custom-term="" style="display: none;" data-base-uri=""><a class="terms-link" href="%url%" target="_blank">%text%</a></span>

</div>

<input type="hidden" name="form_type" value="RegistrationForm">

<input type="hidden" name="csrf_token" value="%%CSRF_TOKEN%%">

<div class="form-field submit-field register-submit">

<input type="submit" value="Sign up">

</div>

</form>

Formulario de inicio de sesión

[[!LoginForm]]

Incorpora un formulario de inicio de sesión en tu HTML para permitir que tus visitantes existentes se autentiquen en tu red WiFi. Por favor, ten en cuenta que en el modo de vista previa no se puede enviar este formulario.

<form class="login-form" action="/access/login" method="post" data-login-form data-msg-errors="Something doesn&#039;t look right.">

<div class="form-alert"></div>

<div class="form-field login-email" data-error="Please enter your email address.">

<label for="loginform-email">Email address</label>

<input type="email" id="loginform-email" name="email" required="required" autocomplete="off" class="email" placeholder="" />

</div>

<div class="form-field login-password" data-error="Please enter your password.">

<label for="loginform-password">Password</label>

<input type="password" id="loginform-password" name="password" required="required" autocomplete="off" class="password" placeholder="" />

</div>

<div class="form-field submit-field login-submit">

<input id="loginform-submit" type="submit" value="Sign in" />

</div>

<div class="form-field form-text login-forgot-password">

<a href="#" data-forgot-password>Forgot your password?</a>

</div>

<input type="hidden" name="form_type" value="LoginForm">

<input type="hidden" name="csrf_token" value="%%CSRF_TOKEN%%">

</form>

Formulario de restablecimiento de contraseña

[[!PasswordResetForm]]

Incorpora un formulario de inicio de sesión en tu html para permitir que tus visitantes existentes se autentiquen en tu red WiFi. Por favor, ten en cuenta que en el modo de vista previa no se puede enviar este formulario.

<form class="" action="/access/resetpassword" method="post" data-password-reset-form data-msg-errors="Something doesn&#039;t look right.">

<div class="form-body">

<div class="form-alert"></div>

<div class="gw-form-field passwordreset-email">

<label for="resetpasswordform-email">E-mail address</label>

<input type="email" id="resetpasswordform-email" name="email" required="required" autocomplete="off" class="email" data-error="Please enter a valid email address." />

</div>

<div class="gw-form-field submit-field passwordreset-submit">

<input id="reset-password-submit" type="submit" value="Reset" />

</div>

</div>

<div class="result" style="text-align: center; display: none;">

<img src="/img/tick-large.png" alt="tick" title="tick" />

<p class="message"></p>

</div>

<input type="hidden" name="form_type" value="ForgotPasswordForm">

<input type="hidden" name="csrf_token" value="%%CSRF_TOKEN%%">

</form>

Opciones

Opción

Descripción de opción

Ejemplo de opción

clase

Agrega una clase al formulario.

[[!LoginForm &class=`login-form`]]

Acuerdos de usuario

No hay opciones para estos fragmentos.

Nombre

Código de fragmento

Descripción

Salida HTML de ejemplo

URL del acuerdo de licencia de usuario final

[[!TermsUrl]]

Inserta una URL en el contrato de licencia de usuario final de WiFi para invitados (EULA). Este fragmento se puede incrustar en el atributo href de una etiqueta de anclaje.

<a href="/access/agreement/terms

" target="_blank">View our terms and conditions</a>

URL de la política de privacidad

[[!PrivacyPolicyUrl]]

Inserta una URL en la política de privacidad de WiFi para invitados. Este fragmento se puede incrustar en el atributo href de una etiqueta de anclaje.

<a href="/access/agreement/privacy

" target="_blank">Privacy policy</a>

URL de la política de cookies

[[!CookiePolicyUrl]]

Inserta una URL en la política de cookies de WiFi para invitados. Este fragmento se puede incrustar en el atributo href de una etiqueta de anclaje.

<a href="/access/agreement/cookies

" target="_blank">Cookie policy</a>

Idioma

No hay opciones para estos fragmentos.

Nombre

Código de fragmento

Descripción

Salida HTML de ejemplo

Selecciona el idioma

[[!SelectLanguage]]

Incorpora un elemento HTML <select> para permitir que los visitantes cambien el idioma del recorrido de acceso. El cambio de idioma está deshabilitado en el modo de vista previa.

<div id="lang-select">

<select class="lang-select">

<option data-url="/?locale=en_GB" value="en_GB" selected>Inglés británico</option>

<option data-url="/?locale=en_US" value="en_US">Inglés Americano</option>

<option data-url="/?locale=nl" value="nl">Holandés</option>

<option data-url="/?locale=fr" value="fr">Francés</option>

<option data-url="/?locale=de" value="de">Alemán</option>

<option data-url="/?locale=da" value="da">Danés</option>

<option data-url="/?locale=it" value="it">Italiano</option>

<option data-url="/?locale=tr" value="tr">Türkçe</option>

<option data-url="/?locale=es" value="es">Español</option>

<option data-url="/?locale=es_LA" value="es_LA">Español (LA)</option>

<option data-url="/?locale=ca_ES" value="ca_ES">Català</option>

<option data-url="/?locale=gl_ES" value="gl_ES">Gallego</option>

<option data-url="/?locale=el" value="el">Ελληνικά</option>

<option data-url="/?locale=eu" value="eu">Euskara</option>

<option data-url="/?locale=pt" value="pt">Português</option>

<option data-url="/?locale=pt_BR" value="pt_BR">Português Do Brasil</option>

<option data-url="/?locale=fi_FI" value="fi_FI">Suomi</option>

<option data-url="/?locale=sv" value="sv">Svenska</option>

<option data-url="/?locale=no_NO" value="no_NO">Norsk</option>

<option data-url="/?locale=lv" value="lv">Latviešu</option>

<option data-url="/?locale=id" value="id">Indonesia</option>

<option data-url="/?locale=ro" value="ro">Română</option>

<option data-url="/?locale=bg" value="bg">български</option>

<option data-url="/?locale=cs_CZ" value="cs_CZ">Čeština</option>

<option data-url="/?locale=hr_HR" value="hr_HR">Croatian (Croatia)</option>

<option data-url="/?locale=ru" value="ru">Русский</option>

<option data-url="/?locale=cy" value="cy">Cymraeg</option>

<option data-url="/?locale=ar_SY" value="ar_SY">العربية</option>

<option data-url="/?locale=he_HE" value="he_HE">עברית</option>

<option data-url="/?locale=ja" value="ja">日本語</option>

<option data-url="/?locale=ko" value="ko">한국어</option>

<option data-url="/?locale=th_TH" value="th_TH">ภาษาไทย</option>

<option data-url="/?locale=zh_CN" value="zh_CN">中文（简体)</option>

<option data-url="/?locale=zh_TW" value="zh_TW">中文（繁體)</option>

<option data-url="/?locale=vi" value="vi">Tiếng Việt</option>

<option data-url="/?locale=km" value="km">Khmer</option>

<option data-url="/?locale=hu" value="hu">Magyar</option>

<option data-url="/?locale=lt" value="lt">Lietuvių</option>

<option data-url="/?locale=pl" value="pl">Polski</option>

<option data-url="/?locale=rs" value="rs">Српски</option>

</select>

</div>

Idioma actual

[[!CurrentLanguage]]

Inserta el idioma actual en el que se está viendo la plantilla. Esto está determinado por el código de configuración regional solicitado por el agente de usuario o el idioma actual que el visitante ha seleccionado.

Inglés británico

Lugar

No hay opciones para estos fragmentos.

Nombre

Código de fragmento

Descripción

Salida HTML de ejemplo

Nombre del lugar

[[!VenueName]]

Muestra el nombre del lugar en el que se encuentra actualmente el visitante con acceso a WiFi.

Café urbano

Nombre para mostrar del lugar

[[!VenueDisplayName]]

Genera el nombre para mostrar del lugar en el que se encuentra actualmente el visitante con acceso a WiFi. Puedes agregar nombres para mostrar para lugares en Administración >Detalles. Este fragmento genera una cadena vacía si el lugar no tiene un nombre para mostrar.

Café Urbano: el mejor café de la ciudad

Imágenes

Nombre

Código de fragmento

Descripción

Salida HTML de ejemplo

Insertar una etiqueta de imagen

[[!Image]]

Incrusta una etiqueta <img> HTML con los atributos "ancho" y "alto" para una imagen en la lista de imágenes de tu plantilla. Este fragmento requiere una opción de "id" donde "id" es el nombre de un archivo en la lista de imágenes de tu plantilla.

<img class="logo" src="https://captive.portal.net/my-file.png" width="150" height="100" alt="">

URL de la imagen

[[!ImageUrl]]

Inserta una URL en una imagen de plantilla. Este fragmento requiere una opción de "id" donde "id" es el nombre de un archivo en la lista de imágenes de tu plantilla.

<img src="https://captive.portal.net/my-file.png">

Opciones

Opción

Descripción de opción

Ejemplo de opción

identificación

El nombre del archivo.

[[!Image &id=`my-file.png`]]

clase

Agrega una clase al elemento. Esto solo se aplica a Incrustar una etiqueta de imagen.

[[!Image &id=`my-file.png` &class=`logo`]]

Elementos repetitivos

Nombre

Código de fragmento

Descripción

Salida HTML de ejemplo

URL del logotipo de WiFi para invitados

[[!GuestWiFiLogo]]

Inserta una URL para la imagen estándar del logotipo de WiFi para invitados.

<img src="/img/guest-wifi-logo.png">

Ruleta

[[!Spinner]]

Incorpora marcado HTML repetitivo para generar una ruleta.

<div id="page-spinner" class="gw-spinner" data-spinner> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#loader-icon"></use></svg> <p>Loading</p> </div>

Impulsado por

[[!PoweredBy]]

Incorpora un elemento HTML que contiene un mensaje "impulsado por" y un enlace a la política de cookies de acceso al WiFii. Este fragmento es obligatorio y recomendamos que sea el último elemento del <body>.

<div class="gw-powered-by">

<p>Impulsado por Purple. Ver nuestra <a class = "terms-link" href = "/ acceso / acuerdo / cookies

" target="_blank">política de cookies.</a></p>

</div>

Opciones

Estas opciones solo se aplican a la ruleta.

Opción

Descripción de opción

Ejemplo de opción

identificación

Agrega un ID de DOM a la ruleta.

[[!Spinner &id=`main-spinner`]]

clase

Agrega una clase a la ruleta

[[!Spinner &class=`green small`]]

texto

Establece el texto de la ruleta.

[[!Spinner &id=`main-spinner` &text=`Loading page...`]]
Compartir en línea
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 0 de 0