Building a White-Label Conversational PDF Q&A Portal on Your Own Domain (With Spatial Bounding-Box Highlighting)

When you send an invoice, insurance policy, SaaS proposal, or financial report to your customer, you want the entire interactive experience to live under your own brand and domain (for example, https://portal.yourcompany.com/docs/doc_8f3a...) — without your end-users ever leaving your application or seeing a third-party URL.

Step 1: Point the Clickable PDF Badge to Your Own Domain

When rendering a PDF via POST /v1/render/pdf, pass neural_custom_url with the {{doc_id}} placeholder. Tailprint automatically substitutes the generated document ID into the clickable ISO-32000 /Link annotation on the PDF page:

const response = await fetch('https://tailprint.com/v1/render/pdf', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${process.env.TAILPRINT_API_KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    html: invoiceHtml,
    neural_implant: true,
    neural_persona: 'Acme Billing & Contract Specialist',
    neural_context: {
      early_payment: '2% discount if paid within 8 days.',
      support_sla: '24/7 dedicated Slack channel included.'
    },
    // White-label the clickable badge on Page 1 of the PDF:
    neural_custom_url: 'https://portal.acme.com/documents/{{doc_id}}',
    neural_badge_label: 'ACME AI ASSISTANT • CLICK TO ASK THIS INVOICE',
    // Or set neural_badge: false for a 100% invisible headless implant!
    verify_custom_url: 'https://portal.acme.com/verify/{{doc_id}}'
  }),
});

const docId = response.headers.get('x-tailprint-doc-id'); // e.g. "doc_8f3a91c04b12e801"

Step 2: Load Starter Questions & Metadata via POST /v1/pdf/cortex

When your customer lands on https://portal.acme.com/documents/doc_8f3a91c04b12e801, fetch the compiled cortex by doc_id (or by passing the base64/URL pdf directly for zero-retention stateless workflows):

// Backend route on your domain: GET /api/docs/:docId/cortex
const cortexRes = await fetch('https://tailprint.com/v1/pdf/cortex', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ doc_id: docId }), // Or { pdf: base64PdfString }
});

const cortex = await cortexRes.json();
// cortex.suggested_questions -> ["What is the Early Payment?", "What are the details for Dedicated GPU...?", ...]
// cortex.persona -> "Acme Billing & Contract Specialist"
// cortex.total_synapses -> 14

Step 3: Query the Document in ~0.8ms via POST /v1/pdf/ask

When your user clicks a suggested question chip or types a question in your UI, call POST /v1/pdf/ask. The response includes both the deterministic answer and exact percentage bounding-box coordinates (x_pct, y_pct, w_pct, h_pct) for every visual citation:

const askRes = await fetch('https://tailprint.com/v1/pdf/ask', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    doc_id: docId,
    question: 'What discount applies for early payment, and what is the GPU line item total?'
  }),
});

const result = await askRes.json();
/*
{
  "doc_id": "doc_8f3a91c04b12e801",
  "answer": "Early Payment: 2% discount if paid within 8 days. • Dedicated GPU Cluster: €14,500.00",
  "confidence": 0.95,
  "primary_source_layer": "latent_memory",
  "execution_time_ms": 0.78,
  "cryptographically_verified": true,
  "citations": [
    {
      "synapse_id": "syn_dom_3",
      "layer": "visual_dom",
      "section": "Invoice Line Items",
      "content": "Service: Dedicated GPU Cluster | Qty: 2 | Total: €14,500.00",
      "score": 0.91,
      "bbox": {
        "page": 1,
        "x_pct": 8.4,
        "y_pct": 24.1,
        "w_pct": 83.2,
        "h_pct": 3.8,
        "x_pt": 50.0,
        "y_pt": 202.8,
        "w_pt": 495.2,
        "h_pt": 32.0
      }
    }
  ],
  "suggested_followups": ["What is the Support SLA?"]
}
*/

Step 4: Render the Spatial Bounding-Box Laser in Your Frontend

Because bbox provides normalized percentages (0..100%) relative to the physical page size, overlaying a visual highlight box on top of a rendered PDF page in your own React or Vue frontend requires just 6 lines of CSS:

{citation?.bbox && (
  <div
    className="absolute border-2 border-indigo-500 bg-indigo-500/15 rounded pointer-events-none transition-all duration-300"
    style={{
      left: `${citation.bbox.x_pct}%`,
      top: `${citation.bbox.y_pct}%`,
      width: `${citation.bbox.w_pct}%`,
      height: `${citation.bbox.h_pct}%`,
    }}
  />
)}