The default Heedback widget gets the job done — but the App Builder lets you make it yours. Instead of a one-size-fits-all chat bubble, you can design a Home tab that guides visitors to the right resource: start a conversation, browse FAQs, book a meeting, or follow a custom link. All without writing a single line of code.

This guide covers everything from accessing the builder to publishing your customized widget.

Prerequisites

Before using the App Builder, make sure:

You have an active Heedback organization with a Pro plan.
Your account has admin or owner permissions.
The Heedback widget is already installed on your website (see Settings > Widget for the embed snippet).
You have a general idea of what actions you want visitors to take — this helps you choose the right blocks.

Accessing the App Builder

Open your Heedback dashboard and navigate to Widget > App Builder in the left sidebar.
You’ll see a visual editor with your current Home tab layout on the left and a block palette on the right.
The live preview panel on the right updates in real time as you make changes — what you see is exactly what your visitors will get.

The App Builder operates on a block-based system. Each block represents a distinct action or content section that appears on the widget’s Home tab.

Understanding the Available Blocks

Heedback offers several block types, each designed for a specific purpose:

Conversation: The classic “Start a conversation” entry point. Visitors click it to open a new support conversation or continue an existing one. This is the most common block and usually sits at the top.
FAQ / Knowledge Base: Surfaces your most-read help articles directly in the widget. Visitors can search and browse without leaving your site. Requires published knowledge base articles.
Meeting Booking: Lets visitors schedule a call with your team. Connect your calendar provider (Calendly, Cal.com, or a custom URL) and the booking interface appears inline.
Custom Link: A flexible block that links to any URL — your documentation site, a feedback board, a specific landing page, or an external tool. Add a title, description, and icon to make it visually distinct.
Changelog: Displays your latest product updates directly in the widget so users see what’s new without navigating elsewhere.

Each block has its own configuration options. For instance, the FAQ block lets you choose which collections to feature, while the Custom Link block supports an external URL and a custom icon.

Arranging Blocks with Drag and Drop

Building your Home tab layout is straightforward:

Add a block: Click a block type from the palette to add it to your layout.
Reorder: Drag any block up or down to change its position. The order matters — blocks at the top get the most visibility and clicks.
Configure: Click the gear icon on any block to open its settings. Fill in titles, descriptions, and any block-specific options.
Remove: Click the trash icon on a block to remove it from the layout.

A practical arrangement for most SaaS products: Conversation block at the top (for urgent issues), followed by FAQ (for self-service), then Changelog (for awareness), and a Custom Link to your community or documentation at the bottom.

Previewing and Testing

Before publishing, always preview your changes:

The live preview in the App Builder updates automatically as you edit. Check that blocks appear in the right order and that titles read clearly.
Click Preview on site to open a temporary preview on your actual website. This shows the widget exactly as visitors will see it, including your branding, colors, and positioning.
Test each block’s interaction: click the Conversation block to verify it opens the chat, check that FAQ articles load correctly, and confirm custom links navigate to the right URLs.

Testing on both desktop and mobile viewports is worthwhile — the widget adapts to screen size, and your block arrangement should feel natural on smaller screens.

Publishing Your Changes

Once you’re satisfied with the layout:

Click the Save button in the App Builder.
Changes are published immediately to your live widget. There’s no separate deployment step — visitors will see the updated Home tab on their next page load.
You can return to the App Builder at any time to add, remove, or rearrange blocks. Every save overwrites the previous layout.

If you want to revert, there’s no built-in version history, so consider taking a screenshot of your current layout before making significant changes.

Tips and Best Practices

Keep it focused. Three to four blocks is the sweet spot. Too many options create decision paralysis — visitors end up clicking nothing.
Put the highest-value action first. If most visitors need help, lead with Conversation. If most questions are answered in docs, lead with FAQ.
Use descriptive titles. “Get help” is vague. “Chat with our team” or “Browse help articles” tells visitors exactly what to expect.
Revisit quarterly. As your product evolves, so should your widget. New feature launch? Add a Changelog block temporarily. Hiring push? Add a Custom Link to your careers page.
Match your brand. The App Builder respects your widget’s color and branding settings from Settings > Widget. Make sure your block titles and descriptions match your brand voice.

Widget Configuration: Set colors, position, branding, and the embed snippet that loads the widget on your site.
Knowledge Base: Powers the FAQ block. More articles mean a more useful self-service experience inside the widget.
Changelog: The Changelog block pulls from your published entries — keep your changelog active for maximum widget impact.
AI Auto-Reply: When visitors open a conversation from the widget, AI auto-reply can handle initial responses instantly.