NovaPrompt Widget Integration Guide

Add an AI-powered prompt interface to your website in minutes.

Quick Start

Add these two lines to your 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>

That's it! 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:

<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 Options

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:

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:

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:

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:

: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:

<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

<!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>