DOM Context

DOM Context lets the AI read the current page to understand what the user is looking at. Instead of sending the full page on every message, the SDK extracts DOM content on demand — only when the AI requests it.

How It Works

1. User sends a message
2. If the AI determines it needs page context (e.g., "What's on this page?"), it requests a DOM extraction
3. The SDK reads the current page and sends structured context:
   • Page URL and title
   • Headings hierarchy
   • Form fields and their current values
   • Key text content (capped at ~24K characters)
   • Structured data (JSON-LD)
   • Navigation links

User: "What products are on this page?"
  → AI requests DOM context
  → SDK extracts: headings, product names, prices
  → AI responds with accurate page-specific info

Configuration

React

<ProduckProvider
  sdkKey="pk_live_..."
  domContext={{
    enabled: true,              // Enable DOM extraction
    selectors: ['main', '.content'],  // Only extract from these
    exclude: ['.sidebar', 'nav'],     // Skip these elements
  }}
>
  <ProduckChat />
</ProduckProvider>

Vanilla JavaScript

Produck.init({
  sdkKey: 'pk_live_...',
  domContext: {
    enabled: true,
    selectors: ['main', '.content'],
    exclude: ['.sidebar', 'nav'],
  },
})

Configuration Options

What Gets Extracted

The extractPageContext() function returns a PageContext object:

interface PageContext {
  url: string            // Current page URL
  title: string          // Document title
  description: string    // Meta description
  headings: Array<{      // All headings (h1-h6)
    level: number
    text: string
  }>
  textContent: string    // Cleaned text (max ~24K chars)
  forms: Array<{         // Form fields and values
    id: string
    action: string
    fields: Array<{
      name: string
      type: string
      value: string
      label: string
    }>
  }>
  navigation: Array<{    // Navigation links
    text: string
    href: string
  }>
  structuredData: any[]  // JSON-LD data if present
  meta: Record<string, string>  // Meta tags
}

On-Demand Only

DOM context is never sent automatically. The AI must explicitly request it. This means:

• Zero overhead on messages that don't need page context
• Privacy-first — no page content leaves the browser until requested
• Bandwidth-efficient — only extracted when needed

When Does the AI Request Context?

The AI requests DOM context when the user asks about:

• What's on the current page
• Specific content they can see
• Form fields or their values
• Navigation or page structure

For general questions (e.g., "What's your refund policy?"), the AI uses the knowledge base instead.

Scoping with Selectors

Use selectors to limit what the AI can read:

// Only read the main content area
domContext={{ enabled: true, selectors: ['main'] }}
 
// Read specific sections
domContext={{ enabled: true, selectors: ['.product-list', '.pricing-table'] }}

Use exclude to skip sensitive areas:

// Skip admin panels and user data
domContext={{
  enabled: true, 
  exclude: ['.admin-panel', '.user-private-data', '#credit-card-form']
}}

Best Practices

1. Scope to main content — use selectors: ['main'] instead of the default body
2. Exclude sensitive areas — forms with PII, admin panels, hidden content
3. Keep pages semantic — use proper headings, labels, and ARIA attributes for better extraction
4. Test extraction — check what the AI sees by calling extractPageContext() directly

Next Steps

• Knowledge Base — Teach the AI about your product
• API Schema — Let the AI execute API calls
• Security — Understand the security model