# Nova Prompt Widget Integration GuideThe Nova Prompt widget embeds an AI-powered prompt interface on a partner website using a hosted CSS and JavaScript bundle, pinned to a specific version for production instead of latest. Required configuration is a target container and an onSend handler; optional settings include custom UI text, example prompts, placeholder text, base64 encoding of the submitted prompt, and a pre-submit validation hook. Appearance is customizable through CSS variables, and an ES module build is available as an alternative to the UMD bundle.

## Overview

Use this integration guide to add an AI-powered prompt interface to your website in minutes.

## Quick Start

Add these two lines to your HTML:

```html
<link rel="stylesheet" href="https://embeded.nova.webpros.com/latest/nova-embedded.css">
<div id="nova-widget"></div>
<script src="https://embeded.nova.webpros.com/latest/nova-embedded.umd.js"></script>
<script>
  NovaPrompt({
    target: '#nova-widget',
    onSend: async (prompt) => {
      // Handle the submitted prompt
      console.log('User prompt:', prompt);
    }
  });
</script>
```

The widget will render in the `#nova-widget` container.

## Pinning to a Specific Version

For production environments, we recommend pinning to a specific version instead of using `latest`:

```html
<link rel="stylesheet" href="https://embeded.nova.webpros.com/v0.0.1/nova-embedded.css">
<script src="https://embeded.nova.webpros.com/v0.0.1/nova-embedded.umd.js"></script>
```

Available versions: `0.0.1`

## Configuration

### Required Options

| Option | Type | Description |
|--------|------|-------------|
| `target` | `string` | CSS selector for the container element |
| `onSend` | `function` | Called when the user submits a prompt. Receives the prompt text (base64 encoded by default). |

### Optional Flags

| Option | Type | Default | Description |
| ---- | ---- | ---- | ----- |
| `locales` | `object` | See below | Customize UI text. |
| `showExamples` | `boolean` | `true` | Show example prompts below the input. |
| `examples` | `array` | Default examples | Custom example prompts (max 3 shown). |
| `placeholders` | `array` | Default placeholders | Custom placeholder text options. |
| `encodeOnSend` | `boolean` | `true` | Base64 encode the prompt before calling `onSend`. |
| `onBeforeSend` | `function` | — | Hook to validate or modify the prompt before sending. |

## Customizing Text

Override any UI text using the `locales` option:

```javascript
NovaPrompt({
  target: '#nova-widget',
  locales: {
    title: 'Build Your Dream Website',
    description: 'Describe what you want to create and we\'ll build it for you.',
    sendButton: 'Create Now',
    explorePrompts: 'Try these ideas',
    placeholderPrefix: 'Describe your'
  },
  onSend: async (prompt) => { /* ... */ }
});
```

## Custom Examples

Display your own example prompts to inspire users:

```javascript
NovaPrompt({
  target: '#nova-widget',
  examples: [
    {
      title: 'Online Store',
      prompt: 'Create a modern e-commerce site with product catalog and shopping cart'
    },
    {
      title: 'Portfolio',
      prompt: 'Build a creative portfolio website with project gallery and contact form'
    },
    {
      title: 'Blog',
      prompt: 'Design a clean blog with categories, search, and newsletter signup'
    }
  ],
  onSend: async (prompt) => { /* ... */ }
});
```

## Pre-Send Validation

Use `onBeforeSend` to validate input, authenticate users, or modify the prompt before submission:

```javascript
NovaPrompt({
  target: '#nova-widget',
  onBeforeSend: async (prompt) => {
    // Ensure user is logged in
    if (!currentUser) {
      openLoginModal();
      throw new Error('Login required'); // Cancels submission
    }

    // Optionally modify the prompt
    return `[Source: Partner Site] ${prompt}`;
  },
  onSend: async (prompt) => {
    await fetch('/api/process', {
      method: 'POST',
      body: JSON.stringify({ prompt })
    });
  }
});
```

## Styling

The widget includes default styles but can be customized with CSS variables:

```css
:root {
  /* Primary accent color */
  --primary: oklch(0.53 0.278 298.33);

  /* Input background */
  --input: oklch(1 0 0);

  /* Border radius */
  --radius: 0.625rem;

  /* Font */
  --default-font-family: system-ui, sans-serif;

  /* Text sizes */
  --text-leading: 3rem;
  --text-base: 1rem;

  /* Input border gradient */
  --border-gradient: linear-gradient(
    150deg,
    var(--color-cyan-400) -15%,
    var(--color-purple-500) 45%,
    var(--color-pink-400) 85%,
    var(--color-orange-500) 100%
  );
}
```

The main container has the class `nova-integration-start-block` for additional styling.

## ES Module Usage

If you prefer ES modules:

```html
<link rel="stylesheet" href="https://embeded.nova.webpros.com/latest/nova-embedded.css">
<div id="nova-widget"></div>

<script type="module">
  import { NovaPrompt } from 'https://embeded.nova.webpros.com/latest/nova-embedded.es.js';

  NovaPrompt({
    target: '#nova-widget',
    onSend: async (prompt) => {
      // Handle submission
    }
  });
</script>
```

## Full Example

```html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://embeded.nova.webpros.com/v0.0.1/nova-embedded.css">
</head>
<body>
  <div id="nova-widget"></div>

  <script src="https://embeded.nova.webpros.com/v0.0.1/nova-embedded.umd.js"></script>
  <script>
    NovaPrompt({
      target: '#nova-widget',
      locales: {
        title: 'What would you like to build?',
        sendButton: 'Get Started'
      },
      examples: [
        { title: 'Landing Page', prompt: 'Create a startup landing page with hero section and pricing' },
        { title: 'Dashboard', prompt: 'Build an analytics dashboard with charts and data tables' },
        { title: 'Booking Site', prompt: 'Design a restaurant booking system with calendar and reservations' }
      ],
      onSend: async (encodedPrompt) => {
        const response = await fetch('https://your-api.com/prompts', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ prompt: encodedPrompt })
        });

        if (response.ok) {
          window.location.href = '/builder';
        }
      }
    });
  </script>
</body>
</html>
```