Personalización botón WAW

Crea tu propio botón personalizado

NOTA – Cuando crees un botón propio, es tu responsabilidad hacerlo accesible, para ello, aquí tienes algunas pautas importantes:

  • Añade el atributo aria-label si el botón no tiene texto en su interior o no está asociado a una etiqueta.

  • Si utiliza un elemento <div> o <a> para el botón, proporciónele el rol button .

  • Verifique con el comprobador de contraste WCAG 2.1 que los colores del botón están bien contrastados.

Métodos

  1. Crea un <button> propio con el ID de nuestro botón INDmenu-btn. Esto añadirá nuestro evento click a tu botón, y no creará un nuevo botón. IMPORTANTE : Asegúrese de que el botón existe en la página antes de que nuestro script se cargue, de lo contrario, no funcionará.
  2. Crea un <button> propio y oculta nuestro botón con el siguiente CSS:

    Recomendado:
    Añade este fragmento a tu archivo css:

    #INDmenu-btn {

    display: none !important

    }

    También puedes añadir CSS en línea con Javascript:

    document.getElementById('INDmenu-btn').style.display = 'none !important';

Puede utilizar uno de estos 2 métodos para abrir el menú:

Proporcione a su nuevo botón el siguiente método onclick:

Html

<button onclick="window.interdeal.a11y.openMenu()"> custom button </button>

Js

let btn = document.getElementById('INDmenu-btn');

btn.addEventListener('click',window.interdeal.a11y.openMenu);

JQuery

$('#INDmenu-btn').on('click',window.interdeal.a11y.openMenu);

Vue

<button v-on:click="window.interdeal.a11y.openMenu"> custom button </button>

React

<button onclick="{window.interdeal.a11y.openMenu()}"> custom button </button>

Angular

<button (click)="window.interdeal.a11y.openMenu()"> custom button </button>

Este método abrirá el menú de accesibilidad.

