Complete No Pages Tutorial

Everything you need to know to get started

Voice-Guided Learning: The voice assistant can read and explain any section. Just ask: "Explain the Widget Network" or "How do I embed the widget?"

Table of Contents

  1. Introduction to No Pages
  2. Getting Started
  3. Embedding the Widget
  4. The Widget Network
  5. Agent Tools & Actions
  6. Knowledge Base & RAG
  7. Voice Interaction Modes
  8. Admin Panel Configuration

1. Introduction to No Pages

No Pages transforms websites into voice-enabled AI assistants. Instead of clicking through menus and pages, visitors simply talk to your website.

Core Philosophy

  • The Famous Button: The voice orb is present everywhere, always accessible as the primary interface
  • Minimal Copy, Maximum Intrigue: Pages whisper; the voice sells
  • Configuration-Driven: Clone, configure via admin panel, launch - no code changes needed
Ask: "What is the core philosophy of No Pages?"

2. Getting Started

Setting up No Pages takes just a few minutes:

  1. Clone the repository - Fork or clone the No Pages codebase
  2. Configure environment - Set up your OpenAI API key and database
  3. Access admin panel - Log in as admin to configure your site
  4. Customize - Set your brand name, colors, persona, and system prompt
  5. Add content - Upload documents, create FAQs, or crawl URLs
  6. Embed widgets - Add the voice button to your pages
Ask: "How do I get started with No Pages?"

3. Embedding the Widget

Add the No Pages voice assistant to any webpage with just a few lines:

<script src="https://your-domain.com/widget/nopages-widget.js"></script> <script> NoPages.init({ apiUrl: 'https://your-domain.com', position: 'bottom-right', primaryColor: '#6366f1', greeting: 'Hi! How can I help you?', interactionMode: 'toggle-talk', contextPrompt: 'You are a helpful assistant.' }); </script>

Configuration Options

OptionTypeDescription
apiUrlstringBase URL for API calls (required)
positionstring"bottom-right" or "bottom-left"
primaryColorstringHex color for the voice orb
interactionModestring"push-to-talk", "toggle-talk", or "continuous"
contextPromptstringPer-button mission/persona
Ask: "How do I embed the widget on my website?"

4. The Widget Network

The Widget Network enables automatic discovery and navigation across all pages where the voice assistant is deployed.

How It Works

  1. Auto-Registration: Widgets automatically register when they load
  2. Deduplication: URLs are hashed to prevent duplicates
  3. Discovery: The AI queries the network to know about all pages
  4. Navigation: Users can say "take me to pricing" and the AI knows where to go
Ask: "Explain the Widget Network"

5. Agent Tools & Actions

Agent tools extend what the AI can do:

Tool TypeDescriptionUse Case
redirectNavigate to a URLCross-page navigation
fill_formPopulate form fieldsHands-free form completion
show_modalDisplay content/iframeBooking calendars, videos
api_callCall external APIsWeather, stocks, custom data
save_leadCapture contact infoLead generation
send_emailSend notificationsContact form submissions
Ask: "What tools can the AI use?"

6. Knowledge Base & RAG

The knowledge base uses Retrieval-Augmented Generation (RAG):

Content Sources

  • Documents: Upload PDFs, text files - automatically chunked and embedded
  • FAQs: Create question-answer pairs for structured knowledge
  • URL Crawling: Import content from existing websites
Ask: "How does the knowledge base work?"

7. Voice Interaction Modes

  • Toggle Talk: Click to start, click to stop. Simple and intuitive.
  • Push to Talk: Hold while speaking, release to send. Great for quick commands.
  • Continuous: Natural conversation with automatic silence detection.
Ask: "What are the different voice modes?"

8. Admin Panel Configuration

  • Site Identity: Name, logo, greeting, persona, system prompt
  • Branding: Primary color, custom styling
  • Knowledge Base: Document upload, FAQs, URL crawling
  • Agent Tools: Configure actions with parameters and triggers
  • Profile Fields: Collect custom user data for personalization
  • Webhooks: Event notifications for external integrations
Remember: Everything is configuration-driven. Changes in the admin panel take effect immediately without redeploying code.
Ask: "What can I configure in the admin panel?"