{"slug": "customize-amazon-quick-embedded-chat-into-your-application", "title": "Customize Amazon Quick embedded chat into your application", "summary": "Amazon Quick embedded chat now supports customization options that let developers match the chat interface to their application's visual branding and conversational tone, according to an AWS blog post. The post details configuration of frame options, container CSS, and footer branding removal, plus persona and tone settings, using a finance dashboard example. These capabilities aim to make the embedded chat feel like a native part of the application rather than an external tool.", "body_md": "[Artificial Intelligence](/blogs/machine-learning/)\n\n# Customize Amazon Quick embedded chat into your application\n\n[Amazon Quick](/quicksuite/) 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.\n\nIn this post, we walk through the configuration options for customizing Quick embedded chat to deliver a consistent, branded experience within your application.\n\n## Overview\n\nCustomization 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.\n\nThe following example uses a financial analysis assistant embedded in a finance performance dashboard to demonstrate how to configure visual theming and tone customization.\n\n## Configure visual theming\n\nWhen 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.\n\nApply 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.\n\nBecause 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.\n\n### Frame options configuration\n\nThe `frameOptions`\n\nparameter controls how the iframe behaves within your container:\n\n### Container and layout CSS\n\nStyle 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.\n\n### Remove default branding\n\nBy 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:\n\nAfter 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.\n\nThe following table provides a reference for the visual theming options and what each one controls.\n\nOption |\nWhat it controls |\n`className` |\nCSS class on the iframe (border-radius, shadows, z-index) |\n`width` / `height` |\nIframe dimensions (use “100%” for responsive layouts) |\n`withIframePlaceholder` |\nLoading spinner while content loads |\n`footerOptions.showBrandAttribution` |\nShow or hide the “Powered by” text |\n`footerOptions.showUsagePolicy` |\nShow or hide the usage policy link |\n| Container CSS | Panel positioning, borders, shadows, header styling |\n\n## Configure chat persona and tone\n\nIn 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.\n\nWithout 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:\n\n“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.”\n\nThis 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](https://docs.aws.amazon.com/quick/latest/userguide/custom-agents.html), 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).\n\n### SDK content options\n\n### Agent persona instructions (Quick console)\n\nWhen 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:\n\n```\nYou are the AnyCompany Finance Assistant, an AI embedded in AnyCompany's\nFinance Performance Dashboard.\n\n## Your Role\nYou help executive leadership, finance teams, and business leads explore\nfinancial data, understand performance trends, and take action on insights\n--- all without leaving the dashboard.\n\n## Response Style\n- Lead with the direct answer and the key number\n- Provide context and comparison to prior period\n- Cite the source document when referencing qualitative information\n- Use bullet points for multi-part answers\n- Keep responses concise --- executives want the insight, not the explanation\n\n## Boundaries\n- Only discuss AnyCompany financial data and business context\n- Do not speculate about future performance beyond stated targets\n- For questions outside your knowledge, direct users to finance@anycompany.com\n```\n\nWith 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.\n\n“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:\n\nApril: $2.89MMay: $2.95MJune: $3.05M\n\nNorth America led with 15% growth, followed by EMEA at 9%.”\n\nThe following table lists the persona customization options that you can configure while using the SDK.\n\nOption |\nEffect on persona/tone |\n`fixedAgentId` |\nLocks to your custom agent with a specific personality |\n`initialPrompt` |\nSets the conversational opening: proactive or reactive |\n`showInitialPromptMessage: false` |\nThe assistant appears to initiate, creating an “advisor” feel |\n`showAgentKnowledgeBoundary` |\nTransparency about what the assistant knows |\n| Agent persona instructions | Defines tone, vocabulary, response structure, and boundaries |\n\n## Programmatic interaction\n\nBeyond visual theming and persona, the SDK provides the `sendPrompt()`\n\nmethod. 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.\n\nIn the finance dashboard example, quick-action buttons in the chat panel header implement this pattern:\n\n## Conclusion\n\nIn 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()`\n\nmethod bridges your application’s UI with the conversational interface by triggering contextual questions from user interactions like button clicks and chart selections.\n\n## Next steps\n\nTo put these [customizations](https://docs.aws.amazon.com/quick/latest/userguide/brand-customization.html) into practice, start by [embedding the Quick chat into your application](/blogs/business-intelligence/announcing-embedded-chat-in-amazon-quick-suite/). 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.", "url": "https://wpnews.pro/news/customize-amazon-quick-embedded-chat-into-your-application", "canonical_source": "https://aws.amazon.com/blogs/machine-learning/customize-amazon-quick-embedded-chat-into-your-application/", "published_at": "2026-08-18 17:13:13+00:00", "updated_at": "2026-08-18 17:41:34.590723+00:00", "lang": "en", "topics": ["artificial-intelligence", "ai-products", "ai-tools"], "entities": ["Amazon Quick", "AWS"], "alternates": {"html": "https://wpnews.pro/news/customize-amazon-quick-embedded-chat-into-your-application", "markdown": "https://wpnews.pro/news/customize-amazon-quick-embedded-chat-into-your-application.md", "text": "https://wpnews.pro/news/customize-amazon-quick-embedded-chat-into-your-application.txt", "jsonld": "https://wpnews.pro/news/customize-amazon-quick-embedded-chat-into-your-application.jsonld"}}