Skip to main content

Meet Theater Mode: A Bigger Chat View Without the Full-Screen Takeover

Updated

Overview

Your Rep AI chat widget now offers a third way to view conversations on desktop, called Theater Mode. Theater Mode opens the chat as a large, centered window that covers most of the screen, while gently dimming the page behind it. It sits between the compact chat box and full screen — giving shoppers more room to read and interact, without completely hiding the page they were browsing.

Think of it the way YouTube's Theater Mode works: bigger and more focused than the small player, but not a full takeover of the screen.

What Theater Mode Does

When a shopper opens the chat in Theater Mode on desktop, they get:

  • A larger, centered chat window that covers most of the browser window, with even margins on all four sides.

  • The page still visible behind the chat, softly dimmed so the focus stays on the conversation.

  • More room for product cards, carousels, and images than the compact chat box.

  • The conversation history side panel, the same one available in full screen.

  • Smooth, animated transitions when moving between views.

It's designed to feel prominent and intentional without forcing shoppers away from the page they came to see.

The Three Chat Views on Desktop

With Theater Mode enabled, desktop shoppers can move through three views:

  1. Chat Box — A compact window in the corner of the page. Lightweight and out of the way.

  2. Theater Mode — A large centered window covering most of the screen, with the page dimmed behind it.

  3. Full Screen — The chat fills the entire browser window, with no margins and no visible page behind it.

When Theater Mode is turned on, expanding the chat steps through these views in order — from Chat Box, to Theater Mode, to Full Screen — and collapsing steps back down the same way.

How Shoppers Move Between Views

  • Expand — From the chat box, the expand control opens Theater Mode. Expanding again goes to full screen.

  • Collapse — From Theater Mode, the minimize control returns the chat to the corner chat box.

  • Click outside — Clicking the dimmed area around the chat closes Theater Mode and returns to the chat box.

  • Press Escape — Pressing the Escape key also returns the chat to the chat box.

In every case, the conversation continues — switching views never loses the shopper's place or their chat.

Turn Theater Mode On or Off

Theater Mode is something you choose to offer. When it's off, your chat behaves exactly as it does today — expanding goes straight from the chat box to full screen.

  1. Go to Settings > Chat Widget in your Rep AI Console.

  2. Find the Theater Mode option.

  3. Turn it on to add Theater Mode as the in-between step, or off to keep the current chat-box-to-full-screen behavior.

  4. Click Save.

When Theater Mode is on, it becomes the first expansion step between the chat box and full screen for your desktop shoppers.

Set Theater Mode as the Default Desktop View

You can also choose how the chat first opens for new desktop visitors. Alongside Chat Box and Full Screen, you can now pick Theater Mode as the default.

  1. Go to Settings > Chat Widget in your Rep AI Console.

  2. Find the Desktop default open mode option.

  3. Choose Theater Mode.

  4. Click Save.

How it works:

  • New visitors see the chat open directly in Theater Mode.

  • Returning visitors keep whatever view they last chose — your default only applies the first time.

  • Shoppers can still collapse to the chat box or expand to full screen at any time.

Control Theater Mode with JavaScript

If you want precise control over when the chat opens in Theater Mode — for example, on a specific page or after a customer action — you can use Rep AI's JavaScript functions on your website.

Open the chat in Theater Mode:

window.rep?.on?.('onceLoad', function() { window.rep.theaterModeEnabled(true); });

Close Theater Mode (return to the chat box):

window.rep.theaterModeEnabled(false);

Toggle Theater Mode on or off:

window.rep.theaterModeToggle();

You can also listen for when shoppers enter or leave Theater Mode, which is useful for syncing with other elements on your page:

  • theaterModeEntered — fires when the chat enters Theater Mode.

  • theaterModeExited — fires when the chat leaves Theater Mode.

Tips:

  • Wait for the widget to load — When calling this on page load, wrap it in the onceLoad event (as shown above) so the widget is ready.

  • Works alongside Console settings — The JavaScript function overrides your Console default and any view the shopper previously chose.

  • Theater Mode to full screen — Calling fullScreenEnabled(true) while the chat is in Theater Mode moves it to full screen.

  • Desktop only — On mobile, the chat already fills the screen, so these functions have no visible effect.

Why This Matters for Your Store

  • A prominent chat without the takeover — Shoppers get a large, focused chat while your page stays visible behind it. This is especially valuable for brands that want the chat to feel integrated, not intrusive.

  • More space for product discovery — Carousels, product cards, and images have more room to shine than in the compact chat box.

  • A natural middle ground — Shoppers who find full screen too aggressive now have an in-between option, which can mean longer, richer conversations.

  • Your choice, your control — You decide whether to offer Theater Mode and whether it's the default first impression.

Good to Know

  • Desktop only — Theater Mode appears on desktop. On mobile, the chat continues to use its full-screen layout, and Theater Mode controls are hidden.

  • Opt-in — Theater Mode is off until you turn it on. Merchants who don't enable it see no change to their chat's behavior.

  • Narrow screens — On smaller desktop or tablet widths, Theater Mode automatically behaves like full screen so the chat never feels cramped.

  • Shopper choice is remembered — If a shopper switches views during their visit, that choice is kept for the rest of their session and takes priority over your default.

  • Everything works the same inside — Conversation history, the side panel, wider message layout, and handoff to a human agent all work in Theater Mode just as they do in full screen.

Troubleshooting

Shoppers don't see Theater Mode when they expand the chat

Check that Theater Mode is turned on in Settings > Chat Widget. When it's off, expanding the chat goes straight to full screen. Theater Mode also appears only on desktop — on narrow screens it falls back to full-screen behavior.

The chat opens full screen instead of Theater Mode for new visitors

Make sure Theater Mode is selected as the Desktop default open mode in Settings > Chat Widget. Also note that returning visitors keep the view they last used, so your default only applies to first-time visitors.

Need More Help?

If you have questions about your chat widget's views or settings, contact our support team or use the Rep AI Helper in your Console for immediate assistance.

Powered by Zendesk