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, kullanıcı testlerinde ileri derecede görme engelli kullanıcılar için bile 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 kapsayıcılara 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 erişim noktasına klavye ile ulaşılabildiğinden ve ekran okuyucular için erişilebilir metne sahip olduğundan emin olun. Olası bir 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: