Integration examples

Use the widget like a product surface.

Script tags, typed helpers, Vue components, centered flows, anchored triggers, presets, and CSS overrides share one runtime contract.

Live constructor

Configure every public surface, then copy the integration.

The constructor renders a real Vue component instance, including the managed trigger and trigger slot. Script output mirrors the same options where the hosted widget.js API supports them.

Identity Library Title Widget id

Copy Placeholder Initial message

Theme

Preset

Position

Launcher

Launcher variant is ignored while a custom trigger replaces the built-in button.

Label

Trigger mode

Accent

Panel size

Width Height

Behavior

Backdrop Close outside Default open Powered by

docs.example.dev

Widget surface

Context7 Widget Docs

Ask integration questions...

theme autotrigger Slot triggeraccent presetsize 440px x 460px

opens 0closes 0questions 0answers 0errors 0

Vue component

<Context7Widget
  library="/desource-labs/context7-widget"
  title="Context7 Widget Docs"
  initial-message="Hello! I'm here to help with **{library}** docs. Ask about setup, props, events, styling, or integration patterns."
  placeholder="Ask integration questions..."
  theme="auto"
  position="anchor"
  preset="glass"
  custom-trigger
  launcher-variant="pill"
  launcher-label="Ask docs"
  panel-width="440px"
  panel-height="460px"
  :backdrop="false"
  :close-on-outside-click="true"
  :default-open="false"
  :show-powered-by="true"
  widget-id="docs-widget"
  @question="trackQuestion"
  @answer-complete="trackAnswer"
>
  <template #trigger="{ label }">
    <span class="docs-trigger-dot" />
    {{ label }}
  </template>
</Context7Widget>

/widget.js

<!-- Managed buttons and slots are Vue-only.
     With widget.js, provide your own trigger id if you want a custom trigger. -->

<script
  src="https://context7.desource-labs.org/widget.js"
  async
  data-backdrop="false"
  data-close-on-outside-click="true"
  data-default-open="false"
  data-initial-message="Hello! I'm here to help with **{library}** docs. Ask about setup, props, events, styling, or integration patterns."
  data-launcher-label="Ask docs"
  data-launcher-variant="pill"
  data-library="/desource-labs/context7-widget"
  data-panel-height="460px"
  data-panel-width="440px"
  data-placeholder="Ask integration questions..."
  data-position="anchor"
  data-preset="glass"
  data-show-powered-by="true"
  data-theme="auto"
  data-title="Context7 Widget Docs"
  data-widget-id="docs-widget"
></script>

Core package

import { mountContext7Widget } from "@desource/context7-widget";

// Core accepts selector-based custom triggers. Vue-only managed triggers stay in the Vue package.

mountContext7Widget({
  library: "/desource-labs/context7-widget",
  title: "Context7 Widget Docs",
  initialMessage: "Hello! I'm here to help with **{library}** docs. Ask about setup, props, events, styling, or integration patterns.",
  placeholder: "Ask integration questions...",
  theme: "auto",
  position: "anchor",
  preset: "glass",
  launcherVariant: "pill",
  launcherLabel: "Ask docs",
  panelWidth: "440px",
  panelHeight: "460px",
  backdrop: false,
  closeOnOutsideClick: true,
  defaultOpen: false,
  showPoweredBy: true,
  widgetId: "docs-widget"
});

Position use cases

Corner, centered, and anchored entry points.

Current Context7 installs are mostly fixed-corner docs widgets because the official script only exposes that shape. This package keeps that path and adds focused centered-dialog and app-shell popover patterns.

Terminal preset

Centered dialog with backdrop and outside-click close.

Centered script

<button id="docs-help">Open centered help</button>

<script
  async
  src="https://context7.desource-labs.org/widget.js"
  data-library="/owner/repo"
  data-custom-trigger="#docs-help"
  data-position="center"
  data-preset="terminal"
  data-backdrop="true"
  data-close-on-outside-click="true"
></script>

Vue anchored trigger

<button id="docs-trigger">Ask docs</button>

<Context7Widget
  library="/owner/repo"
  custom-trigger="docs-trigger"
  position="anchor"
  preset="glass"
  panel-height="420px"
  panel-width="420px"
/>

Fixed corner

Drop-in replacement for Docusaurus, Next layouts, static docs, and existing Context7 script users.

Official-compatible

<script
  async
  src="https://context7.desource-labs.org/widget.js"
  data-library="/owner/repo"
  data-preset="minimal"
  data-position="bottom-right"
  data-placeholder="Ask about the docs..."
></script>

Customization map

Preset first, variables when needed.

minimal

Quiet product UI with low visual noise.

glass

Layered translucent surface for rich demos.

neo

Hard-edged playful docs widget.

terminal

Monospace assistant for dev-tool pages.

brutalist

High-contrast editorial surface.

Preset color fallback

<script
  async
  src="https://context7.desource-labs.org/widget.js"
  data-library="/owner/repo"
  data-preset="neo"
></script>

<!-- data-color is omitted, so neo owns the button color. -->

Managed Vue trigger

<Context7Widget
  library="/owner/repo"
  custom-trigger
  position="anchor"
  preset="glass"
  launcher-label="Ask docs"
/>

Trigger slot

<Context7Widget
  library="/owner/repo"
  custom-trigger
  position="anchor"
  preset="neo"
>
  <template #trigger="{ label, triggerId }">
    <span :data-trigger-id="triggerId" class="my-docs-button__dot" />
    {{ label }}
  </template>
</Context7Widget>

External trigger id

<button id="docs-trigger">Ask docs</button>

<Context7Widget
  library="/owner/repo"
  custom-trigger="docs-trigger"
  position="anchor"
  panel-width="420px"
/>

CSS overrides

context7-widget {
  --c7-accent: #ff6f91;
  --c7-panel-radius: 8px;
  --c7-launcher-radius: 8px;
}

context7-widget::part(send-button) {
  min-width: 5rem;
}

Core helper

import { mountContext7Widget } from "@desource/context7-widget";

mountContext7Widget({
  library: "/owner/repo",
  position: "center",
  preset: "neo",
  backdrop: true,
  closeOnOutsideClick: true,
  launcherVariant: "pill",
  launcherLabel: "Ask docs"
});

Vue composable

const docs = useContext7Widget({
  autoMount: true,
  library: "/owner/repo",
  widgetId: "docs",
  preset: "minimal"
});

await docs.send("Show installation examples");

Typed events

import type {
  Context7WidgetAnswerCompleteEventDetail,
  Context7WidgetQuestionEventDetail
} from "@desource/context7-widget-vue";

function trackQuestion(detail: Context7WidgetQuestionEventDetail) {
  analytics.track("docs_question", { question: detail.question });
}

function trackAnswer(detail: Context7WidgetAnswerCompleteEventDetail) {
  analytics.track("docs_answer", {
    question: detail.question,
    answerLength: detail.answer.length
  });
}

Event instrumentation

Use answers as product signals.

ready

Widget instance is mounted and ready for imperative calls.

open

Panel was opened by launcher, trigger, global API, or send().

Panel closed by close button, Escape, outside click, or API.

question

Question text is available before the network request streams.

first-token

First visible response token arrived; useful for latency metrics.

answer

Every streamed answer update for custom live rendering.

answer-complete

The final assistant message is available for analytics.

tool-call

Documentation search was invoked by the Context7 backend.

tool-result

Context7 backend returned a tool result payload.

error

Transport or configuration failures can be logged.