Una vez que haya hecho clic en su botón, haga clic entre bastidores en nuestro botón oculto ( #INDmenu-btn ).

Personalizar la referencia del botón

Clave del sitio

32 Dígitos que son generados por el sistema como un id único para su sitio web.

sitekey

Tipo: StringNo editable
Esta propiedad se genera automáticamente y no debe modificarse.
Valor por defecto: Autogenerado

Valores opcionales: asd7890asdhlkas87ohjasd98yohasd9

Generado automáticamente, ¡no cambies nada aquí! de lo contrario, el widget no funcionará.

Descripción:
Generado automáticamente, ¡no cambies nada aquí! de lo contrario, el widget no funcionará.

//Get method

interdeal.sitekey

//Establecer método

//none

Position

Define el lado del botón de accesibilidad.

position como valor único

Tipo: StringEditable
Esta propiedad tiene valores por defecto si no se pasa.
Valor por defecto: left

Valores opcionales: left/right

Define el lado del botón de accesibilidad, tanto en escritorio como en móvil

Descripción:
Define el lado del botón de accesibilidad, tanto en escritorio como en móvil

//Get method

interdeal.menuPos

//Establecer método

'left'

position como un array

Tipo: String ArrayEditable
Esta propiedad tiene valores por defecto si no se pasa.
Valor por defecto: ‘left’ como una sola cadena

Valores opcionales: [left,right]

El lado izquierdo es para el escritorio,
el lado derecho es para el móvil

Descripción:
[«Left»,»Right»], define lados diferentes, para escritorio y para móvil aparte.

//Get method

interdeal.menuPos

//Establecer método

['left', 'right']

Estilo del botón

Puede cambiar el estilo predeterminado de los botones

vPosition

Tipo: String ArrayEditable
Esta propiedad tiene valores por defecto si no se pasa.
Valor por defecto: Escritorio – top: 24px, Móvil – bottom: 24px;

Valores opcionales: 10px, 20%, …

Acepta cualquier valor css top/bottom

Descripción:
Posición del eje Y del widget, el lado izquierdo se refiere a la versión de escritorio, el lado derecho es para móviles. Si desea definir sólo una de las opciones, el otro necesita obtener «indefinido», se utilizará el valor predeterminado.

//Get method

interdeal.btnStyle.vPosition

//Establecer método para escritoriop>

['24px',undefined]

//Establecer método para móvil>

[undefined, '24px']

//Establecer método para ambos>

['50px', '24%']

Scale

Tipo: float ArrayEditable
Esta propiedad tiene valores por defecto si no se pasa.
Valor por defecto: [«0.9», «0.5»]

Valores opcionales: 10px, 20%, …

Acepta cualquier valor css top o bottom

Descripción:
Tamaño del widget, el lado izquierdo se refiere a la versión de escritorio, el lado derecho es para móviles. Si desea definir sólo una de las opciones, el otro tiene que obtener «indefinido», se utilizará el valor predeterminado.

//Get method

interdeal.btnStyle.scale

//Establecer método sólo para escritorio

[undefined, 0.6]

//Establecer método sólo para móviles

[0.7, undefined]

//Establecer método para ambos

[0.7, 0.6]

icon

Tipo: ObjectoEditable
Esta propiedad tiene valores por defecto si no se pasa.
Valor por defecto: 7

Valores opcionales:

String: Define el botón del widget con diseño textual ( tomará la cadena y la pondrá en el botón) ,Integer: escribe el número del icono elegido.
Descripción:
Define el icono del widget.

//Get method

interdeal.btnStyle.scale

//Establecer método para el icono

{'type': 1}

//Establecer método para el texto

{'type', 'Accessibility'}

color

Tipo: stringEditable
Esta propiedad tiene valores por defecto si no se pasa.
Valor por defecto: main: darkblue ,second: white

Valores opcionales: main – string second – string

main: define el color de fondo del botón de accesibilidad ,second: define el color del img de accesibilidad

Descripción:
Define los colores del botón.
IMPORTANTE : LOS COLORES DEBEN MANTENER UNA RELACIÓN DE CONTRASTE DE 1 A 4,5.
Para comprobar el contraste de los colores, visite la siguiente web

//Get method

interdeal.btnStyle.color

//Método para el color de botón

{'main': 'black'}

//Método para texto o svg

{'second': '#122231'}

Icono de botón

Define el icono del menú de accesibilidad(explicación ampliada). las partes internas del mismo son inicializadas por el sistema con valores predefinidos.

outline

Tipo: BooleanNo editable
 Esta propiedad se genera automáticamente y no debe modificarse.
Valor por defecto: false.

Valores opcionales: true/false

Descripción:
Añade un diseño de contorno al botón.

//Get

interdeal.btnStyle.icon.outline

//Set

//Predefinido

shape

Tipo: StringNo editable
 Esta propiedad se genera automáticamente y no debe modificarse.
Valor por defecto: circle.

Valores opcionales: circle rectangle rounded semicircle
Predefinido.

Descripción:
Cambia la apariencia del botón.

//Get

interdeal.btnStyle.icon.shape

//Set

//Predefinido

Idioma

Establece el idioma del widget, predefinido por el en el código.

Menulang

Tipo: StringNo editable
Esta propiedad tiene valores por defecto si no se pasa.

Valor por defecto: EN

Valores opcionales: 
  1. AR - العربية
  2. BG - bălgarski
  3. CA - català
  4. CS - čeština
  5. DA - dansk
  6. DE - Deutsch
  7. EL - ελληνικά
  8. EN - English (American)
  9. EN-AU - English (Australian)
  10. EN-GB - English (Canadian)
  11. EN-ZA - English (British)
  12. ES - Español
  13. ES-MX - Español (Mexicano)
  14. ET - eesti keel
  15. EU - euskara
  16. FR - Français
  17. GL - galego
  18. HE - עברית
  19. HI - हिन्दी
  20. HR - hrvatski
  21. HU - magyar nyelv
  22. IT - Italiano
  23. JA - 日本語
  24. KO - 한국어/韓國語 (South Korea)
  25. LT - lietuvių kalba
  26. LV - latviešu valoda
  27. LB - Norsk Bokmål
  28. NB - Nederlands (Dutch)
  29. PL - polski
  30. PT - Português (Brasileiro)
  31. PT-PT - Português (Europeu)
  32. RO - limba română
  33. RU - Русский
  34. SK - Slovenský jazyk (Slovak)
  35. SL - Slovenščina (Slovene)
  36. SV - svenska
  37. TR - Türkçe
  38. UK - украї́нська мо́ва
  39. ZH - 正體字/繁體字 (Traditional)
  40. ZH-CN - 正体字/繁体字 (Simplified)

No cambies el idioma manualmente; depende del sistema WeAllWeb.

Descripción:
Establece el idioma del widget, tomado del atributo lang del elemento HTML

//Get method

interdeal.Menulang

//Set method

//none

Opciones de funcionalidad adicionales

Script de accesibilidad

Estas banderas sólo se pueden establecer en el script que tienes que implementar en el sitio web.

forceBtnAppearance

Tipo: BooleanEditable
Esta propiedad tiene valores por defecto si no se pasa.

Valor por defecto: undefined

Valores opcionales: cualquier valor que pueda utilizarse como Boolean.

1, 0, undefined, true, false, etc…

Descripción:
Si utiliza iframes en su sitio web, esta bandera obligará a que el botón de accesibilidad aparezca también dentro del iframe (lo ocultamos por defecto y controlamos la accesibilidad con un solo botón)

//Sólo funcionará si se establece desde el script de accesibilidad.

window.interdeal = {

 sitekey : ... ,

 Position : ... ,

 Menulang : ... ,

 forceBtnAppearance : true ,

 btnStyle : {

  ...

 },

 domains : {

  ...

 }

}

waitForTop

Tipo: BooleanEditable
Esta propiedad tiene valores por defecto si no se pasa.

Valor por defecto: undefined

Valores opcionales: cualquier valor que pueda utilizarse como Boolean.

1, 0, undefined, true, false, etc…

Descripción:
Si el widget se carga dentro de un iframe, existe la posibilidad de que la carga del iframe sea más rápida que la de la página superior. Esta bandera obliga al widget a esperar una respuesta de la parte superior.
IMPORTANTE: el widget esperará una respuesta y no funcionará hasta que la obtenga, aunque tarde una eternidad.

//Sólo funcionará si se establece desde el script de accesibilidad.

window.interdeal = {

 sitekey : ... ,

 Position : ... ,

 Menulang : ... ,

 waitForTop : true ,

 btnStyle : {

  ...

 },

 domains : {

  ...

 }

}

Mics.

Varias banderas que se pueden fijar en cualquier momento.

draggable

Tipo: BooleanEditable
Esta propiedad tiene valores por defecto si no se pasa.

Valor por defecto: undefined

Valores opcionales: cualquier valor que pueda utilizarse como Boolean.

1, 0, undefined, true, false, etc…

Descripción:
Establece si el botón de accesibilidad es arrastrable,El botón puede ser arrastrado en el eje y y hacia los bordes izquierdo y derecho de la pantalla. Sólo funciona en el botón por defecto, si inyecta su propio botón no funcionará.

//Sólo funcionará si se establece desde el script de accesibilidad.

window.interdeal = {

 sitekey : ... ,

 Position : ... ,

 Menulang : ... ,

 draggable : true ,

 btnStyle : {

  ...

 },

 domains : {

  ...

 }

}


//Desde un script en cualquier lugar y en cualquier momento.

interdeal.draggable = false

noLogs

Tipo: BooleanEditable
Esta propiedad tiene valores por defecto si no se pasa.

Valor por defecto: undefined

Valores opcionales: cualquier valor que pueda utilizarse como Boolean.

1, 0, undefined, true, false, etc…

Descripción:
Deshabilitar los logs del widget en la consola, Por defecto, nuestro widget está inyectando logs a la consola con cierta información, si quieres deshabilitarlo, usa esta bandera.

//Sólo funcionará si se establece desde el script de accesibilidad.

window.interdeal = {

 sitekey : ... ,

 Position : ... ,

 Menulang : ... ,

 noLogs : true ,

 btnStyle : {

  ...

 },

 domains : {

  ...

 }

}


//Desde un script en cualquier lugar y en cualquier momento.

interdeal.noLogs = false

Eventos

Varios eventos que dispara el widget.

INDbuttonRevealed

Ejecutado por: body

Localización: Sin listener, sólo envío

Descripción:
Este evento se dispara cuando el botón termina su proceso de inicialización.

INDdragEnd

Ejecutado por: accessibility-button

Localización: interdeal.a11y.a11yBtn

Descripción:
Este evento se dispara cuando el botón termina su proceso de inicialización.