Nova Prompt Widget Integration Guide

Overview

Use this guide to add the Nova Prompt interface to your website.

Quick Start

Add these lines to your HTML:

 1<div id="nova-widget"></div>
 2<script src="https://embeded.nova.webpros.com/latest/nova-embedded.umd.js"></script>
 3<script>
 4  NovaPrompt({
 5    target: '#nova-widget',
 6    onSend: async (prompt) => {
 7      // Handle the submitted prompt
 8      console.log('User prompt:', prompt);
 9    }
10  });
11</script>

The widget renders in the #nova-widget container. The JavaScript file bundles the styles, so you do not need a separate CSS <link> tag.

Pinning to a Specific Version

For production environments, pin to a specific version instead of using latest:

1<script src="https://embeded.nova.webpros.com/v1.0.1/nova-embedded.umd.js"></script>

Available versions:

0.0.1
1.0.0
1.0.1

Configuration

Required Options

Use these required options:

Option	Type	Description
`target`	string	CSS selector for the container element
`onSend`	function	NovaPrompt calls this function when the user submits a prompt. It passes the prompt text in Base64 format.

Optional Flags

Use these optional settings:

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. The widget shows up to three.
`placeholders`	array	Default placeholders	Custom placeholder text options.
`encodeOnSend`	boolean	`true`	Base64 encode the prompt before calling `onSend`.
`onBeforeSend`	function	`null`	Hook to validate or modify the prompt before sending.
`showLogs`	boolean	`false`	Enable console logging for debugging.
`logger`	function	`console.log`	Custom log function that runs when `showLogs` is `true`.

Customizing Text

Override any UI text using the locales option:

 1NovaPrompt({
 2  target: '#nova-widget',
 3  locales: {
 4    title: 'Build Your Dream Website',
 5    description: 'Describe what you want to create and we\'ll build it for you.',
 6    sendButton: 'Create Now',
 7    sendButtonLoading: 'Creating...', // show this text while the request runs
 8    explorePrompts: 'Try these ideas',
 9    placeholderPrefix: 'Describe your'
10  },
11  onSend: async (prompt) => { /* ... */ }
12});

Locales Reference

Use these locale values:

Option	Default	Description
`title`	All it takes is a conversation	Heading above the input.
`description`	Describe your idea and watch it become a live website or app, without writing any code. Launch with one click!	Subheading below the title.
`sendButton`	Start Building	Submit button label.
`sendButtonLoading`	`null`	Button label while loading. NovaPrompt uses `sendButton` when you do not set this value.
`explorePrompts`	Explore prompts	Label that appears before the example prompts list.
`placeholderPrefix`	Ask to create	Prefix that appears in the rotating placeholder text.

Custom Examples

Display your own example prompts to inspire users:

 1NovaPrompt({
 2  target: '#nova-widget',
 3  examples: [
 4    {
 5      title: 'Online Store',
 6      prompt: 'Create a modern e-commerce site with product catalog and shopping cart'
 7    },
 8    {
 9      title: 'Portfolio',
10      prompt: 'Build a creative portfolio website with project gallery and contact form'
11    },
12    {
13      title: 'Blog',
14      prompt: 'Design a clean blog with categories, search, and newsletter signup'
15    }
16  ],
17  onSend: async (prompt) => { /* ... */ }
18});

Pre-Send Validation

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

 1NovaPrompt({
 2  target: '#nova-widget',
 3  onBeforeSend: async (prompt) => {
 4    // Ensure user is logged in
 5    if (!currentUser) {
 6      openLoginModal();
 7      throw new Error('Login required'); // Cancels submission
 8    }
 9
10    // Optionally modify the prompt
11    return `[Source: Partner Site] ${prompt}`;
12  },
13  onSend: async (prompt) => {
14    await fetch('/api/process', {
15      method: 'POST',
16      body: JSON.stringify({ prompt })
17    });
18  }
19});

Styling

