Skip to main content

​
Overview

Add a floating chat bubble to any website that answers questions about your PDF. One script tag, zero dependencies, streaming responses.

Live Demo

Try the embedded chat widget on a live page

​
Quick Start

Upload a document, then paste this before </body>:
That’s it. A chat bubble appears in the bottom-right corner. Your visitors ask questions, the widget streams answers from your PDF.
1

Upload a PDF

2

Get a publishable key

Create a key scoped for client-side use in your dashboard. Publishable keys (prefixed okra_pk_) can only read — they can’t upload or delete documents.
3

Add the script tag

​
How It Works

The widget calls okraPDF’s OpenAI-compatible completions endpoint directly from the browser:
No backend proxy needed. The publishable key restricts access to read-only completions on that specific document.

​
Use with Chatbot Builders

Since the completions API is OpenAI-compatible, any chatbot platform that supports custom endpoints works out of the box.
Add an HTTP Request block:
  • URL: https://api.okrapdf.com/v1/documents/YOUR_DOC_ID/chat/completions
  • Method: POST
  • Headers: Authorization: Bearer YOUR_OKRA_KEY
  • Body: {"model":"moonshotai/kimi-k2.5","messages":[{"role":"user","content":"{{userQuestion}}"}]}
  • Response mapping: choices[0].message.content → your response variable
  • Timeout: Set to 120s (LLM calls take 5-30s)
Any platform with a “Custom OpenAI” or “HTTP Request” integration:
  • Base URL: https://api.okrapdf.com/v1/documents/YOUR_DOC_ID
  • API Key: Your okraPDF key (passed as OpenAI API key)
  • Model: moonshotai/kimi-k2.5
Use the okraPDF n8n node for native integration.

​
Customization

The widget accepts these data- attributes: For deeper customization (colors, position, greeting), fork the widget source — it’s ~80 lines of vanilla JS.

​
Source Code

Widget Source

Vanilla JS, zero dependencies, ~80 lines

Live Demo

Deployed example with streaming chat