> ## Documentation Index
> Fetch the complete documentation index at: https://developer.eka.care/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Add the MedAssist widget to any website with one tag and a script

The fastest way to add MedAssist. Drop a custom element and a script onto any page — no build step, no framework required. The widget appears as a floating button that loads and opens the chat when clicked.

**1. Create your agent**

Sign up at [console.eka.care](https://console.eka.care), create an agent, and customize it — theme, title, initial message, and allowed inputs are all stored with the agent.

> [!NOTE]
>
> New to the console? Follow the [detailed setup guide](https://developer.eka.care/api-sdk/auth/getting-started.md) to create your account and get set up step by step.

**2. Copy your agent ID**

Grab the `agentId` from the agent you just created.

**3. Add the embed snippet**

Paste the custom element where you want it and the script tag just before `</body>`:

```html theme={null}
<eka-medassist-widget agent-id="YOUR_AGENT_ID"></eka-medassist-widget>

<script
  src="https://cdn.jsdelivr.net/npm/@eka-care/medassist-widget-embed@latest/dist/index.js"
  async
></script>
```

**4. Open your page**

A floating launcher button appears. Clicking it lazy-loads the widget assets and opens the chat.

> [!NOTE]
>
> Only **`agent-id`** is required. Everything else — theme, title, initial message — comes from the agent config you set in the console, so you usually don't need any other attributes.

## Full page example

```html theme={null}
<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <h1>Welcome</h1>

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

    <script
      src="https://cdn.jsdelivr.net/npm/@eka-care/medassist-widget-embed@latest/dist/index.js"
      async
    ></script>
  </body>
</html>
```

## Install from npm

If you bundle your own assets, install the package instead of using the CDN:

```bash theme={null}
npm install @eka-care/medassist-widget-embed
```

## Use it in a framework

The custom element works anywhere HTML does. Inject the loader script and render the tag:

```jsx React theme={null}
import { useEffect } from "react";

function App() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src =
      "https://cdn.jsdelivr.net/npm/@eka-care/medassist-widget-embed@latest/dist/index.js";
    script.async = true;
    document.body.appendChild(script);
  }, []);

  return <eka-medassist-widget agent-id="YOUR_AGENT_ID" />;
}
```

```vue Vue theme={null}
<template>
  <eka-medassist-widget :agent-id="agentId" />
</template>

<script>
export default {
  data: () => ({ agentId: "YOUR_AGENT_ID" }),
  mounted() {
    const script = document.createElement("script");
    script.src =
      "https://cdn.jsdelivr.net/npm/@eka-care/medassist-widget-embed@latest/dist/index.js";
    script.async = true;
    document.body.appendChild(script);
  },
};
</script>
```

> [!TIP]
>
> Already in a React app and want the chat rendered inline rather than as a Web Component? Use the [React SDK](https://developer.eka.care/docs/agents/synapse/react/installation.md) instead.

## How it works

**1. Register**

The script registers the `<eka-medassist-widget>` custom element.

**2. Launcher**

The element renders a floating button (or a full view if `display-mode="full"`).

**3. Lazy load**

On first open, the widget's JS and CSS are fetched — keeping your initial page light.

**4. Isolation**

The widget runs inside a Shadow DOM, so its styles never clash with your site.

## Next steps

> **[Customization & overrides](https://developer.eka.care/docs/agents/synapse/embed/customization.md)**
>
> Every attribute you can set — theme, display mode, launcher styling, and more.

> **[JavaScript API](https://developer.eka.care/docs/agents/synapse/embed/javascript-api.md)**
>
> Configure the widget programmatically with `EkaMedAssist.init()`.

## Troubleshooting

> **Widget not appearing**
>
> Confirm `agent-id` is set, check the Network tab to verify the loader script loaded, and look in the console for errors.

> **Assets return 404**
>
> If you self-host assets via `data-widget-assets`, ensure `medassist-widget.js` and `medassist-widget.css` are served at that path — or omit it to use the default CDN.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.