Cómo instalar Eye-Able en pocos minutos
El código para tu página web:
Eye-Able se puede integrar en su página web de varias formas:
1. Integración a través del servidor Eye-Able
Copia el siguiente código y pégalo al final de la etiqueta
de tu página web:
<script async src="https://cdn.eye-able.com/configs/www.IHREDOMAIN.com"></script>
<script async src="https://cdn.eye-able.com/public/js/eyeAble.js"></script>
Durante la integración, asegúrese de utilizar siempre el atributo asíncrono «async».
Para obtener más información e instrucciones sobre distintos CMS, solo tienes que seguir estos enlaces:
2. Integración a través del servidor Eye-Able con recarga dinámica
Esta integración se diferencia de la variante 1 en que los datos del servidor de Eye-Able solo se cargan al hacer clic en el icono de Eye-Able. Esto reduce el número de conexiones salientes, pero requiere más código en el encabezado de su página web. La integración en su página web se realiza simplemente incluyendo el siguiente archivo en el encabezado de su página web:
<script>
let eA_domain =;
let eA_top = "15%"; //Top-Position des Icons z.B. "200px" oder "calc(50% -44px)"
let eA_side = "right"; //Seitenposition Icon z.B. "left"
let eA_bottom = "15%"; //Mobile bottom position
function aEA() {
let eA_h = document.querySelector('head') || document.body;
let s = document.createElement('script');
let c = document.createElement('script');
s.src = 'https://www.eye-able-cdn.com/test/public/js/eyeAble.js';
s.async = true;
c.src = 'https://www.eye-able-cdn.com/configs/' + eA_domain + '.js';
c.async = true;
eA_h.appendChild(s);
eA_h.appendChild(c);
}
let eA_open = false;
if (localStorage.getItem("eyeAbleVariables")) {
aEA();
} else {
function s() {
let co = document.querySelectorAll(".eyeAble_customToolOpenerClass,#eyeAble_customToolOpenerID,.eyeAble_customToolOpenerNoHideClass");
if (co.length > 0) {
function cOf() {
eA_open = true;
aEA();
co.forEach(e => e.removeEventListener("click", cOf));
}
co.forEach(e => e.addEventListener("click", cOf));
co.forEach(e => e.addEventListener("keyup", function (e) {if (event.which === 13) cOf();}));
} else {
let t = document.createElement('Eye-Able');
t.setAttribute("id", "eA_Opener");
t.attachShadow({mode: 'open'});
document.body.appendChild(t);
let h = document.createElement('div');
if (window.innerWidth < 700) { eA_side = "right";}
h.setAttribute("style", "position: fixed;top:" + eA_top + ";" + eA_side + ": 11px;z-index: 2147483648");
t.shadowRoot.appendChild(h);
let t1 = "Eye-Able - Visuelle Hilfe";
let t2 = "Passe diese Seite visuell an oder lass sie Dir vorlesen. Klicken zum Öffnen.";
let t3 = "Externer Dienst";
let ts = "left";
if(eA_side==="left") ts = "right";
let s = '' +
'<div aria-hidden="true" id="t" style="display:none;'+ts+': -350px;top: -40px;position: absolute;background: black;color: white;width: 290px;padding: 11px 20px 28px;border-radius: 20px;border: 3px solid #fff;font-family:Open Sans,sans-serif;font-weight: 400;font-size: 17px;line-height:24px;box-shadow: 0 0 8px 1px rgb(0 0 0 / 50%);">' +
' <div style="font-size: 22px;padding-bottom: 8px;margin-bottom: 8px;border-bottom: 3px solid;">'+t1+'</div>' +
' <p style="margin: 0 0 13px 0;">'+t2+'</p>' +
' <p style="position: absolute;bottom: 11px;right: 22px;margin: 0;font-weight: bold;">'+t3+'</p>' +
'</div>' +
'<div tabindex="0" role="img" aria-label="'+t1+' '+t2+t3+'" id="i" style="width: 70px;cursor: pointer;transition: transform 150ms ease;">' +
' <svg style="filter: drop-shadow(2px 3px 4px #505050);" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 389.9 389.6" preserveAspectRatio="none" xmlns:v="https://vecta.io/nano"><defs><linearGradient id="A" x1="253.85" y1="63.7" x2="253.85" y2="480.49" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4f4f4e"></stop><stop offset=".26" stop-color="#313130"></stop><stop offset=".55" stop-color="#161616"></stop><stop offset=".8" stop-color="#060606"></stop><stop offset="1"></stop></linearGradient><linearGradient id="B" x1="214.9" y1="353.49" x2="286.3" y2="353.49" gradientTransform="matrix(0.16, 0.99, 0.99, -0.16, -138.47, -44.34)" xlink:href="#A"></linearGradient><linearGradient id="C" x1="135.26" y1="296.4" x2="365.84" y2="296.4" xlink:href="#A"></linearGradient></defs><path d="M201.6 443.2h-33.4c-27.7 0-51.9-9.6-71.9-28.4a101.84 101.84 0 0 1-30.6-56.2 107.42 107.42 0 0 1-1.7-19v-52.7l.1-120.5c.1-26.7 9.5-50.3 28.1-70.1a101.58 101.58 0 0 1 55.6-30.7 104 104 0 0 1 20.9-1.9H339c25.9 0 48.8 8.3 68.1 24.6a102 102 0 0 1 34.5 58.2 100.5 100.5 0 0 1 2.1 20.8V340a99.13 99.13 0 0 1-11 46.3c-15.9 30.4-41 49.1-74.7 55.6a95.89 95.89 0 0 1-17.6 1.6h-87.8z" transform="translate(-59.2 -58.6)" fill="url(#A)"></path><path d="M279.9 10c24.4 0 46.2 7.6 64.8 23.4C362 48 372.9 66.6 377.6 88.8a93.42 93.42 0 0 1 2 19.7q0 86.4.1 172.7a94.41 94.41 0 0 1-10.4 44q-22.8 43.65-71.2 53a85.05 85.05 0 0 1-16.7 1.5H109.2c-26.4 0-49.3-9-68.4-27.1-15.5-14.6-25.1-32.5-29.1-53.5a99.85 99.85 0 0 1-1.6-18.1l.1-173.2c.1-25.7 9.2-48 26.7-66.7a96.5 96.5 0 0 1 52.9-29.2 102.64 102.64 0 0 1 20-1.8h96.9l73.2-.1h0m0-10H109.7a114.49 114.49 0 0 0-22 2 106.79 106.79 0 0 0-58.2 32.2C10.1 55 .2 79.7.1 107.7L0 228.2v52.7a109.41 109.41 0 0 0 1.8 20c4.4 23.2 15.1 43 32.1 58.9 20.9 19.7 46.3 29.8 75.3 29.8h172.3a99.15 99.15 0 0 0 18.6-1.6c35.3-6.8 61.6-26.3 78.2-58.2a103.74 103.74 0 0 0 11.6-48.6V108.5a103.33 103.33 0 0 0-2.2-21.8 106.53 106.53 0 0 0-36.2-61C331 8.6 307 0 279.9 0z" fill="#fff"></path><circle cx="250.6" cy="146.4" r="35.7" transform="matrix(.160226 -.98708 .98708 .160226 6.75 311.71)" fill="url(#B)"></circle><path d="M350.6,203.6l-75,6.7c-2.8.2-5.5.4-8.3.4H233.9a76.87,76.87,0,0,1-8.3-.4l-75-6.7a14.24,14.24,0,0,0-2.2,28.4l60.6,5.5a14.25,14.25,0,0,1,13,14.2v16.4a33.8,33.8,0,0,1-2.5,13l-34.5,88a14.3,14.3,0,0,0,26.1,11.7l33-80.1a7,7,0,0,1,13-.1l33,80.1A14.3,14.3,0,1,0,316.2,369l-34.5-87.9a36.61,36.61,0,0,1-2.5-13V251.7a14.18,14.18,0,0,1,13-14.2l60.6-5.5a14.24,14.24,0,0,0-2.2-28.4Z" transform="translate(-59.2 -58.6)" fill="url(#C)"></path><path d="M191.4 130.7c-23.693 0-42.9-19.207-42.9-42.9s19.207-42.9 42.9-42.9 42.9 19.207 42.9 42.9a42.89 42.89 0 0 1-42.9 42.9zm0-71.5c-13.69-.038-25.498 9.605-28.197 23.026a28.68 28.68 0 0 0 17.105 32.135c12.641 5.256 27.234.846 34.848-10.531A28.68 28.68 0 0 0 211.6 67.6a29.06 29.06 0 0 0-20.2-8.4zm52.5 278.6a21.46 21.46 0 0 1-19.5-12.6l-33.1-80.3-32.7 80.1a21.41 21.41 0 0 1-37.1 4.1 21.57 21.57 0 0 1-2.1-21.5l34.4-87.5a26.63 26.63 0 0 0 1.9-10.4v-16.4a7.09 7.09 0 0 0-6.5-7.1l-60.6-5.5c-11.791-.911-20.611-11.209-19.7-23s11.209-20.611 23-19.7l75.1 6.7a97.18 97.18 0 0 0 7.7.3h33.4a99.08 99.08 0 0 0 7.7-.3l75-6.7h.1c11.791-.911 22.089 7.909 23 19.7s-7.909 22.089-19.7 23l-60.5 5.5a7.09 7.09 0 0 0-6.5 7.1v16.4a28.29 28.29 0 0 0 2 10.4l34.5 87.9a21.36 21.36 0 0 1-1.8 20.2 22.06 22.06 0 0 1-18 9.6zm-52.5-107.1a14.11 14.11 0 0 1 13.1 8.8l33 80.1a7.62 7.62 0 0 0 3.9 3.6 7.13 7.13 0 0 0 9-9.6l-34.6-88.3a42.14 42.14 0 0 1-3-15.7v-16.4c-.054-11.101 8.438-20.376 19.5-21.3l60.6-5.5a7 7 0 0 0 4.9-2.4 6.61 6.61 0 0 0 1.7-5.2 7 7 0 0 0-7.6-6.6l-74.9 6.7a88.33 88.33 0 0 1-8.9.4h-33.4a87 87 0 0 1-8.9-.4l-75-6.7a7.12 7.12 0 0 0-1 14.2l60.7 5.5c11.062.924 19.554 10.199 19.5 21.3v16.4a42.14 42.14 0 0 1-3 15.7l-34.5 87.9a7.09 7.09 0 0 0 .3 7.3 7.19 7.19 0 0 0 6.6 3.2 7 7 0 0 0 5.9-4.3l32.9-79.9a14 14 0 0 1 13.2-8.8z" fill="#fff"></path></svg></div>' +
'</div>';
h.insertAdjacentHTML('beforeend', s);
let o = h.querySelector("#i");
let m = h.querySelector("#t");
if (window.innerWidth < 700) {
h.style.top = "unset";
h.style.bottom = eA_bottom;
o.style.width = "50px";
m.style.opacity = "0";
}
function x() {
eA_open = true;
aEA();
}
t.addEventListener("click", x);
t.addEventListener("keyup", function (e) {
if (event.which === 13) {
x();
}
});
h.querySelector("#i").addEventListener("mouseenter", function () {
m.style.display = "block";
o.style.transform = "scale(1.1)";
});
h.querySelector("#i").addEventListener("mouseleave", function () {
m.style.display = "none";
o.style.transform = "none";
});
}
}
if (document.readyState === "complete") {
s();
} else {
window.addEventListener('load', () => {
s();
});
}
}
</script>
<script>let eA_domain=,eA_top="15%",eA_side="right",eA_bottom="15%";function aEA(){let e=document.querySelector("head")||document.body,t=document.createElement("script"),a=document.createElement("script");t.src="https://www.eye-able-cdn.com/public/js/eyeAble.js",t.async=!0,a.src="https://www.eye-able-cdn.com/configs/"+eA_domain+".js",a.async=!0,e.appendChild(t),e.appendChild(a)}let eA_open=!1;if(localStorage.getItem("eyeAbleVariables"))aEA();else{function s(){let e=document.querySelectorAll(".eyeAble_customToolOpenerClass,#eyeAble_customToolOpenerID,.eyeAble_customToolOpenerNoHideClass");if(e.length>0){function t(){eA_open=!0,aEA(),e.forEach(e=>e.removeEventListener("click",t))}e.forEach(e=>e.addEventListener("click",t)),e.forEach(e=>e.addEventListener("keyup",function(e){13===event.which&&t()}))}else{let e=document.createElement("Eye-Able");e.setAttribute("id","eA_Opener"),e.attachShadow({mode:"open"}),document.body.appendChild(e);let t=document.createElement("div");window.innerWidth<700&&(eA_side="right"),t.setAttribute("style","position: fixed;top:"+eA_top+";"+eA_side+": 11px;z-index: 2147483648"),e.shadowRoot.appendChild(t);let o="Eye-Able - Visuelle Hilfe",l="Passe diese Seite visuell an oder lass sie Dir vorlesen. Klicken zum Öffnen.",i="Externer Dienst",n="left";"left"===eA_side&&(n="right");let s='<div aria-hidden="true" id="t" style="display:none;'+n+': -350px;top: -40px;position: absolute;background: black;color: white;width: 290px;padding: 11px 20px 28px;border-radius: 20px;border: 3px solid #fff;font-family:Open Sans,sans-serif;font-weight: 400;font-size: 17px;line-height:24px;box-shadow: 0 0 8px 1px rgb(0 0 0 / 50%);"> <div style="font-size: 22px;padding-bottom: 8px;margin-bottom: 8px;border-bottom: 3px solid;">'+o+'</div> <p style="margin: 0 0 13px 0;">'+l+'</p> <p style="position: absolute;bottom: 11px;right: 22px;margin: 0;font-weight: bold;">'+i+'</p></div><div tabindex="0" role="img" aria-label="'+o+" "+l+i+'" id="i" style="width: 70px;cursor: pointer;transition: transform 150ms ease;"> <svg style="filter: drop-shadow(2px 3px 4px #505050);" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 389.9 389.6" preserveAspectRatio="none" xmlns:v="https://vecta.io/nano"><defs><linearGradient id="A" x1="253.85" y1="63.7" x2="253.85" y2="480.49" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4f4f4e"></stop><stop offset=".26" stop-color="#313130"></stop><stop offset=".55" stop-color="#161616"></stop><stop offset=".8" stop-color="#060606"></stop><stop offset="1"></stop></linearGradient><linearGradient id="B" x1="214.9" y1="353.49" x2="286.3" y2="353.49" gradientTransform="matrix(0.16, 0.99, 0.99, -0.16, -138.47, -44.34)" xlink:href="#A"></linearGradient><linearGradient id="C" x1="135.26" y1="296.4" x2="365.84" y2="296.4" xlink:href="#A"></linearGradient></defs><path d="M201.6 443.2h-33.4c-27.7 0-51.9-9.6-71.9-28.4a101.84 101.84 0 0 1-30.6-56.2 107.42 107.42 0 0 1-1.7-19v-52.7l.1-120.5c.1-26.7 9.5-50.3 28.1-70.1a101.58 101.58 0 0 1 55.6-30.7 104 104 0 0 1 20.9-1.9H339c25.9 0 48.8 8.3 68.1 24.6a102 102 0 0 1 34.5 58.2 100.5 100.5 0 0 1 2.1 20.8V340a99.13 99.13 0 0 1-11 46.3c-15.9 30.4-41 49.1-74.7 55.6a95.89 95.89 0 0 1-17.6 1.6h-87.8z" transform="translate(-59.2 -58.6)" fill="url(#A)"></path><path d="M279.9 10c24.4 0 46.2 7.6 64.8 23.4C362 48 372.9 66.6 377.6 88.8a93.42 93.42 0 0 1 2 19.7q0 86.4.1 172.7a94.41 94.41 0 0 1-10.4 44q-22.8 43.65-71.2 53a85.05 85.05 0 0 1-16.7 1.5H109.2c-26.4 0-49.3-9-68.4-27.1-15.5-14.6-25.1-32.5-29.1-53.5a99.85 99.85 0 0 1-1.6-18.1l.1-173.2c.1-25.7 9.2-48 26.7-66.7a96.5 96.5 0 0 1 52.9-29.2 102.64 102.64 0 0 1 20-1.8h96.9l73.2-.1h0m0-10H109.7a114.49 114.49 0 0 0-22 2 106.79 106.79 0 0 0-58.2 32.2C10.1 55 .2 79.7.1 107.7L0 228.2v52.7a109.41 109.41 0 0 0 1.8 20c4.4 23.2 15.1 43 32.1 58.9 20.9 19.7 46.3 29.8 75.3 29.8h172.3a99.15 99.15 0 0 0 18.6-1.6c35.3-6.8 61.6-26.3 78.2-58.2a103.74 103.74 0 0 0 11.6-48.6V108.5a103.33 103.33 0 0 0-2.2-21.8 106.53 106.53 0 0 0-36.2-61C331 8.6 307 0 279.9 0z" fill="#fff"></path><circle cx="250.6" cy="146.4" r="35.7" transform="matrix(.160226 -.98708 .98708 .160226 6.75 311.71)" fill="url(#B)"></circle><path d="M350.6,203.6l-75,6.7c-2.8.2-5.5.4-8.3.4H233.9a76.87,76.87,0,0,1-8.3-.4l-75-6.7a14.24,14.24,0,0,0-2.2,28.4l60.6,5.5a14.25,14.25,0,0,1,13,14.2v16.4a33.8,33.8,0,0,1-2.5,13l-34.5,88a14.3,14.3,0,0,0,26.1,11.7l33-80.1a7,7,0,0,1,13-.1l33,80.1A14.3,14.3,0,1,0,316.2,369l-34.5-87.9a36.61,36.61,0,0,1-2.5-13V251.7a14.18,14.18,0,0,1,13-14.2l60.6-5.5a14.24,14.24,0,0,0-2.2-28.4Z" transform="translate(-59.2 -58.6)" fill="url(#C)"></path><path d="M191.4 130.7c-23.693 0-42.9-19.207-42.9-42.9s19.207-42.9 42.9-42.9 42.9 19.207 42.9 42.9a42.89 42.89 0 0 1-42.9 42.9zm0-71.5c-13.69-.038-25.498 9.605-28.197 23.026a28.68 28.68 0 0 0 17.105 32.135c12.641 5.256 27.234.846 34.848-10.531A28.68 28.68 0 0 0 211.6 67.6a29.06 29.06 0 0 0-20.2-8.4zm52.5 278.6a21.46 21.46 0 0 1-19.5-12.6l-33.1-80.3-32.7 80.1a21.41 21.41 0 0 1-37.1 4.1 21.57 21.57 0 0 1-2.1-21.5l34.4-87.5a26.63 26.63 0 0 0 1.9-10.4v-16.4a7.09 7.09 0 0 0-6.5-7.1l-60.6-5.5c-11.791-.911-20.611-11.209-19.7-23s11.209-20.611 23-19.7l75.1 6.7a97.18 97.18 0 0 0 7.7.3h33.4a99.08 99.08 0 0 0 7.7-.3l75-6.7h.1c11.791-.911 22.089 7.909 23 19.7s-7.909 22.089-19.7 23l-60.5 5.5a7.09 7.09 0 0 0-6.5 7.1v16.4a28.29 28.29 0 0 0 2 10.4l34.5 87.9a21.36 21.36 0 0 1-1.8 20.2 22.06 22.06 0 0 1-18 9.6zm-52.5-107.1a14.11 14.11 0 0 1 13.1 8.8l33 80.1a7.62 7.62 0 0 0 3.9 3.6 7.13 7.13 0 0 0 9-9.6l-34.6-88.3a42.14 42.14 0 0 1-3-15.7v-16.4c-.054-11.101 8.438-20.376 19.5-21.3l60.6-5.5a7 7 0 0 0 4.9-2.4 6.61 6.61 0 0 0 1.7-5.2 7 7 0 0 0-7.6-6.6l-74.9 6.7a88.33 88.33 0 0 1-8.9.4h-33.4a87 87 0 0 1-8.9-.4l-75-6.7a7.12 7.12 0 0 0-1 14.2l60.7 5.5c11.062.924 19.554 10.199 19.5 21.3v16.4a42.14 42.14 0 0 1-3 15.7l-34.5 87.9a7.09 7.09 0 0 0 .3 7.3 7.19 7.19 0 0 0 6.6 3.2 7 7 0 0 0 5.9-4.3l32.9-79.9a14 14 0 0 1 13.2-8.8z" fill="#fff"></path></svg></div></div>';t.insertAdjacentHTML("beforeend",s);let r=t.querySelector("#i"),d=t.querySelector("#t");function a(){eA_open=!0,aEA()}window.innerWidth<700&&(t.style.top="unset",t.style.bottom=eA_bottom,r.style.width="50px",d.style.opacity="0"),e.addEventListener("click",a),e.addEventListener("keyup",function(e){13===event.which&&a()}),t.querySelector("#i").addEventListener("mouseenter",function(){d.style.display="block",r.style.transform="scale(1.1)"}),t.querySelector("#i").addEventListener("mouseleave",function(){d.style.display="none",r.style.transform="none"})}}"complete"===document.readyState?s():window.addEventListener("load",()=>{s()})}</script>
También puedes copiar el código JS del archivo descargado o incluirlo directamente en el encabezado como un archivo JS. Encontrarás más información sobre cómo incluirlo y cómo personalizarlo en este artículo.
3. Alojamiento en un servidor propio
Para tener un control total sobre su integración y evitar todas las conexiones salientes, le recomendamos que integre o aloje el software en su propio servidor. El siguiente artículo le muestra cómo puede hacerlo fácilmente.
También puede utilizar simplemente uno de nuestros plugins para determinados CMS:
Centro de ayuda
Enlaces útiles y respuestas a las preguntas más frecuentes
Un breve resumen de las preguntas que quizá se haya planteado hasta ahora. ¿Es fácil integrar Eye-Able? Por supuesto, estaremos encantados de responder a esta pregunta.
Anexo a la declaración de accesibilidad
Debería incluir el siguiente texto en su declaración de accesibilidad.
¿Cómo se puede integrar Eye-Able directamente en la página?
Puede instalar Eye-Able en solo unos minutos; aquí le explicamos cómo hacerlo.
Por qué Eye-Able no afecta a la velocidad de carga de tu página
Por supuesto, nos preocupa mucho el rendimiento de su página web. Descubra aquí cómo optimizamos nuestro software para mejorar su PageSpeed.
Cómo utilizar la API de Eye-Able
También tienen a su disposición una API para configurar el software libremente según sus necesidades.
Atención al cliente
Nuestro equipo de asistencia estará encantado de ayudarle con cualquier consulta relacionada con la accesibilidad digital.
El blog de Eye-Able
En nuestro blog encontrará mucha información útil sobre nuestros servicios.
