Varsayılan olarak, Eye-Able® yardım yazılımı bir web sitesine görüntü alanına göre sabit bir simge olarak entegre edilmiştir. Yüksek kontrastlı simgelerle birlikte bu belirgin konumun, ciddi görme bozukluğu olan kullanıcılar için bile kullanıcı testlerinde kullanımının kolay olduğu kanıtlanmıştır. Bununla birlikte, Eye-Able® herhangi bir sorun olmadan doğrudan web sitesine de yerleştirilebilir. Bu, navigasyon çubuğuna veya diğer mevcut kaplara entegrasyonu mümkün kılar.

Sayfadaki herhangi bir öğe normal simgeye alternatif olarak kullanılabilir. Normal simgenin "açma ve kapama" işlevleri bu öğeye bağlanır. Bunun için yeni hedef öğe oluşturulmalı veya özelleştirilmelidir!

Bağlantıyı oluşturmak için yeni hedef öğeye"eyeAble_customToolOpenerID" CSS kimliği eklenmelidir. Bu kimliğe sahip bir öğe sayfada var olur olmaz, normal logo gizlenir ve bu olaya karşılık gelen bir EventListener eklenir. Araç çubuğunun konumu hala normal logo ile olacağı yerdedir.

Birden fazla açma/kapama düğmesi yerleştirilecekse, CSS sınıfı "eyeAble_customToolOpenerClass" da kullanılabilir. Davranış CSS ID yöntemiyleaynıdır .

Not: eyeAble_customToolOpenerID kimliğine sahip böyle bir öğenin bulunmadığı tüm alt sayfalarda veya eyeAble_customToolOpenerClass sınıfı normal logo görüntülenmeye devam edecektir!

Eye-Able ana logoyu gizlemeden sayfadaki bir öğeye bağlanacaksa, "eyeAble_customToolOpenerNoHideClass" CSS sınıfı kullanılabilir.

Eye-Able araç çubuğunu doğrudan bir bağlantı üzerinden açmak da mümkündür. Bunu yapmak için bağlantı hedefi olarak "javascript:EyeAbleAPI.toggleToolbar()" ayarlamanız yeterlidir . 

Eye-Able için erişim noktasına klavye ile ulaşılabildiğinden ve ekran okuyucular için erişilebilir bir metne sahip olduğundan emin olun. Olası etiketleme şöyle olabilir: "Görsel yardım yazılımını açın. ALT + 1 aracılığıyla klavye ile erişilebilir"

Gösterim amacıyla, bu gömme işlemi bu sayfada aşağıdaki logo ile gerçekleştirilmektedir: