Domyślnie oprogramowanie wspomagające Eye-Able® jest zintegrowane ze stroną internetową jako stała ikona w stosunku do rzutni. Ta widoczna pozycja w połączeniu z ikonami o wysokim kontraście okazała się łatwa w użyciu w testach użytkowników, nawet dla użytkowników z poważnymi wadami wzroku. Jednak Eye-Able® może być również bezproblemowo osadzony bezpośrednio na stronie internetowej. Umożliwia to integrację z paskiem nawigacyjnym lub innymi istniejącymi kontenerami.

Dowolny element na stronie może być użyty jako alternatywa dla zwykłej ikony. Funkcje "otwierania i zamykania" zwykłej ikony są powiązane z tym elementem. W tym celu należy utworzyć lub dostosować nowy element docelowy!

Aby utworzyć link, do nowego elementu docelowego należy dodać identyfikator CSS"eyeAble_customToolOpenerID". Gdy tylko element z tym identyfikatorem pojawi się na stronie, zwykłe logo zostanie ukryte, a do tego zdarzenia zostanie dodany odpowiedni EventListener. Pozycja paska narzędzi jest nadal taka sama, jak w przypadku zwykłego logo.

Jeśli osadzonych ma być kilka przycisków otwierania/zamykania, klasa CSS "eyeAble_customToolOpenerClass" może być również użyta. Zachowanie jest identyczne z metodą CSS ID.

Uwaga: Na wszystkich podstronach, na których nie ma takiego elementu z identyfikatorem eyeAble_customToolOpenerID lub klasą klasą eyeAble_customToolOpenerClass nadal będzie wyświetlane zwykłe logo!

Jeśli Eye-Able ma być połączony z elementem na stronie bez ukrywania głównego logo, "eyeAble_customToolOpenerNoHideClass" można użyć klasy CSS.

Możliwe jest również otwarcie paska narzędzi Eye-Able bezpośrednio przez link. Aby to zrobić, wystarczy ustawić "javascript:EyeAbleAPI.toggleToolbar()" jako cel lin ku. 

Upewnij się, że punkt dostępu do Eye-Able jest dostępny za pomocą klawiatury i ma tekst dostępny dla czytników ekranu. Możliwe oznaczenie: "Otwórz oprogramowanie wspomagające widzenie. Dostęp za pomocą klawiatury poprzez ALT + 1".

W celach demonstracyjnych osadzanie to odbywa się na tej stronie z następującym logo: