Use cases

Embed a cited chat widget on your site

Add a drop-in assistant that answers from your docs and shows page-level sources — no custom RAG UI to build.

6 min read

Not every team has frontend bandwidth for a custom chat UI. The embed path gets cited document Q&A on your marketing site, help center, or in-app help panel with minimal code — while keeping API keys off the client if you use a server-side config pattern.

Before you embed

Complete dashboard validation first. Widgets ship fast; fixing trust in production is slow. Run your golden question set and get sign-off from support or product. See validate document Q&A before launch.

Upload the same doc corpus you want the widget to use — PDFs, Markdown, help-center exports.

Basic embed flow

  1. Create a project and API key in the dashboard
  2. Configure widget settings (project, theme colors matching your brand)
  3. Add the embed snippet to your page template
  4. Test on staging with ad blockers disabled and CSP rules updated

Widget answers use the same citation pipeline as the REST API. Infrastructure runs on Oprag’s AWS with tenant isolation per project.

Styling and brand

Match your site without fighting defaults:

  • Set accent color to your brand primary
  • Keep Oprag chrome minimal; wrap with your header copy (“Ask our docs”)
  • Show citations expanded by default on mobile — do not hide sources in modals

For fully custom UI, use the REST integration guide instead.

Security and CSP

If you use a strict Content Security Policy, allow:

  • Script source for the embed host
  • Connect-src to Oprag API endpoints
  • Frame-src if the widget uses an iframe

Prefer loading config from your backend so the API key is not exposed in static HTML when your deployment model requires it.

Where to embed

High-intent pages first:

  • Pricing (plan comparisons users misread)
  • Documentation landing
  • Post-signup onboarding

Measure citation clicks and ticket rate per page — expand placement based on data, not aesthetics.

Pair with help center strategy

Widgets on marketing pages catch pre-sales questions; help center embeds catch post-sales deflection. Read add cited AI to your help center for the full support workflow.

After launch

Re-upload docs when policies change. Re-run five golden questions after each upload. Add new pages to embed only after those pass.

Ready to try it in your workflow?