Nova Prompt Widget Integration Guide

Overview

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

The Nova Prompt widget feature is available in Nova Experience only. We plan to introduce this feature to Nova in cPanel Meridian in a future release.

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>

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

OptionTypeDescription
targetstringCSS selector for the container element
onSendfunctionCalled when the user submits a prompt. Receives the prompt text (base64 encoded by default).

Optional Flags

OptionTypeDefaultDescription
localesobjectSee belowCustomize UI text.
showExamplesbooleantrueShow example prompts below the input.
examplesarrayDefault examplesCustom example prompts (max 3 shown).
placeholdersarrayDefault placeholdersCustom placeholder text options.
encodeOnSendbooleantrueBase64 encode the prompt before calling onSend.
onBeforeSendfunction—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>
Prev
Nova Partner Dashboard
Next
Offer Nova in cPanel Meridian