Comment installer Eye-Able en quelques minutes
Votre code pour votre site web :
Eye-Able peut être intégré de différentes manières dans votre site web :
1. intégration via le serveur Eye-Able
Copiez le code suivant et collez-le à la fin de l'en-tête de votre site 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>
Lors de l'intégration, veillez à toujours utiliser l'attribut asynchrone "async".
Pour plus d'informations et d'instructions sur les différents CMS, il suffit de suivre ces liens :
2. intégration via le serveur Eye-Able avec rechargement dynamique
Cette intégration diffère de la variante 1 dans la mesure où les données ne sont chargées depuis le serveur Eye-Able que lorsque l'on clique sur l'icône Eye-Able . Cela réduit le nombre de connexions sortantes, mais nécessite plus de code dans votre en-tête. L'intégration dans votre site web s'effectue simplement en insérant le fichier suivant dans l'en-tête de votre site 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>
Vous pouvez également copier le code JS à partir du fichier téléchargé ou l'intégrer directement dans l'en-tête en tant que fichier JS. Pour en savoir plus sur l'intégration et la manière de l'adapter à vos besoins, voir sous cet article.
3. hébergement sur son propre serveur
Pour un contrôle total de votre intégration et la suppression de toutes les connexions sortantes, nous vous recommandons d'intégrer ou d'héberger le logiciel sur votre propre serveur. L'article suivant vous montre comment réaliser cela facilement.
Vous pouvez aussi simplement utiliser l'un de nos plugins pour certains CMS :
Centre d'aide
Liens utiles et réponses aux questions les plus fréquentes
Voici un bref aperçu des questions que vous pourriez éventuellement vous poser jusqu'à présent. L'intégration de Eye-Able est-elle facile ? Nous répondons bien sûr volontiers à cette question.
Complément à la déclaration d'accessibilité
Vous devriez ajouter le passage suivant à votre déclaration d'accessibilité.
Comment intégrer Eye-Able directement dans la page ?
Vous pouvez installer Eye-Able en quelques minutes seulement - vous apprendrez ici comment.
Pourquoi Eye-Able n'a pas d'impact sur votre vitesse de page
La performance de votre site web nous tient naturellement à cœur. Découvrez ici comment nous optimisons notre logiciel pour votre PageSpeed.
Comment utiliser l'API Eye-Able
Vous disposez également d'une API pour configurer librement le logiciel selon vos souhaits.
Assistance à la clientèle
Notre équipe d'assistance se fera un plaisir de vous aider à résoudre vos problèmes d'accessibilité numérique.
Le blog Eye-Able
Sur notre blog, vous trouverez de nombreuses informations utiles sur nos services.
