[GH-ISSUE #19876] feat: Support "Embeddable Chat JS Widget for Custom-Models" for individual websites #34553

New Issue

GiteaMirror · 2026-04-25T08:35:41-05:00

GiteaMirror commented

2026-04-25 08:35:41 -05:00

Originally created by @alperreha on GitHub (Dec 11, 2025).
Original GitHub issue: https://github.com/open-webui/open-webui/issues/19876

Problem Description

Today, many websites are building their own AI chatbot widgets from scratch:

Each project is re-implementing RAG (file upload + context building) logic.
Each project is reinventing thinking/step-by-step reasoning, citations, and debug tooling.
Each project is wiring MCP tools, file uploads, speech-to-text, text-to-image, and guardrails in custom Python code.
Each project is building its own authentication and user handling.

Open WebUI already provides most of these pieces built-in:

Custom models with RAG context (e.g. uploading a domain-specific .txt/PDF file).
Per-model chat panels.
MCP tool integration.
File upload, STT, TTI, guardrails, etc.
JWT-based auth hooks and chat panel pre-checks.

The missing piece is:
There is no official, first-class way to expose a single custom model / chat panel as a minimal embeddable widget on an external website (e.g. a company docs site, product page, or SaaS dashboard).

Right now, I can create a model like my-solidjs-model with a RAG context (solidjs-full-llms.txt) and use it inside Open WebUI, but I cannot easily embed that exact “Custom-Model Chat” as a floating HTML/JS widget on arbitrary external websites.

Desired Solution you'd like

I’d like Open WebUI to support an “Embeddable Chat Panel” mode for custom models / chat panels, so that a website can do something like:

<body>
  <div id="chatbot-widget"></div>

  <script type="module">
    import { mount } from "https://<cdn>/assets/open-webui-chat-widget/@0.0.1/openwebui-embed-manager.js";

    mount(
      // DOM selector where the widget should attach
      "#chatbot-widget",

      // chat panel / custom model identifier
      "cw-panel-123456",

      // optional JWT with user info: { sub, user: { id, name, avatar } }
      "eyJh..."
    );
  </script>
</body>

High-level idea:

On /workspace/models/edit?id=my-solidjs-model (or equivalent UI), add an “Embeddable widget” option for a custom model / chat panel.
When enabled, Open WebUI:
- Exposes built-in manager a small JS bundle (e.g. openwebui-embed-manager.js) that:
  - Renders a floating/chat-style widget on the host page.
  - Connects to the selected chat panel / model.
  - Optionally uses a passed-in JWT to identify the user (for auth, history, guardrails, etc.).
- Provides a copy-paste embed snippet (like above) for website owners.

Widget UX & technical requirements (proposal):

Uses Shadow DOM to isolate styles and avoid conflicts with the host website.
Uses a simple card layout with:
- card-header: widget title, logo, optional links (e.g. “Docs”, “Help”).
- card-content: chat messages, thinking traces, citations.
- card-footer: input area, send button, optional extra controls.
Uses Tailwind-compatible structure internally, but does not leak classes or variables into the host page.
Includes an optional built-in feedback form whose events can be surfaced to a creator dashboard or webhook (e.g. to log “this answer was helpful / not helpful”, bug reports, etc.).
Respects existing Open WebUI capabilities:
- Uses the selected custom model (e.g. my-solidjs-model) and its RAG context.
- Supports tools, uploads, STT/TTI, citations, and guardrails the same way as in the main UI.
- Uses JWT for auth, where the token includes { sub, user: { id, name, avatar } } so the embed can still be personalized and secure.

In short:
Take the existing “Custom-Model Chat Panel” experience and make it available as a pluggable, floating widget that any website can embed with a small <script> snippet.

Alternatives Considered

Building a custom backend + UI per site
I could re-implement a smaller version of Open WebUI using its APIs (or other LLM backends). This means:
- Rebuilding RAG ingestion and retrieval.
- Rebuilding tools integration.
- Rebuilding auth and JWT handling.
- Rebuilding guardrails.
  This defeats the purpose of having Open WebUI as a central, powerful control plane.
iFrame-based embedding
It is technically possible to embed a full Open WebUI page inside an <iframe>, but:
- UX is not ideal (full app UI vs minimal widget).
- Harder to style, position as a floating bubble, and integrate with the host site’s look-and-feel.
- Passing per-user JWT and mapping to specific chat panels is more awkward.
Third-party chatbot widget providers
There are many hosted chatbot widget solutions, but:
- They don’t integrate with Open WebUI’s models, tools, or RAG setups.
- They can’t reuse my locally hosted Ollama models (e.g. qwen3:4b-thinking).
- They don’t share Open WebUI’s debug and tracing experience.

The most natural and powerful solution is for Open WebUI itself to expose embeddable chat widgets tied directly to its own custom models and chat panels.

Additional Context

Example use case:

I run Open WebUI with a local Ollama model qwen3:4b-thinking.
I create a custom model my-solidjs-model at /workspace/models/edit?id=my-solidjs-model.
I upload solidjs-full-llms.txt (or PDFs / docs) as RAG context so this model becomes a Solid.js expert.
I use it inside Open WebUI as a dedicated chat panel, which already works great.
Now I want to embed this exact experience on:
- My personal blog,
- My SaaS dashboard,
- Or my documentation site.

For that, I’d like:

A toggle on the model/edit page: “Enable as embeddable widget”.

A generated snippet like:

<div id="chatbot-widget"></div>
<script type="module">
  import { mount } from "https://<openwebui-host>/embed/open-webui-chatbot.js";
  mount("#chatbot-widget", "cw-panel-123456", "eyJh...");
</script>

Internally, Open WebUI would:
- Render a floating chat UI using Shadow DOM.
- Apply Tailwind-based styling for the widget (card header/content/footer).
- Allow me to configure:
  - Widget name
  - Widget logo
  - Helpful links (docs, support, etc.)
- Provide a small feedback form whose submissions are visible in a creator/admin view.

Proposed implementation checklist (as a starting point):

Add “Embeddable Option” checkbox inside /workspace/models/edit?id=<model-id>.
Provide Tailwind-based card layout for header/content/footer within the widget.
Add Shadow DOM / shadow-CSS support for the widget UI to avoid CSS conflicts.
Allow configuring widget name, logo, and external links for the header.
Add a built-in feedback form that hooks into a creator/admin dashboard or webhook.

Originally created by @alperreha on GitHub (Dec 11, 2025). Original GitHub issue: https://github.com/open-webui/open-webui/issues/19876 ### Problem Description Today, many websites are building their own AI chatbot widgets from scratch: * Each project is re-implementing RAG (file upload + context building) logic. * Each project is reinventing thinking/step-by-step reasoning, citations, and debug tooling. * Each project is wiring MCP tools, file uploads, speech-to-text, text-to-image, and guardrails in custom Python code. * Each project is building its own authentication and user handling. Open WebUI already provides most of these pieces **built-in**: * Custom models with RAG context (e.g. uploading a domain-specific `.txt`/PDF file). * Per-model chat panels. * MCP tool integration. * File upload, STT, TTI, guardrails, etc. * JWT-based auth hooks and chat panel pre-checks. The missing piece is: There is no **official, first-class way** to expose a *single custom model / chat panel* as a **minimal embeddable widget** on an external website (e.g. a company docs site, product page, or SaaS dashboard). Right now, I can create a model like `my-solidjs-model` with a RAG context (`solidjs-full-llms.txt`) and use it inside Open WebUI, but I cannot easily embed that exact “Custom-Model Chat” as a floating HTML/JS widget on arbitrary external websites. ### Desired Solution you'd like I’d like Open WebUI to support an **“Embeddable Chat Panel”** mode for custom models / chat panels, so that a website can do something like: ```html <body> <div id="chatbot-widget"></div> <script type="module"> import { mount } from "https://<cdn>/assets/open-webui-chat-widget/@0.0.1/openwebui-embed-manager.js"; mount( // DOM selector where the widget should attach "#chatbot-widget", // chat panel / custom model identifier "cw-panel-123456", // optional JWT with user info: { sub, user: { id, name, avatar } } "eyJh..." ); </script> </body> ``` <img width="466" height="530" alt="Image" src="https://github.com/user-attachments/assets/9cc48685-0595-42d5-b957-d6d327c510d3" /> High-level idea: * On `/workspace/models/edit?id=my-solidjs-model` (or equivalent UI), add an **“Embeddable widget”** option for a custom model / chat panel. * When enabled, Open WebUI: * Exposes built-in manager a small JS bundle (e.g. `openwebui-embed-manager.js`) that: * Renders a floating/chat-style widget on the host page. * Connects to the selected chat panel / model. * Optionally uses a passed-in JWT to identify the user (for auth, history, guardrails, etc.). * Provides a copy-paste embed snippet (like above) for website owners. Widget UX & technical requirements (proposal): * Uses **Shadow DOM** to isolate styles and avoid conflicts with the host website. * Uses a simple card layout with: * `card-header`: widget title, logo, optional links (e.g. “Docs”, “Help”). * `card-content`: chat messages, thinking traces, citations. * `card-footer`: input area, send button, optional extra controls. * Uses Tailwind-compatible structure internally, but does **not** leak classes or variables into the host page. * Includes an optional **built-in feedback form** whose events can be surfaced to a creator dashboard or webhook (e.g. to log “this answer was helpful / not helpful”, bug reports, etc.). * Respects existing Open WebUI capabilities: * Uses the selected custom model (e.g. `my-solidjs-model`) and its RAG context. * Supports tools, uploads, STT/TTI, citations, and guardrails the same way as in the main UI. * Uses JWT for auth, where the token includes `{ sub, user: { id, name, avatar } }` so the embed can still be personalized and secure. In short: **Take the existing “Custom-Model Chat Panel” experience and make it available as a pluggable, floating widget that any website can embed with a small `<script>` snippet.** ### Alternatives Considered * **Building a custom backend + UI per site** I could re-implement a smaller version of Open WebUI using its APIs (or other LLM backends). This means: * Rebuilding RAG ingestion and retrieval. * Rebuilding tools integration. * Rebuilding auth and JWT handling. * Rebuilding guardrails. This defeats the purpose of having Open WebUI as a central, powerful control plane. * **iFrame-based embedding** It is technically possible to embed a full Open WebUI page inside an `<iframe>`, but: * UX is not ideal (full app UI vs minimal widget). * Harder to style, position as a floating bubble, and integrate with the host site’s look-and-feel. * Passing per-user JWT and mapping to specific chat panels is more awkward. * **Third-party chatbot widget providers** There are many hosted chatbot widget solutions, but: * They don’t integrate with Open WebUI’s models, tools, or RAG setups. * They can’t reuse my locally hosted Ollama models (e.g. `qwen3:4b-thinking`). * They don’t share Open WebUI’s debug and tracing experience. The most natural and powerful solution is for Open WebUI itself to expose embeddable chat widgets tied directly to its own custom models and chat panels. ### Additional Context Example use case: 1. I run Open WebUI with a local Ollama model `qwen3:4b-thinking`. 2. I create a custom model `my-solidjs-model` at `/workspace/models/edit?id=my-solidjs-model`. 3. I upload `solidjs-full-llms.txt` (or PDFs / docs) as RAG context so this model becomes a **Solid.js expert**. 4. I use it inside Open WebUI as a dedicated chat panel, which already works great. 5. Now I want to embed this exact experience on: * My personal blog, * My SaaS dashboard, * Or my documentation site. For that, I’d like: * A toggle on the model/edit page: **“Enable as embeddable widget”**. * A generated snippet like: ```html <div id="chatbot-widget"></div> <script type="module"> import { mount } from "https://<openwebui-host>/embed/open-webui-chatbot.js"; mount("#chatbot-widget", "cw-panel-123456", "eyJh..."); </script> ``` * Internally, Open WebUI would: * Render a floating chat UI using Shadow DOM. * Apply Tailwind-based styling for the widget (card header/content/footer). * Allow me to configure: * Widget name * Widget logo * Helpful links (docs, support, etc.) * Provide a small feedback form whose submissions are visible in a creator/admin view. Proposed implementation checklist (as a starting point): * [ ] Add **“Embeddable Option”** checkbox inside `/workspace/models/edit?id=<model-id>`. * [ ] Provide Tailwind-based card layout for `header/content/footer` within the widget. * [ ] Add Shadow DOM / shadow-CSS support for the widget UI to avoid CSS conflicts. * [ ] Allow configuring widget name, logo, and external links for the header. * [ ] Add a built-in feedback form that hooks into a creator/admin dashboard or webhook.

GiteaMirror closed this issue

2026-04-25 08:35:41 -05:00

GiteaMirror commented

2026-04-25 08:35:42 -05:00

@owui-terminator[bot] commented on GitHub (Dec 11, 2025):

🔍 Similar Issues Found

I found some existing issues that might be related to this one. Please check if any of these are duplicates or contain helpful solutions:

#14431 feat: Comfy UI Improvements to support Keywords, which opens the door for Audio and Video Generation.
by digitalassassins • May 28, 2025
#16936 feat: Embed browser-use/web-ui for immersive browser-based agent interaction in Open WebUI
by Varun-SV • Aug 26, 2025

💡 Tips:

If this is a duplicate, please consider closing this issue and adding any additional details to the existing one
If you found a solution in any of these issues, please share it here to help others

This comment was generated automatically by a bot. Please react with a 👍 if this comment was helpful, or a 👎 if it was not.

@owui-terminator[bot] commented on GitHub (Dec 11, 2025): 🔍 **Similar Issues Found** I found some existing issues that might be related to this one. Please check if any of these are duplicates or contain helpful solutions: 1. [#14431](https://github.com/open-webui/open-webui/issues/14431) **feat: Comfy UI Improvements to support Keywords, which opens the door for Audio and Video Generation.** *by digitalassassins • May 28, 2025* 2. [#16936](https://github.com/open-webui/open-webui/issues/16936) **feat: Embed browser-use/web-ui for immersive browser-based agent interaction in Open WebUI** *by Varun-SV • Aug 26, 2025* --- 💡 **Tips:** - If this is a duplicate, please consider closing this issue and adding any additional details to the existing one - If you found a solution in any of these issues, please share it here to help others *This comment was generated automatically by a bot.* Please react with a 👍 if this comment was helpful, or a 👎 if it was not.

GiteaMirror commented

2026-04-25 08:35:43 -05:00

@Classic298 commented on GitHub (Dec 11, 2025):

cool

@Classic298 commented on GitHub (Dec 11, 2025): cool

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/open-webui#34553