Customize Amazon Quick embedded chat into your application

Amazon Quick embedded chat provides a conversational AI interface that you can integrate directly into your web application. Your users can ask questions, explore data, and get insights without leaving your application. However, a generic chat interface creates a disjointed experience. The chat interface must look and feel like a natural part of your application, not an external addition. With Quick customization capabilities, you can extend your organization’s visual theming and brand voice to match your application’s look and feel, providing a consistent and branded experience.

In this post, we walk through the configuration options for customizing Quick embedded chat to deliver a consistent, branded experience within your application.

Customization requirements typically fall into two key areas. The first is visual theming to match the company’s brand. Your organization has established brand guidelines, and the embedded chat must reflect these guidelines. The second is tone to match the company’s voice because visual consistency alone isn’t enough. The way the chat communicates must also reflect your organization’s personality.

The following example uses a financial analysis assistant embedded in a finance performance dashboard to demonstrate how to configure visual theming and tone customization.

When you first embed the Quick chat into your application, the chat interface uses its default styling. This creates a visual mismatch. The chat looks like an external tool bolted onto your application rather than a native component. Notice the mismatched color palette, generic branding, and lack of visual integration with the surrounding finance dashboard.

Apply visual theming so the embedded chat feels like a natural part of the finance dashboard. Embedded chat visual theming operates at two levels. The first is container and layout styling, which is the CSS you control around the chat iframe. The second is SDK frame options, which is the configuration passed to the embedding SDK that controls the iframe behavior and branding elements.

Because the chat renders inside an iframe, you can’t style its internal elements directly. Instead, you style the container that wraps the iframe and use SDK options to remove default branding elements that conflict with your design.

Style the container that wraps the chat to match your application’s design system. In our finance dashboard example, the chat appears as a side panel that slides in from the right.

By default, the embedded chat displays an Amazon Quick brand attribution and a usage policy link in the footer. For a brand theme experience where the chat appears as a native part of your application, remove these elements:

After applying the container styling, custom CSS class, and branding removal, the embedded chat now looks like a natural extension of the finance dashboard. The panel uses the same color gradient, the footer is clean, and the overall appearance is consistent with the application’s design system.

The following table provides a reference for the visual theming options and what each one controls.

In addition to visual theming, the chat’s communication style must reflect your organization’s personality. Without persona configuration, the embedded chat responds with generic, broad answers that don’t match your company’s communication style or domain expertise.

Without a custom chat agent, responses lack organizational context. For example, in the finance dashboard, the question “What was our revenue last quarter?” produces a response like the following:

“Revenue is a measure of income generated from business operations. To find your company’s revenue for last quarter, you would typically look at your financial statements or accounting system. Revenue can be broken down by product line, region, or time period.”

“Revenue is a measure of income generated from business operations. To find your company’s revenue for last quarter, you would typically look at your financial statements or accounting system. Revenue can be broken down by product line, region, or time period.”

This response lacks specific context about your organization and uses a tone that doesn’t match how your finance team communicates. With the Quick custom chat agent, you can define a persona that controls the tone, language style, and response behavior. You configure this through SDK content options and agent persona instructions. SDK content options control what UI elements appear and direct users to your custom agent. Agent persona instructions define the personality, response style, and knowledge boundaries (configured in the Quick console when you create the chat agent).

When configuring your custom chat agent in the Amazon Quick console on the Chat Agents page, you define persona instructions that shape how the agent responds. The following example shows a persona instruction block you can use in your agent’s configuration:

With the custom finance agent configured, the same question “What was our revenue last quarter?” now produces a response that matches your organization’s communication style: direct, data-driven, and contextual.

“Q2 2025 revenue was $8.89M, up 12.5% vs Q2 2024 ($7.05M). Growth was driven by consistent month-over-month momentum across all regions: April: $2.89M May: $2.95M June: $3.05M North America led with 15% growth, followed by EMEA at 9%.”

“Q2 2025 revenue was $8.89M, up 12.5% vs Q2 2024 ($7.05M). Growth was driven by consistent month-over-month momentum across all regions:

North America led with 15% growth, followed by EMEA at 9%.”

The following table lists the persona customization options that you can configure while using the SDK.

Beyond visual theming and persona, the SDK provides the sendPrompt() method. With this method, your application can trigger contextual questions from UI interactions. For example, when a user selects a chart metric, the application sends a related question to the assistant. This connects your dashboard visuals with the conversational interface.

In this post, we showed how to customize the Quick embedded chat interface to deliver a consistent, branded experience within your application. By configuring CSS, you align the chat panel visually with your design system so it appears as a native component rather than an external widget. By defining agent persona instructions and SDK prompt options, you can shape the chat’s communication style to match your brand voice. The sendPrompt() method bridges your application’s UI with the conversational interface by triggering contextual questions from user interactions like button clicks and chart selections.

To put these customizations into practice, start by embedding the Quick chat into your application. Apply your brand’s color palette, typography, and layout through container CSS and SDK frame options so the chat feels like a native component. Next, create a custom chat agent in the Quick console with persona instructions that define your domain expertise and communication style.