Skip to content
Widget & appearance

Adjust the widget layout and size

Choose a comfortable messenger size and check how it adapts to smaller screens.

CCorthex product guidesUpdated October 15, 20262 min read
Where to find itAppearance → Widget styles → Layout

Before you begin

Select the correct AI agent and open Appearance. Keep the public website available in another tab so you can check the customer experience after saving.

Example workspace · Demo data. 1 — Check layout with realistic content and a small viewport. Select the image to enlarge it.
Messenger layout controls and preview

Example workspace · Demo data. 1 — Check layout with realistic content and a small viewport. Select the image to enlarge it.

Step by step

  1. 1

    Set the layout values

    Use the layout controls for spacing, width/height and message presentation where offered. Start with a preset if several values are inconsistent.

  2. 2

    Test actual content

    Include a long reply, a link and a handoff form. A layout that fits a short greeting may fail on a real conversation.

  3. 3

    Check a narrow viewport

    Open the installed widget on a mobile-sized screen and inspect scrolling, close controls and the message input.

  4. 4

    Save and reload

    Verify the deployed page uses the updated agent and styles rather than an old cached preview.

Good to know

The widget constrains its height to the available viewport. A saved desktop height is not a promise of that exact height on a phone.

Check the result

Save the change and reload a page that loads this agent. Check desktop and mobile, including text contrast and the collapsed launcher.

Questions & troubleshooting

The widget overlaps website controls

Try the opposite launcher side or adjust your site layout. For custom positioning, test the supported embed attributes deliberately.

Was this article helpful?

Rate this guide on this device. Ratings are not sent to Corthex.