This guide covers the customer-facing identity shared by the floating widget, inline chat, Elementor widgets, reusable embed profiles and secured external iframe.

Configure the visual system

Open NAI Assistant → Settings → Appearance.

• Default accent color controls visitor bubbles and primary actions.
• Default color scheme selects the customer-facing light or dark presentation.
• Chat bubble icon and Chat header icon can be configured independently.
• Bubble background color controls the closed launcher.
• Chat bubble movement can stay at a fixed position or use automatic collision avoidance (Beta).

Fixed placement is the predictable default. Beta collision avoidance moves the closed launcher vertically when it detects another fixed control; the open chat remains at its configured edge. Test it against cookie consent, accessibility, support, cart and payment launchers.

Use colours that preserve readable contrast in normal, hover, focus, disabled and error states. Test the actual site background rather than relying only on the admin preview.

Configure the greeting preview

The greeting preview is a short message displayed near the closed launcher before the visitor opens chat.

Configure:

• enabled/disabled state;
• display delay in seconds;
• visible duration;
• animation;
• close button;
• click-to-open behaviour;
• frequency.

Start with a calm delay and once-per-session frequency. The preview should offer help, not obscure page content or repeatedly reopen after dismissal.

Configure languages and identity

Open NAI Assistant → Languages & Localization.

The Admin interface settings are per administrator and control only the WordPress workspace language and light/dark/system theme. They do not limit customer languages.

Assistant detects site languages from WordPress, Polylang, WPML and TranslatePress. For each detected language you can set:

• name shown in the chat header;
• first greeting;
• zero-price replacement text.

English, German, Russian, Spanish, French, Estonian and Finnish have bundled administration/widget support in this package. Other detected languages can still be handled by a compatible AI model, while untranslated fixed widget text may fall back to English.

Use the default assistant name only as a fallback. Translate the greeting naturally rather than copying one language across all locales. Verify that policy sources, products and URLs also belong to the active language.

Configure dimensions and side

Open Settings → Embed for global placement and size controls:

• floating width and height;
• inline height;
• launcher size;
• left or right side;
• horizontal and vertical desktop offsets;
• mobile layout.

Avoid dimensions that push the close button, composer or cart controls outside the viewport. On narrow screens, use the safe-area sheet or full-screen mode when a contained panel becomes too cramped.

Prevent duplicate surfaces

The floating widget can coexist with an inline assistant, but two open chat experiences on the same page can confuse visitors and duplicate focus handling. Decide whether a page should use:

• the global floating widget;
• a reusable inline profile;
• a Gutenberg/shortcode/PHP embed;
• one of the Elementor widgets.

Disable the global bubble on templates where a dedicated inline experience is the intended primary control, or ensure the two surfaces have clearly different jobs.

Desktop and mobile QA

Test in a logged-out private session at minimum:

1. 320, 360, 390 and 430 px widths;
2. common tablet width;
3. desktop with browser zoom at 200%;
4. a long greeting and long translated product name;
5. keyboard-only open, message, product action and close;
6. screen-reader labels for launcher, close and composer;
7. scroll lock and page return position;
8. safe-area behaviour on a mobile device;
9. page controls behind and beside the widget;
10. theme light/dark backgrounds.

Confirm that opening the keyboard on mobile does not hide the text field or Send action, and that the visitor can still reach cart/checkout controls.

Troubleshooting

• Old colours or greeting remain: save, clear site/CDN cache and use a fresh session.
• Wrong language appears: verify the active WordPress multilingual plugin state and the front-end language code.
• Launcher overlaps another button: adjust side/offset or test Beta collision avoidance with the exact third-party control.
• Chat is clipped on mobile: reduce contained dimensions or switch the profile to safe-area sheet/full screen.
• Two launchers appear: check the global floating switch, Elementor template and shortcode/block placement.
• Admin language changed but widget did not: admin language and customer chat identity are separate layers.

Verification checklist

• Contrast and keyboard focus are visible.
• Greeting frequency respects dismissal.
• Every published language has the intended name, greeting and zero-price label.
• No duplicate chat surface appears accidentally.
• Mobile composer, close and commerce controls remain reachable.
• Launcher placement does not cover another critical control.