Website Widget Theming, Customization & Embed Options

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.

Basic Embed Snippet

To embed the assistant on any web page, paste the script tag before the closing </body> tag:

Standard Embed Snippet

<script
  src="https://app.mithunai.com/widget/arukz-widget.js"
  data-key="arukz_wk_live_a982fe31"
  data-position="bottom-right"
  data-theme="auto"
  async
></script>

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

Customized Widget Embed

<script
  src="https://app.mithunai.com/widget/arukz-widget.js"
  data-key="arukz_wk_live_a982fe31"
  data-position="bottom-right"
  data-theme="light"
  data-primary-color="#B83E0E"
  data-title="Acme Developer Support"
  data-greeting="Hi! Ask me anything about our APIs, webhooks, or SDKs."
  data-prompts='["How do I generate an API key?", "Where do I find webhook logs?", "How do rate limits work?"]'
  async
></script>

Embedding in Modern Frameworks

Next.js (App Router)

In Next.js, load the widget using the next/script component inside your root layout.tsx:

Next.js Root Layout Embed (app/layout.tsx)

import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://app.mithunai.com/widget/arukz-widget.js"
          data-key="arukz_wk_live_a982fe31"
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}

React Component Wrapper

React Declarative Component

import { useEffect } from 'react'

export function MithunAIWidget({ deploymentKey }: { deploymentKey: string }) {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://app.mithunai.com/widget/arukz-widget.js'
    script.setAttribute('data-key', deploymentKey)
    script.async = true
    document.body.appendChild(script)

    return () => {
      document.body.removeChild(script)
    }
  }, [deploymentKey])

  return null
}

Programmatic JavaScript API

Control the widget programmatically using the global window.MithunAI interface:

JavaScript Lifecycle Controls

// Open the chat window programmatically from a custom "Help" button
window.MithunAI.open()

// Close the chat window
window.MithunAI.close()

// Pre-fill and submit a question directly
window.MithunAI.ask('How do I update billing details?')

Get started

Knowledge

Assistants & Agents

Channels & Integration

Architecture & Solutions

Administration

Trust and support

Website Widget Theming, Customization & Embed Options

Basic Embed Snippet

Configuration Attributes

Example: Advanced Custom Branding & Prompts

Embedding in Modern Frameworks

Next.js (App Router)

React Component Wrapper

Programmatic JavaScript API

​Basic Embed Snippet

​Configuration Attributes

​Example: Advanced Custom Branding & Prompts

​Embedding in Modern Frameworks

​Next.js (App Router)

​React Component Wrapper

​Programmatic JavaScript API

Basic Embed Snippet

Configuration Attributes

Example: Advanced Custom Branding & Prompts

Embedding in Modern Frameworks

Next.js (App Router)

React Component Wrapper

Programmatic JavaScript API