Skip to main content
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

​
agent-id
string
required
Your MedAssist agent identifier. The only required attribute.
​
auth-token
string
Authentication token sent with the session.
​
title
string
default:"Medi Clinic"
Display title shown in the widget header.
​
icon-url
string
default:"https://cdn.eka.care/bot-icon.svg"
Icon URL for the floating launcher button.
​
base-url
string
default:"https://matrix.eka.care/reloaded"
Base URL for the agent-config and nudge API endpoints.
​
display-mode
"widget" | "full"
default:"widget"
widget shows a floating launcher button; full renders a fullscreen overlay.
​
context
JSON string
A JSON object of key-value context pairs, merged into the session at init. Example: context='{"intent":"book_appointment"}'.
​
theme
JSON string
A JSON theme object. See Theme object for the supported keys.
​
custom-launcher-styles
CSS string
CSS injected into the launcher’s Shadow DOM to reposition or restyle the button. See Custom launcher styling.
​
resize
"true" | "false"
default:"false"
Allow the user to resize the widget once it’s open.
​
redirect-url
string
URL to redirect to when the widget closes. Setting this automatically shows a close button.
​
environment
"production" | "staging" | "development"
default:"production"
Which backend environment the widget talks to. Also affects asset loading.
​
connectivity
"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.
​
primary
string
Primary accent color (hex). Drives buttons, accents, and the user message bubble.
​
backgroundImage
string
Background image URL for the widget interior. Enables a glass-morphism treatment for the header and footer.
​
textColor
"black" | "white"
Text color override.
​
mode
"light" | "dark"
Theme mode. When textColor is unset, it is derived from this (light → black text, dark → white text).
​
headerTinted
boolean
Tint the header with the primary color.
​
titleImg
string
Custom logo/title image URL shown in the header.
​
tagline
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

A floating launcher button in the corner; the chat opens in a panel. This is the default.
<eka-medassist-widget agent-id="YOUR_AGENT_ID" display-mode="widget"></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:
SelectorUse it for
:hostThe launcher wrapper — position, bottom, right, left, top, transform, z-index.
#medassist-open-btnThe 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:
1

EkaMedAssist.init() config (highest priority)

Anything you pass programmatically overrides everything else.
2

Agent config (from the console)

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

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.