Contents
Accessibility and performance - Plugixa Chat
This page describes two things the widget is built around: it can be used by everyone, and it costs a page as little as possible.
Accessibility
Keyboard
The launcher is a real button and the list of channels is a menu.
| Where | Key | What it does |
|---|---|---|
| On the launcher | Enter or Space | Opens the list and moves to the first channel |
| On the launcher | Down arrow | Opens the list and moves to the first channel |
| On the launcher | Up arrow | Opens the list and moves to the last channel |
| In the list | Down arrow, Up arrow | Moves to the next or previous channel, wrapping round |
| In the list | Home, End | Moves to the first or last channel |
| In the list | Enter | Opens the channel |
| In the list | Escape | Closes the list and returns to the launcher |
| In the list | Tab | Closes the list and moves on through the page |
| In a panel, such as the contact form | Tab, Shift+Tab | Moves between the panel’s controls and stays inside the panel |
| In a panel | Escape | Goes back to the list of channels |
Channels hidden on the current device are skipped.
Screen readers
- The launcher announces what it does. The default name is “Open chat options”; change it with Button label for screen readers on the Design step.
- The launcher tells assistive technology whether the list is open.
- Each channel is announced by its label, followed by its hover text when it has one.
- Icons and the unread badge are hidden from screen readers, so they are not read out as noise.
- A panel is announced as a dialog with its title, and has Back and close buttons with names.
- In the contact form every field has a label, required fields are marked as required, and an error is tied to its field and announced. After a failed send the cursor moves to the first field with a problem. After a successful one, the thank-you message is announced.
Size and contrast
- The launcher is never smaller than 44 pixels, and each channel row is at least 44 pixels tall, so they are easy to tap.
- The Design step shows the contrast ratio between the button colour and the icon colour, and warns below 4.5:1.
- Chat buttons in your content choose their own text colour, light or dark, for the best contrast with the channel’s colour.
Motion
Every attention effect, and every transition in the widget, is switched off for a visitor whose device asks for reduced motion. This cannot be turned off.
What a page loads
| Page | What the plugin adds |
|---|---|
| No widget targets it and it has no chat button | Nothing: no script, no stylesheet, no data |
| A widget targets it | One small stylesheet, one script module, and the widgets’ settings as a block of data in the page |
| It has only a chat button or the product button | The button’s stylesheet, and the same script, stylesheet and data block without any widget in it, so presses can be counted |
About the script:
- It is a single file with no dependencies. It does not use jQuery.
- It is under 14 KB when compressed.
- It loads as a module, which does not block the page from drawing.
- Its file name changes only when its content changes, so browsers can cache it for a long time. Changing a widget does not change the script’s address.
Everything is served from your own site. The plugin loads nothing from a CDN and no web fonts. The one exception is Cloudflare Turnstile, when you have switched it on, and then only once a visitor opens a contact form.
No layout shift
With Draw the button before scripts load on, which is the default, the launcher is part of the page’s HTML and appears with the rest of the page. When the script takes over, the launcher is the same size in the same place.
A widget that is waiting for a trigger, or for a visitor rule to be checked, keeps its place without being drawn, so nothing moves when it appears.
No request per click
Opening the widget and pressing a channel make no request to your server. Events are noted in the browser and sent together when the visitor leaves the page. See Analytics.
A request is made only when it is needed:
| Request | When |
|---|---|
| The visitor check | Once per page view, and only when a widget on the page has a rule about the visitor: Signed in, Came from, or the Pro rules Business hours, Country and Language |
| The events | When the page is left, if anything happened |
| A contact form message | When a visitor sends one |
Page caches
The widget is designed to be correct on a page served from a full-page cache, such as WP Rocket, LiteSpeed Cache or Cloudflare.
| Decided | Where | Why it is safe to cache |
|---|---|---|
| Rules about the page | On the server, when the page is built | A cache stores a page per address, and these rules depend only on the address |
| Rules about the visitor | In the visitor’s browser | The cached page carries the question, not the answer |
| Device | By CSS, from the window’s width | Nothing to decide on the server |
The plugin never looks at the browser’s user agent to guess a device.
After you change something
The plugin does not purge page caches itself. After changing a widget or a setting that affects the front of the site, clear your page cache so cached pages are rebuilt with the change.
Developers can purge automatically by listening for the
plugixa_chat_config_invalidated action. See
Hooks reference.
How long a page can stay cached
A page carries a short-lived token that the contact form and the analytics use. It is valid for between 12 and 24 hours.
| Feature | On a page cached longer than that |
|---|---|
| The widget and its links | Work as usual |
| The contact form | Works. It fetches a fresh token and tries again by itself |
| Analytics | Events from that copy are not counted |
If your cache keeps pages for more than a day, set it to refresh them at least daily.
What should not be cached
The address /wp-json/plugixa-chat/v1/context answers for one visitor. It
is sent with headers that tell browsers and proxies to keep it private.
If your CDN caches REST API responses regardless of those headers, exclude
that address.
Page builders
The widget is not drawn inside the editing screens of Elementor, Divi, Oxygen, Beaver Builder, Brizy, WPBakery or Bricks, or in the Customizer’s preview, so it never sits on top of the canvas you are working on. It appears as normal when the page is viewed.
Theme isolation
The widget is drawn inside a shadow root. Your theme’s styles cannot change it, and its styles cannot change your theme. Chat buttons in your content are the opposite: they are ordinary links in the page, which your theme’s CSS can restyle. See Shortcodes.
What to do next
- Review the delivery switches in Settings.
- If the widget is missing on a cached page, see Troubleshooting.