Website personalization plugin

Customize every website your way.

Add a powerful customization and accessibility panel to your website or web application with a single embed code.

Get the Embed Code View Tutorial
LIVE PLUGIN PREVIEW
CustomizeD Access
Dark Background
Text Zoom 120%
High Contrast
Reading Mode Active

Built for more control.

CustomizeD Access gives visitors useful controls without requiring you to redesign your website.

Display Controls

Dark background, contrast, brightness, grayscale and color controls.

Text Tools

Text zoom, spacing, line height, alignment and reading-friendly options.

Reading Tools

Reading mode, focus mode, image controls and highlighted content.

Motion Controls

Pause animations and reduce movement for a calmer experience.

Saved Preferences

Settings are automatically saved in the visitor's browser.

Language Ready

The official plugin page includes real multilingual content.

More than a basic accessibility button.

All these controls are included in the live CustomizeD Access panel.

Dark BackgroundSwitch the website to a dark visual theme.
High ContrastIncrease visual separation between elements.
Text ZoomIncrease or decrease text size.
Text SpacingAdd more space between letters and words.
Line HeightIncrease the distance between lines.
GrayscaleRemove colors from the page.
Invert ColorsInvert the visual colors of the page.
BrightnessReduce or increase page brightness.
Pause AnimationsPause compatible CSS animations.
Reduce MotionMinimize transitions and movement.
Large CursorUse a larger, easier-to-see cursor.
Reading ModeReduce visual distractions while reading.
Focus ModeDim secondary sections of the website.
Hide ImagesTemporarily hide images and videos.
Highlight LinksMake links easier to identify.
Highlight HeadingsVisually emphasize page headings.
Underline LinksAdd visible underlines to all links.
Text AlignmentCenter text for an alternate reading view.

Add it with one embed.

Copy the code and paste it before the closing body tag of your website or web application.

Important: The URL below is an example. Upload the final customized-access.js file to your own hosting and replace the URL.
CustomizeD Access Embed 
<script
  src="https://your-domain.com/customized-access.js"
  data-position="right"
  data-language="auto"
></script>

How to integrate CustomizeD Access.

Follow these steps to add the plugin to an existing website or web application.

1

Copy the embed code

Use the Copy Code button in the Embed section.

2

Open your website file

Open the main HTML file, usually called index.html.

3

Paste the code before the closing body tag

Place the embed near the bottom of the HTML file.

<!-- Your website content --> <script src="https://your-domain.com/customized-access.js"></script> </body>
4

Upload the plugin file

Upload customized-access.js to your hosting and make sure the URL in the embed code matches the file location.

5

Save and publish

Save your changes and publish or redeploy the website.

6

Test the plugin

Open your website. The CustomizeD Access button should appear in the selected corner.

Embed configuration.

Use data attributes to configure the plugin without editing its source code.

data-position

Controls where the floating button appears.

data-position="right"

data-language

Sets the default language or uses automatic detection.

data-language="auto"

data-theme

Sets the initial visual theme of the widget.

data-theme="default"

data-color

Sets a custom primary color.

data-color="#5b5cf0"

Frequently asked questions.

Helpful information about using CustomizeD Access Plugin.

No. The basic display and personalization tools can work entirely in the browser. Preferences can be stored with localStorage.
The widget can be added to most standard HTML websites and web applications. Some complex frameworks, iframes or isolated components may require additional integration.
The built-in multilingual system translates the official CustomizeD Access page using real translated text. Automatic translation of arbitrary websites requires a translation provider or API.
Yes. The planned production embed supports a data-color attribute for setting a custom primary color.

CustomizeD Access

Personalize your experience

Text Zoom
100%
Website Language

This changes the official plugin website language using built-in translations.

`; try{ await navigator.clipboard.writeText(code); const button=document.getElementById("copy-embed"); const old=button.textContent; button.textContent="Copied"; setTimeout(()=>button.textContent=old,1800); }catch(error){ alert("Copy the embed code manually."); } }); /* FAQ */ document.querySelectorAll(".faq-question").forEach(button=>{ button.addEventListener("click",()=>{ const item=button.parentElement; item.classList.toggle("open"); button.querySelector(".faq-symbol").textContent= item.classList.contains("open")?"−":"+"; }); }); /* CUSTOMIZED ACCESS */ const root=document.documentElement; const launcher=document.getElementById("cda-launcher"); const panel=document.getElementById("cda-panel"); const close=document.getElementById("cda-close"); const settings={ dark:false, contrast:false, grayscale:false, invert:false, dim:false, bright:false, spacing:false, lineheight:false, underline:false, center:false, dyslexia:false, reading:false, focus:false, hideimages:false, links:false, headings:false, pause:false, motion:false, cursor:false, zoom:100 }; const classMap={ dark:"cda-dark", contrast:"cda-high-contrast", grayscale:"cda-grayscale", invert:"cda-invert", dim:"cda-dim", bright:"cda-bright", spacing:"cda-spacing", lineheight:"cda-line-height", underline:"cda-underline", center:"cda-center-text", dyslexia:"cda-dyslexia", reading:"cda-reading", focus:"cda-focus", hideimages:"cda-hide-images", links:"cda-highlight-links", headings:"cda-highlight-headings", pause:"cda-pause", motion:"cda-reduce-motion", cursor:"cda-large-cursor" }; function applyAccess(){ Object.entries(classMap).forEach(([key,className])=>{ root.classList.toggle(className,!!settings[key]); }); root.style.fontSize=settings.zoom+"%"; document.getElementById("zoom-value").textContent=settings.zoom+"%"; document.querySelectorAll(".cda-tool").forEach(button=>{ const key=button.dataset.tool; button.classList.toggle("active",!!settings[key]); }); localStorage.setItem("customized-access-settings",JSON.stringify(settings)); } try{ const saved=JSON.parse(localStorage.getItem("customized-access-settings")); if(saved)Object.assign(settings,saved); }catch(error){} applyAccess(); launcher.addEventListener("click",()=>{ panel.classList.toggle("open"); }); close.addEventListener("click",()=>{ panel.classList.remove("open"); }); document.querySelectorAll(".cda-tool").forEach(button=>{ button.addEventListener("click",()=>{ const key=button.dataset.tool; settings[key]=!settings[key]; applyAccess(); }); }); document.getElementById("zoom-in").addEventListener("click",()=>{ settings.zoom=Math.min(160,settings.zoom+10); applyAccess(); }); document.getElementById("zoom-out").addEventListener("click",()=>{ settings.zoom=Math.max(80,settings.zoom-10); applyAccess(); }); document.querySelectorAll(".cda-tab").forEach(tab=>{ tab.addEventListener("click",()=>{ document.querySelectorAll(".cda-tab").forEach(item=>item.classList.remove("active")); document.querySelectorAll(".cda-page").forEach(item=>item.classList.remove("active")); tab.classList.add("active"); document.getElementById("page-"+tab.dataset.page).classList.add("active"); }); }); document.getElementById("scroll-top").addEventListener("click",()=>{ window.scrollTo({top:0,behavior:"smooth"}); }); document.getElementById("cda-reset").addEventListener("click",()=>{ Object.keys(settings).forEach(key=>{ settings[key]=key==="zoom"?100:false; }); Object.values(classMap).forEach(className=>{ root.classList.remove(className); }); root.style.fontSize="100%"; localStorage.removeItem("customized-access-settings"); applyAccess(); }); document.addEventListener("keydown",event=>{ if(event.key==="Escape")panel.classList.remove("open"); });