> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.ada.cx/messaging/integration-examples/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.ada.cx/_mcp/server.

# Integration examples

Compare three ways to add messaging to a website or application.
Each example uses the same configuration and a fictional commerce, software, or travel scenario.
Download a starter from any example to use its source code.

## Configure the examples

The examples use simulated replies by default.
Changes to **Sample business** and **Brand accent** update all examples automatically.

If you are an existing customer, enter your AI Agent handle and region under **Already a customer? Try it out!**.
The page checks the settings and switches all examples to your Agent automatically.
The check confirms the Agent's configuration and allowed website origins.
If a check fails, the affected examples use simulated replies and the message says what to fix.
Clear the Agent handle to return to simulated replies.

After the check succeeds, open the widget or custom app with its launcher.
The embedded experience loads automatically.
Use sample data only.
Live actions and handoffs can run.

<progress aria-label="Loading configuration" /> Loading interactive examples…

The interactive examples could not load. Reload this page to try again.

See [Choosing an integration](/messaging/introduction/choosing-an-integration) for the supported approaches.

## Branded widget

Add the default messaging interface beside your website content.
Change the sample brand and accent color above to compare appearances.
This option includes the default app's conversation controls and supported message types.

<progress aria-label="Loading widget example" /> Loading the branded widget…

The widget example could not load. Reload this page to try again.

See [Web SDK getting started](/messaging/web/getting-started) and the [SDK reference](/messaging/web/sdk-api-reference) for configuration details.

## Embedded experience

Use the headless SDK to put a conversation inside your own page.
Select a sample screen.
Select **Ask about this screen** to send its context with the question.
The example keeps the surrounding application visible while the conversation continues.

<progress aria-label="Loading embedded example" /> Loading the embedded experience…

The embedded example could not load. Reload this page to try again.

See the [Web SDK reference](/messaging/web/sdk-api-reference) for headless settings and actions.

## Custom app

Build your own interface inside the messaging frame.
It combines a conversation, account views, and sample tasks in one app.
Ask about an order, workspace setup, or a booking.
Then try the related task tab.

<progress aria-label="Loading custom app example" /> Loading the custom app…

The custom app example could not load. Reload this page to try again.

If **Allowed websites** is empty, the widget and headless examples need no change to the list for live testing.
Only the custom app needs an entry for `https://docs.ada.cx`.
Adding the first entry restricts the widget to the listed sites.
First, add every site that embeds the widget.
Then add `https://docs.ada.cx` under **Channels > Messaging > Allowed websites**.

If the list already has entries, keep your existing entries when you add `https://docs.ada.cx`.
Before you transition to Messaging, use **Channels > Chat**.

If an origin is missing, follow the **Allowed websites** instructions in the error message.
After you correct the settings, select **Check again**.

See [Custom apps](/messaging/custom-apps/overview) for the Bridge contract.

## Next steps

Each starter includes the selected brand and integration, with simulated replies enabled.
Shared preview links also use simulated replies.
Configure live connections from this page.
The example account data and task actions are fictional.
Connect your own services to implement real orders, account updates, or booking changes.

The headless and custom-app starters demonstrate text and selected interactions.
Add the required renderers for other message types, or use the default widget for those flows.