> ## Documentation Index
> Fetch the complete documentation index at: https://docs.okrapdf.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Chat Widget

> Embed a PDF chatbot on any website with one script tag

## Overview

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

<Card title="Live Demo" icon="message-bot" href="https://typebot-integration.okrapdf.dev">
  Try the embedded chat widget on a live page
</Card>

## Quick Start

Upload a document, then paste this before `</body>`:

```html theme={null}
<script src="https://typebot-integration.okrapdf.dev/widget.js"
        data-doc="YOUR_DOC_ID"
        data-key="YOUR_PUBLISHABLE_KEY"></script>
```

That's it. A chat bubble appears in the bottom-right corner. Your visitors ask questions, the widget streams answers from your PDF.

<Steps>
  <Step title="Upload a PDF">
    ```bash theme={null}
    npx okrapdf upload earnings.pdf
    # → Document ID: ocr-abc123
    ```
  </Step>

  <Step title="Get a publishable key">
    Create a key scoped for client-side use in your [dashboard](https://app.okrapdf.com/dashboard). Publishable keys (prefixed `okra_pk_`) can only read — they can't upload or delete documents.
  </Step>

  <Step title="Add the script tag">
    ```html theme={null}
    <script src="https://typebot-integration.okrapdf.dev/widget.js"
            data-doc="ocr-abc123"
            data-key="okra_pk_your_key_here"></script>
    ```
  </Step>
</Steps>

## How It Works

The widget calls OkraPDF's OpenAI-compatible completions endpoint directly from the browser:

```
Browser → POST /v1/documents/{id}/chat/completions → Streaming SSE response
```

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.

<AccordionGroup>
  <Accordion title="Typebot">
    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)
  </Accordion>

  <Accordion title="Botpress / Voiceflow / Flowise">
    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`
  </Accordion>

  <Accordion title="Python / Node.js (OpenAI SDK)">
    ```python theme={null}
    from openai import OpenAI

    client = OpenAI(
        base_url="https://api.okrapdf.com/v1/documents/YOUR_DOC_ID",
        api_key="okra_pk_your_key_here",
    )

    response = client.chat.completions.create(
        model="moonshotai/kimi-k2.5",
        messages=[{"role": "user", "content": "What was total revenue?"}],
    )
    print(response.choices[0].message.content)
    ```
  </Accordion>

  <Accordion title="n8n">
    Use the [OkraPDF n8n node](https://github.com/okrapdf/n8n-nodes-okrapdf) for native integration.
  </Accordion>
</AccordionGroup>

## Customization

The widget accepts these `data-` attributes:

| Attribute  | Description                    | Default |
| ---------- | ------------------------------ | ------- |
| `data-doc` | Document ID (required)         | —       |
| `data-key` | Publishable API key (required) | —       |

For deeper customization (colors, position, greeting), fork the [widget source](https://github.com/okrapdf/examples/tree/main/chatpdf-widget) — it's \~80 lines of vanilla JS.

## Source Code

<CardGroup cols={2}>
  <Card title="Widget Source" icon="github" href="https://github.com/okrapdf/examples/tree/main/chatpdf-widget">
    Vanilla JS, zero dependencies, \~80 lines
  </Card>

  <Card title="Live Demo" icon="globe" href="https://typebot-integration.okrapdf.dev">
    Deployed example with streaming chat
  </Card>
</CardGroup>