Customization & overrides - Eka Developer Platform APIs

Most of the widget’s look and behavior comes from the agent config you set in console.eka.care. When you need to override something per-page, you can do it with HTML attributes on the <eka-medassist-widget> element — or programmatically with EkaMedAssist.init().

HTML attributes

string

required

Your MedAssist agent identifier. The only required attribute.

string

Authentication token sent with the session.

string

default:"Medi Clinic"

Display title shown in the widget header.

string

default:"https://cdn.eka.care/bot-icon.svg"

Icon URL for the floating launcher button.

string

default:"https://matrix.eka.care/reloaded"

Base URL for the agent-config and nudge API endpoints.

"widget" | "full"

default:"widget"

widget shows a floating launcher button; full renders a fullscreen overlay.

JSON string

A JSON object of key-value context pairs, merged into the session at init. Example: context='{"intent":"book_appointment"}'.

JSON string

A JSON theme object. See Theme object for the supported keys.

CSS string

CSS injected into the launcher’s Shadow DOM to reposition or restyle the button. See Custom launcher styling.

"true" | "false"

default:"false"

Allow the user to resize the widget once it’s open.

string

URL to redirect to when the widget closes. Setting this automatically shows a close button.

"production" | "staging" | "development"

default:"production"

Which backend environment the widget talks to. Also affects asset loading.

"sse" | "socket"

default:"socket"

Real-time transport: Server-Sent Events or WebSocket. Usually inherited from agent config.

Theme object

Pass these keys inside the theme attribute (as JSON) or the theme field of init(). Theme values you set here override what the console provides.

string

Primary accent color (hex). Drives buttons, accents, and the user message bubble.

string

Background image URL for the widget interior. Enables a glass-morphism treatment for the header and footer.

"black" | "white"

Text color override.

"light" | "dark"

Theme mode. When textColor is unset, it is derived from this (light → black text, dark → white text).

boolean

Tint the header with the primary color.

string

Custom logo/title image URL shown in the header.

string

Tagline text shown beneath the title.

<eka-medassist-widget
  agent-id="YOUR_AGENT_ID"
  theme='{"primary":"#6B5CE0","mode":"dark","headerTinted":true}'
></eka-medassist-widget>

Display modes

Widget (floating)
Full (fullscreen)

The chat takes over the viewport as a fullscreen overlay — useful for dedicated assistant pages.

<eka-medassist-widget agent-id="YOUR_AGENT_ID" display-mode="full"></eka-medassist-widget>

Custom launcher styling

To reposition or restyle the floating button, pass CSS via custom-launcher-styles (or customLauncherStyles in init()). The CSS is injected into the launcher’s Shadow DOM, so media queries, hover states, and any other CSS all work. Two selectors form a stable contract:

Selector	Use it for
`:host`	The launcher wrapper — `position`, `bottom`, `right`, `left`, `top`, `transform`, `z-index`.
`#medassist-open-btn`	The button itself — `size`, `background`, `box-shadow`, `border-radius`.

<eka-medassist-widget
  agent-id="YOUR_AGENT_ID"
  custom-launcher-styles="
    @media (max-width: 991px) {
      :host {
        right: auto;
        left: 50%;
        bottom: 47px;
        transform: translateX(-50%);
      }
    }
    @media (max-width: 767px) {
      :host { bottom: 34px; }
    }
  "
></eka-medassist-widget>

This only affects the launcher button. The chat panel that opens on click is unaffected.

What comes from the console vs. your code

The widget resolves config from three sources. Higher in this list wins:

EkaMedAssist.init() config (highest priority)

Anything you pass programmatically overrides everything else.

Agent config (from the console)

Fetched from the backend for your agentId. Overrides HTML attributes.

HTML attributes (lowest priority)

Values set directly on the element.

Set in the console (backend): name/title, allowed inputs (text, file, audio, voice), nudge, connectivity, initial_message, the full theme (background, accent, mode, title image, tagline, nudge color), and hide_watermark. Client-only (never from the backend): auth, context (merged with any console context), customLauncherStyles, redirectUrl, and showCloseButton.

Only four attributes are re-read after the widget mounts: icon-url, display-mode, custom-launcher-styles, and redirect-url. Changing any other attribute dynamically has no effect — set them at render time or use init().

Next steps

JavaScript API

Configure all of the above programmatically and hook into the close event.

​HTML attributes

​Theme object

​Display modes

​Custom launcher styling

​What comes from the console vs. your code

​Next steps

JavaScript API

HTML attributes

Theme object

Display modes

Custom launcher styling

What comes from the console vs. your code

Next steps