Come installare Eye-Able in pochi minuti
Il codice per il tuo sito web:
Eye-Able può essere integrato nel vostro sito web in diversi modi:
1. Integrazione tramite il server Eye-Able
Copia il codice riportato di seguito e incollalo alla fine dell'intestazione del tuo sito 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 l'integrazione, assicuratevi di utilizzare sempre l'attributo asincrono "async".
Per ulteriori informazioni e guide sui vari CMS, basta seguire questi link:
2. Integrazione tramite il server Eye-Able con ricaricamento dinamico
Questa integrazione si differenzia dalla variante 1 in quanto i dati vengono caricati dal server Eye-Able solo quando si clicca sull'icona Eye-Able. Ciò riduce il numero di connessioni in uscita, ma richiede l'inserimento di una quantità maggiore di codice nell'intestazione. L'integrazione nel proprio sito web avviene semplicemente inserendo il seguente file nell'intestazione del sito:
<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>
È anche possibile copiare il codice JS dal file scaricato oppure inserirlo direttamente nell'intestazione come file JS. Maggiori informazioni sull'inserimento e su come personalizzarlo sono disponibili in questo articolo.
3. Hosting sul proprio server
Per avere il pieno controllo sulla vostra integrazione ed eliminare tutte le connessioni in uscita, vi consigliamo di integrare o ospitare il software sul vostro server. Il seguente articolo vi mostra come farlo in modo semplice.
Potete anche utilizzare semplicemente uno dei nostri plugin per i CMS selezionati:
Centro assistenza
Link utili e risposte alle domande più frequenti
Una breve panoramica delle domande che potrebbero esservi venute in mente finora. Quanto è semplice l’integrazione di Eye-Able? Saremo naturalmente lieti di rispondere a questa domanda.
Integrazione alla dichiarazione di accessibilità
Si prega di aggiungere il seguente passaggio alla vostra dichiarazione sull'accessibilità.
Come si può integrare Eye-Able direttamente nella pagina?
È possibile installare Eye-Able in pochi minuti: ecco come fare.
Perché Eye-Able non influisce sulla velocità della tua pagina
Naturalmente, la performance del vostro sito web ci sta molto a cuore. Scoprite qui come ottimizziamo il nostro software per il vostro PageSpeed.
Come utilizzare l'API di Eye-Able
È inoltre disponibile un'API che vi permette di configurare il software in base alle vostre esigenze.
Assistenza clienti
Il nostro team di assistenza sarà lieto di aiutarvi per qualsiasi richiesta relativa all'accessibilità digitale.
Il blog di Eye-Able
Sul nostro blog troverete tante informazioni utili sui nostri servizi.
