Panel Layout and Theme

Outcome

You will pick the right layout and theme for how Lens appears on the page — choosing between a docked side panel and a floating corner panel, picking which side or corner, and matching the theme to the surrounding site.

Prerequisites

• The plugin is connected to TMXIO and the widget is enabled for the right audience — see Enable Widget and Audience.

Layout choices

Lens supports two layout modes. Pick based on how immersive the review surface should feel and how much of the page Lens is allowed to take over.

Docked

Docked mode pins Lens as a full-height panel against the left or right edge of the viewport. The site content shifts (or sits beside it) and reviewers always have the same anchor point for Lens.

Best for structured QA sessions, client review meetings, and any workflow where reviewers spend a continuous block of time inside Lens.

Settings exposed in docked mode:

• Side — Left or Right
• Width — preset widths or a fixed pixel value
• Theme — see below

Floating

Floating mode places Lens in a corner of the viewport as a smaller panel that sits on top of the site. The site content does not shift. The reviewer can move the panel out of the way without closing it.

Best for lighter-weight review, public feedback collection, and any case where Lens should not take over the page.

Settings exposed in floating mode:

• Corner — Top-left, Top-right, Bottom-left, Bottom-right
• Draggable — when enabled, reviewers can drag the panel to a new position during a session
• Theme — see below

Layout options at a glance

Mode	Best for	Notes
Docked (left or right)	Structured QA, client review sessions, immersive feedback	Site content reflows beside the panel. Pick the side opposite the site’s primary navigation.
Floating (corner)	Lightweight review, public feedback collection	Sits on top of the site without reflow. Optionally draggable.
Floating + draggable	Long review sessions where reviewers want to move Lens out of the way	Position resets per session unless TMXIO has been configured to persist it.

Theme choices

The theme controls the panel’s visual style, not the site itself.

• System — Lens follows the visitor’s OS/browser light-or-dark preference. Recommended default.
• Light — Lens stays light regardless of the visitor’s preference. Use on sites with a primarily light brand.
• Dark — Lens stays dark regardless of the visitor’s preference. Use on sites with a primarily dark brand or for after-hours review.

Pick a theme that contrasts with the site

If your site is light, System or Light keeps Lens visually consistent. If your site is dark or a marketing landing page with a dark hero, System still works well because Lens follows the visitor’s OS preference. Pick Light or Dark explicitly only when you need a fixed look regardless of the visitor’s preference.

When to use each mode

Use a docked full-height panel when reviewers need an immersive QA surface and the site is okay with a layout shift.

Use a floating corner panel when Lens should stay lightweight and not intrude on the site’s layout, especially for All visitors audiences.

If reviewers ask to move the panel mid-session, enable Floating + draggable.

What success looks like

• The widget renders in the expected mode (docked or floating) on the expected side or corner.
• The theme matches the site or follows the visitor’s preference, depending on the choice.
• Site content is not visually broken by Lens.

Related

• Enable Widget and Audience
• Troubleshooting — if the panel renders in the wrong position or theme.