إزاي تبدأ

استخدم الـ package manager بتاعك، أو حمّل script واحد من CDN من غير أي build step. الـ CDN tag بيثبّت version محددة مع الـ integrity hash بتاعها.

npm install open-accessibility-widget

نادي init() مرة واحدة، في المتصفح، بعد ما الصفحة تحمّل. هيركّب زرار الفتح على body ويرجّعلك الـ widget. في React و Next.js، اعرض الـ component في الـ root layout بدل كده.

import { init } from "open-accessibility-widget";

// Once, in the browser, after the page loads. Calling it again replaces the widget.
const widget = init();

بتستخدم Vue أو Angular أو Svelte أو Astro أو CMS؟ شوف الـ setup بتاع الـ framework بتاعك

كل الـ options اختيارية. مرّر لون البراند بتاعك، وناحية الشاشة، واللوجو بتاعك، ولغة البداية، وشيل الـ controls اللي مش عايز تقدّمها.

init({
  position: "right",                                   // "left" (default) or "right"
  theme: { primary: "#0f766e", onPrimary: "#ffffff" }, // your brand color
  icon: "/logo.svg",                                   // launcher logo
  language: "ar",                                      // start in Arabic (RTL)
  features: { hideImages: false },                     // remove controls you don't offer
});

كل الـ options موجودة في مرجع الـ API

لو موقعك عنده accessibility statement، حط لينك ليه في الـ footer بتاع اللوحة. بيقبل لينكات http و https واللينكات الـ relative بس.

init({ statementUrl: "/accessibility" });