> ## Documentation Index > Fetch the complete documentation index at: https://docs.mithunai.com/llms.txt > Use this file to discover all available pages before exploring further. # Website Widget Theming, Customization & Embed Options > Customize the MITHUNAI embeddable chat widget with your brand colors, custom typography, launcher positions, greeting prompts, and React components. The MITHUNAI embeddable website widget supports extensive visual and functional customization through HTML data attributes, CSS custom properties, and JavaScript lifecycle hooks. Organizations can match their exact corporate brand identity—including colors, font families, launcher positioning, and welcome message chips—without forking code or maintaining custom widget builds. ```mermaid theme={"theme":{"light":"github-light","dark":"github-dark"}} flowchart LR HOST["Customer Web Application\n(React / Vue / HTML)"] EMBED["MITHUNAI Script Tag\n(data-key, data-theme, data-position)"] WIDGET["Customized Floating Widget\n(Brand Colors, Typography, Scoped Fencing)"] HOST --> EMBED --> WIDGET ``` *** ## Basic Embed Snippet To embed the assistant on any web page, paste the script tag before the closing `` tag: ```html Standard Embed Snippet theme={"theme":{"light":"github-light","dark":"github-dark"}} ``` *** ## Configuration Attributes | Attribute | Type | Default | Description | | :------------------- | :------------ | :-------------------------- | :--------------------------------------------------------------------------- | | `data-key` | string | **Required** | The public widget deployment key (`arukz_wk_...`). | | `data-position` | string | `bottom-right` | Launcher anchor position: `bottom-right`, `bottom-left`. | | `data-theme` | string | `auto` | Visual appearance mode: `light`, `dark`, or `auto` (follows OS preferences). | | `data-primary-color` | hex string | `#B83E0E` | Main interactive brand accent and button color. | | `data-title` | string | `Documentation Assistant` | Header title displayed at the top of the chat panel. | | `data-greeting` | string | `How can I help you today?` | Initial welcome message shown when the visitor opens the widget. | | `data-prompts` | string (JSON) | `[]` | Quick-start query chips displayed to first-time visitors. | *** ## Example: Advanced Custom Branding & Prompts ```html Customized Widget Embed theme={"theme":{"light":"github-light","dark":"github-dark"}} ``` *** ## Embedding in Modern Frameworks ### Next.js (App Router) In Next.js, load the widget using the `next/script` component inside your root `layout.tsx`: ```tsx Next.js Root Layout Embed (app/layout.tsx) theme={"theme":{"light":"github-light","dark":"github-dark"}} import Script from 'next/script' export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children}