Widget Pages

The Widget Pages & Layout page allows you to transform your standard chat widget into a full-featured, multi-page application. By enabling a tabbed layout, you can offer your users a dedicated Home landing page, a Messages inbox, and a searchable Help Center all within the widget interface.

Key Features

• Tabbed Layout Toggle: Switch between a simple chat window and a multi-tab application (Home, Messages, Help).
• Header & Greeting: Customize the welcome text, text colors, company logo, and background image for the top banner of the widget.
• Home Tab Builder: Create a rich landing page using a drag-and-drop builder to add interactive content blocks (images, titles, descriptions, and clickable links).
• Help Center Settings: Customize the search input placeholder for your embedded knowledge base.

How to Use

Enabling the Tabbed Layout

To upgrade your widget to a multi-page experience:

1. Locate the Enable Tabbed Layout section at the top of the page.
2. Click the toggle switch to enable it.
3. Once enabled, the settings for the Header, Home Tab, and Help Center will appear.

Customizing the Header & Greeting

This section controls the top banner displayed when users first open the widget.

• Text & Colors: Enter your Greeting Title (e.g., "Hello there.") and Greeting Body. Use the color pickers or enter Hex codes to adjust the text colors to contrast well with your background.
• Images: Click the upload areas to add a Company Logo and a Header Background Image. If you already have an image uploaded, you can hover over it and click Replace to upload a new one, or click Remove in the top right corner of the field.

Building the Home Tab

The Home Tab serves as a customizable landing page where you can highlight events, community links, or important resources.

1. Toggle Home Tab Blocks to turn this feature on.
2. Click Add Content Block to create a new card.
3. Click the down arrow (chevron) on a block to expand its settings.
4. For each block, you can:
   • Upload a Landscape Image.
   • Enter a Card Title and Short Description.
   • Provide a Clickable Link URL so users are redirected when they click the card.
5. Reordering: Click and hold the grip icon (six dots) on the left side of a block to drag and drop it into a new position.
6. Deleting: Click the X (Clear) icon on the right side of a block to remove it.

Customizing the Help Center Tab

Under the Help Center Tab section, you can customize the placeholder text that appears inside the search bar (e.g., "Search for articles...").

Important Notes (or Pro Tips)

• Permissions: Only workspace owners can modify the Widget Pages & Layout settings. If you are logged in as an agent, all toggles, inputs, and upload buttons will be disabled.
• Image Upload Limits: * The Company Logo and Header Background Image must be less than 5MB.
  • The Landscape Images used inside Home Tab content blocks must be less than 2MB.
• Auto-saving: Text areas like the Short Description will automatically resize to fit your content as you type, ensuring you can easily read everything you are inputting.