Examples

Try the widget before you install it.

Find the look and placement that belong on your site. Preview your choices, try the chat, and copy the code for your framework or script tag.

Build your widget See positions

Widget builder

See it on the page before it goes on yours.

This is a working widget. Adjust its text, style, placement, and behavior in the live preview. When it feels right, choose your integration below and copy the code.

Before connecting your library, enable its widget in Context7's Admin → Chat settings and allow your site's domain. Setup instructions.

Identity

Library Title Widget ID

Chat text

Placeholder Initial message

Theme

Preset

Accent

Panel size

Width Height

Position

Launcher

Available with the built-in trigger.

Label

Trigger mode

Behavior

Backdrop Close outside Default open

Live preview · glass · anchorOpen in new tab

<script setup>
import { Context7Widget } from '@desource/context7-widget-vue';
import '@desource/context7-widget-vue/styles.css';
</script>

<template>
  <Context7Widget
    library="/desource-labs/context7-widget"
    title="Context7 Widget Docs"
    initial-message="Ask about **{library}**. Get help with setup, styling, or adding the widget to your framework."
    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"
    widget-id="docs-widget"
  >
    <template #trigger="{ label }">
      <span class="docs-trigger-dot" />
      {{ label }}
    </template>
  </Context7Widget>
</template>

Placement

Put help where people reach for it.

Keep a familiar chat button in the corner, open a centered dialog for more space, or attach the panel to a help button in your navigation. Each option works with your site’s design.

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.desourcelabs.com/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

Keep docs help within reach as visitors explore the page. Try the button to open it.

Drop-in script replacement

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

Customization examples

Choose a look to build on.

minimal

Subtle borders and restrained colors.

glass

Translucent panels with a blurred backdrop.

neo

Sharp edges, bold color, and offset shadows.

terminal

Monospace assistant for dev-tool pages.

brutalist

Heavy borders and high contrast.

Preset color fallback

<script
  async
  src="https://context7.desourcelabs.com/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"
/>

Managed React trigger

<Context7Widget
  library="/owner/repo"
  customTrigger
  position="anchor"
  preset="glass"
  launcherLabel="Ask docs"
  trigger={({ label }) => <span>{label}</span>}
/>

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

<script setup lang="ts">
import { useContext7Widget } from '@desource/context7-widget-vue';
import '@desource/context7-widget-vue/styles.css';

const docs = useContext7Widget({
  autoMount: true,
  library: '/owner/repo',
  position: 'center',
  preset: 'terminal',
  widgetId: 'docs'
});

async function ask() {
  await docs.send('How do I customize the widget?');
  console.log(docs.isOpen.value, docs.isBusy.value, docs.messages.value);
}
</script>

<template>
  <button type="button" @click="ask">Ask documentation</button>
</template>

React hook

import { useContext7Widget } from '@desource/context7-widget-react/hook';
import '@desource/context7-widget-react/styles.css';

export function DocsHelp() {
  const docs = useContext7Widget({
    autoMount: true,
    library: '/owner/repo',
    position: 'center',
    preset: 'terminal',
    widgetId: 'docs'
  });

  return (
    <button type="button" disabled={!docs.widget} onClick={() => void docs.send('Show the recommended setup')}>
      Explain setup
    </button>
  );
}

Nuxt module defaults

export default defineNuxtConfig({
  modules: ["@desource/context7-widget-nuxt"],
  context7Widget: {
    defaults: {
      library: "/owner/repo",
      preset: "minimal",
      widgetId: "docs"
    }
  }
});

Svelte controller

<script lang="ts">
  import { onMount } from 'svelte';
  import { createContext7Widget } from '@desource/context7-widget-svelte';
  import '@desource/context7-widget-svelte/styles.css';

  const docs = createContext7Widget({
    library: '/owner/repo',
    position: 'center',
    preset: 'terminal'
  });

  onMount(() => {
    docs.mount();
    return docs.unmount;
  });
</script>

<button onclick={() => docs.open()}>Open docs</button><p>{docs.messages.length} messages</p>

Angular service

import { Component, inject } from '@angular/core';
import { Context7WidgetService } from '@desource/context7-widget-angular';

// Import the package stylesheet in your global styles.css.
@Component({
  selector: 'docs-help',
  template: '<button type="button" (click)="ask()">Explain setup</button>'
})
export class DocsHelp {
  private readonly docs = inject(Context7WidgetService);

  async ask() {
    this.docs.mount({ library: '/owner/repo', widgetId: 'docs', preset: 'minimal' });
    await this.docs.send('Show installation examples', 'docs');
  }
}