ūüéČ Early bird offer: Save only 10% on your assistant software in June with the code "Free10"!

Embed Eye-Able directly into the page

Sharing is desired:

Dieses Bild zeigt einen Schreibtisch mit vielen Bildschirmen in k√ľhler Athmosph√§re.

By default, the Eye-Able¬ģ assistance software is integrated into a website as an icon that is fixed relative to the viewport. This present position in conjunction with high-contrast icons has proven to be easy to use in user tests, even for users with severe visual impairments. However, Eye-Able¬ģ can also be easily embedded directly into the website. This enables integration into the nav bar or other existing containers.

Any element on the page can be used as an alternative to the regular icon. With this element the "open and close" functions of the regular icon are linked. The new target element must be created or adapted yourself!

To create the link, the new target element must be assigned the CSS ID "eyeAble_customToolOpenerID" to be added. As soon as an element with this ID exists on a page, the usual logo is hidden and a corresponding EventListener is added to this event. The toolbar's position is still where it would be with the regular logo.

If multiple open/close switches are to be embedded, the CSS class "eyeAble_customToolOpenerClass" be used. The behavior is identical to that CSS ID method.


Note: On all subpages where there is no such element with the eyeAble_customToolOpenerID ID or eyeAble_customToolOpenerClass class  there, the regular logo will continue to be displayed!

If you want Eye-Able to link to an element on the page without hiding the main logo, the "eyeAble_customToolOpenerNoHideClass‚Äú CSS class to be used.

For demonstration purposes, this embedding is carried out on this page with the following logo:

The Eye-Able logo for downloading and embedding can be found here (or as SVG here):

Eye-Able Logo - Männchen vor schwarzen Hintergrund

Leave a Comment

Your email address will not be published.

interest aroused? We're here to help.

With over 25 functions related to digital accessibility, Eye-Able also helps you to reduce your barriers in the long term. In this way you make your information accessible to everyone and do not exclude any visitors - in short: you open up a new target group without high marketing volumes.

Non-binding consultation on digital accessibility in general

Discussion of possible optimization potentials on your website

Presentation of the assistance software directly on your website

more comments

If it may be something more.

Das Bild zeigt Code in einer Computer-Konsole.

Integration with dynamic reloading

In addition to loading the Eye-Able assets directly from the Eye-Able or local server, there is also the option of downloading the data from Eye-Able by clicking on