The widget renders inside a Shadow DOM, so host-page styles will not leak into it. You can customize it in two supported ways: CSS variables on the widget host, and exposed ::part() selectors.

CSS Variables

Define CSS custom properties on the host element or any ancestor. The Shadow DOM inherits those values:

 1#nova-widget {
 2  /* Primary accent color */
 3  --primary: oklch(0.53 0.278 298.33);
 4
 5  /* Border radius */
 6  --radius: 0.625rem;
 7
 8  /* Font */
 9  --default-font-family: system-ui, sans-serif;
10
11  /* Text sizes */
12  --text-leading: 3rem;
13  --text-base: 1rem;
14
15  /* Input border gradient */
16  --border-gradient: linear-gradient(
17    150deg,
18    var(--color-cyan-400) -15%,
19    var(--color-purple-500) 45%,
20    var(--color-pink-400) 85%,
21    var(--color-orange-500) 100%
22  );
23
24  /* Flat border color when you disable --border-gradient */
25  --border: #eee;
26}

CSS `::part()` Selectors

Key widget elements expose named parts that let you style them from outside the Shadow DOM using ::part():

Part	Description
`title`	Heading text
`description`	Description text.
`textarea`	Prompt input field.
`textareaWrapper`	Container wrapping the text area.
`submitButton`	Send button.
`submitButtonIcon`	Icon inside the send button.
`examples`	Example prompts container.
`exampleButton`	Individual example prompt buttons.

 1#nova-widget::part(submitButton) {
 2  background: salmon;
 3}
 4
 5#nova-widget::part(submitButtonIcon) {
 6  display: none;
 7}
 8
 9#nova-widget::part(exampleButton) {
10  background: pink;
11  border: 1px solid salmon;
12}
13
14#nova-widget::part(title),
15#nova-widget::part(description) {
16  color: darkred;
17}

ES Module Usage

If you prefer ES modules:

 1<div id="nova-widget"></div>
 2
 3<script type="module">
 4  import { NovaPrompt } from 'https://embeded.nova.webpros.com/latest/nova-embedded.es.js';
 5
 6  NovaPrompt({
 7    target: '#nova-widget',
 8    onSend: async (prompt) => {
 9      // Handle submission
10    }
11  });
12</script>

Full Example

 1<!DOCTYPE html>
 2<html>
 3<head>
 4  <style>
 5    #nova-widget {
 6      --primary: #7c3aed;
 7    }
 8
 9    #nova-widget::part(submitButton) {
10      border-radius: 9999px;
11    }
12  </style>
13</head>
14<body>
15  <div id="nova-widget"></div>
16
17  <script src="https://embeded.nova.webpros.com/v1.0.1/nova-embedded.umd.js"></script>
18  <script>
19    NovaPrompt({
20      target: '#nova-widget',
21      locales: {
22        title: 'What would you like to build?',
23        sendButton: 'Get Started',
24        sendButtonLoading: 'Starting...'
25      },
26      examples: [
27        { title: 'Landing Page', prompt: 'Create a startup landing page with hero section and pricing' },
28        { title: 'Dashboard', prompt: 'Build an analytics dashboard with charts and data tables' },
29        { title: 'Booking Site', prompt: 'Design a restaurant booking system with calendar and reservations' }
30      ],
31      onSend: async (encodedPrompt) => {
32        const response = await fetch('https://your-api.com/prompts', {
33          method: 'POST',
34          headers: { 'Content-Type': 'application/json' },
35          body: JSON.stringify({ prompt: encodedPrompt })
36        });
37
38        if (response.ok) {
39          window.location.href = '/builder';
40        }
41      }
42    });
43  </script>
44</body>
45</html>

Nova Prompt Widget Integration Guide

Overview #

Quick Start #

Pinning to a Specific Version #

Configuration #

Required Options #

Optional Flags #

Customizing Text #

Locales Reference #

Custom Examples #

Pre-Send Validation #

Styling #

CSS Variables #

CSS ::part() Selectors #

ES Module Usage #

Full Example #