NEXUS // Documentation

Site Builder Guide

Introduction

The NEXUS Site Builder is an AI-powered website builder designed specifically for small businesses. Create a professional-looking website in minutes — no coding skills required.

Pro feature: Site Builder is available with Pro and Premium subscriptions. Upgrade now →

What you get?

  • AI-generated content — AI generates text and structure based on your business data
  • 13 section types — Hero, services, testimonials, team, FAQ, and more
  • Live preview — All changes appear immediately in the right-side preview
  • Auto-save — Automatically saves after 2 seconds of inactivity
  • Undo/Redo — Ctrl+Z / Ctrl+Y, up to 30 steps
  • HTML download — A single, standalone HTML file, hostable anywhere

First Steps

1. Navigate to the Builder

After logging in, the Builder is available:

  • From the Chat page header → "Site Builder" button
  • From the Account page → "Website Builder" button
  • Directly: /builder URL

2. Onboarding questionnaire

If you don't have a website yet, you'll be greeted by the onboarding questionnaire. Fill in:

  • Business name (required) — e.g. "Smith's Salon"
  • Type (required) — select the most suitable category
  • Services — comma-separated, e.g. "Haircut, Coloring, Highlights"
  • Contact info — phone, address, opening hours
  • Tone — professional, friendly, or playful
  • Color palette — choose from 8 predefined palettes

3. Generation

Clicking the "Generate website" button triggers the AI to create your website content. This includes texts, section structure, and the chosen style. Generation takes 10-30 seconds.

Tip: The more detailed your input, the better the result. Services and contact info help the AI generate relevant content.

AI Generation

The NEXUS Site Builder uses the AI model associated with your subscription tier to generate content:

PlanModelQuality
ProDeepSeek V4 FlashGood — fast, efficient
PremiumClaude Sonnet 4.6Excellent — most nuanced texts

Regeneration

If you don't like the result, use the "Regenerate" button in the toolbar to request new content — with the same onboarding answers. The previous version can be restored with Ctrl+Z.

Warning: Regeneration overwrites the current content. If you have manual edits, they will be lost — but you can restore them with Ctrl+Z.

The Editor Interface

The editor consists of three main parts:

Left panel — Section list & Styles

There are two tabs:

  • Sections — list of all sections in order. Click a section to edit it.
  • Styles — global settings: color palette, fonts, custom colors, business info, SEO, footer, social links.

Active section controls

When you select a section, action buttons appear:

  • ▲ / ▼ — move section up/down
  • ⧉ — duplicate section
  • ● — toggle section visibility (visible/hidden)
  • ✕ — delete section

Center panel — Section editor

Edit the fields of the selected section here. Each section type has its own fields. Below, you'll find section style controls: background color, text color, alignment, padding, margin.

Right panel — Live preview

Real-time preview of the website. Every change appears immediately. In the toolbar, you can switch between Desktop and Mobile views.

Hero Section

A eye-catching section at the top of the website. This is the first thing visitors see.

Fields

  • Headline — the most important message, large font size
  • Subtitle — supplementary text, smaller font size
  • Button text — CTA button label, e.g. "Book Appointment"
  • Button link — where the button should point (e.g. #contact)
  • Layout — Left / Center / Right alignment
  • Background image — upload an image for the hero background (with gradient overlay)
Tip: A dark overlay is automatically generated for hero background images to keep text readable. Without a background image, the section uses the background color setting.

Services

Display your services or products in card format.

Fields

  • Section title — e.g. "Our Services"
  • Subtitle — optional supplementary text
  • Columns — 2, 3 or 4 column layout

Card fields

  • Name — service name
  • Description — short description
  • Price — optional, e.g. "$50"
  • Icon — choose from 25 SVG icons (scissors, car, heart, etc.)

Use the "+ Add Service" button to expand the list, and the card's "Delete" button to remove items.

About

Introduction section with text and optional image.

Fields

  • Title — e.g. "About Us"
  • Text — your business story, values
  • Layout — Text left (image right), Text right (image left), Text only
  • Image — uploadable image next to the text

Gallery

Image gallery in grid layout. Ideal for showcasing your work, products, or business.

Fields

  • Title and subtitle
  • Columns — 2, 3 or 4 columns
  • Images — uploadable images, each with optional alt text
Tip: Images are displayed in 4:3 ratio, automatically cropped. Try using similarly sized images for the best result.

Testimonials

Display customer testimonials with star ratings.

Fields per testimonial

  • Name — customer name
  • Position — optional, e.g. "Returning customer"
  • Review — the review text (displayed in quotes)
  • Rating — 1-5 stars
  • Avatar — optional photo

Team

Team member showcase with photos, positions, and contact info.

Fields per member

  • Avatar — displayed as a circle
  • Name and Position
  • Bio — short introduction
  • Phone and Email — displayed as clickable links

Featured Offers

Highlight promotions and discounts. Strikethrough original price + sale price + badge.

Fields per offer

  • Offer name and Description
  • Original price — displayed with strikethrough
  • Sale price — highlighted, large text
  • Badge — e.g. "SALE", "-20%", "NEW" — displayed rotated in corner

FAQ (Frequently Asked Questions)

Expandable question-answer list. Visitors can click to open answers.

Fields per question

  • Question — the clickable header
  • Answer — the expandable content
SEO tip: The FAQ section improves search optimization because Google can display it as a FAQ rich result.

CTA Banner

An attention-grabbing, action-driving banner. Ideal in the middle or towards the end of the website.

Fields

  • Headline — e.g. "Ready?"
  • Text — short motivational text
  • Button text and Button link
  • Background color — custom color for the CTA banner

Statistics

Highlight numbers and achievements in a large, attention-grabbing format.

Fields per statistic

  • Value — e.g. "500+", "10 years", "98%"
  • Label — e.g. "Happy customer", "Experience"

Pricing

Compare pricing plans in card format. Featured plan is larger with a border.

Fields per plan

  • Plan name, Price, Period (e.g. "/mo")
  • Features — one feature per row, with checkmark icon
  • Featured — checkbox, featured plan is larger and bordered
  • Button text

Contact

Contact information and optional contact form.

Fields

  • Title and Text
  • Show form — toggle on/off
  • Formspree endpoint — if the form is enabled (see Formspree section)

Contact info (phone, email, address, opening hours) comes from the Styles → Business panel.

Partner Logos

Display partner and reference logos. Grayscale by default, color on hover.

Fields per logo

  • Logo — uploadable image
  • Alt text — partner name
  • Link URL — optional, clickable link

Color Palettes

Choose from 8 predefined palettes in the Styles panel:

Emerald
Blue
Rose
Amber
Light
Ocean
Purple
Forest

Custom Colors

Below the palette, fine-tune every color with custom color pickers: primary, secondary, accent, background, surface, text, textMuted.

Fonts

You can set two font types: Heading and Body. Available Google Fonts:

  • Inter — modern, clean (default)
  • Open Sans — readable, widely used
  • Roboto — Google Material style
  • Playfair Display — elegant serif
  • Montserrat — geometric, bold
  • Lora — classic serif
  • Poppins — rounded, friendly
  • Raleway — light, airy

Section Styles

At the bottom of each section editor, you'll find style controls:

  • Background color — color picker, "X" button resets to default
  • Text color — overrides the section's text color
  • Text alignment — Left / Center / Right
  • Padding top/bottom — inner spacing, e.g. "4rem", "80px"
  • Margin top/bottom — outer spacing
Tip: CSS units can be used: rem, px, em, vh. Example: 4rem = 64px, 2rem = 32px.

Icons

Choose from 25 SVG icons for the Services section cards:

Scissors, Car, Dining, Heart, Hammer, Book, Camera, Star, Clock, Shield, Lightning, Team, Phone, Email, Location, Gift, Shipping, WiFi, Wrench, Palette, Music, House, Briefcase, Check

The icons are Lucide-style, 24x24 SVG format, and automatically receive the primary color.

Image Management

Supported formats

  • WebP — recommended, small size, good quality
  • AVIF — smallest file size
  • PNG — for transparent backgrounds
  • JPEG — photos

Size limit

Maximum 5 MB per file.

Where can you use images?

  • Hero background image
  • About section image
  • Gallery images
  • Team member avatars
  • Testimonial avatars
  • Partner logos
  • Business logo
Deletion: If you remove an image from the editor, it's also deleted from the server — no clutter. This action is irreversible.

SEO & Meta Data

Edit in the Styles → SEO / Meta section:

  • Page title — the text displayed in the browser tab and Google results
  • Meta description — the short description shown in Google results (max. 160 characters recommended)

Open Graph (og:title, og:description) meta tags are automatically generated from these.

Social Media Links

Add social media links in the Styles → Footer / Social section. Supported platforms:

  • Facebook, Instagram, TikTok, YouTube, LinkedIn, X (Twitter), GitHub, Website

Links appear as SVG icons in the footer, highlighted with the primary color on hover.

How to add?

  1. Click the "+ Social link" button
  2. Select the platform from the dropdown
  3. Paste the full profile URL (e.g. https://facebook.com/yourbusiness)

Contact Form (Formspree)

The Contact section form uses Formspree. It's a free form backend — no need to run your own server.

Setup steps

  1. Register at formspree.io (free plan is sufficient)
  2. Create a new form on the dashboard
  3. Copy the endpoint URL — format: https://formspree.io/f/xxxxx
  4. In the Builder, select the Contact section
  5. Paste the endpoint URL into the "Formspree endpoint" field
Tip: Formspree's free plan gives you 50 submissions per month. You'll receive messages via email and can view them on the Formspree dashboard.
Without Formspree: If you don't provide an endpoint, the form will be displayed but submission won't work — a warning message will appear for visitors.

Download & Hosting

Download

Clicking the "Download" button in the toolbar gives you a standalone .html file. It includes:

  • All CSS inline (no external files)
  • Google Fonts loading
  • Responsive display (mobile + desktop)
  • Smooth scroll navigation
  • Mobile hamburger menu

Where can you host it?

  • GitHub Pages — free, simple
  • Netlify — free tier, drag & drop deploy
  • Vercel — free, automatic HTTPS
  • Any web hosting — upload via FTP
  • Own server — Apache, Nginx
Tip: Images (if uploaded to Vercel Blob) load from external URLs. If you move to your own hosting, you'll need to download the images and update the URLs in the HTML.

Keyboard Shortcuts

CommandKey
UndoCtrl + Z
RedoCtrl + Y vagy Ctrl + Shift + Z

FAQ (General)

How many websites can I create?

Currently, we store one website per account. If you want a new one, regeneration will overwrite the previous one.

Can I lose my work?

Auto-save saves changes every 2 seconds. You can undo up to 30 steps with Ctrl+Z. If you close the browser, the last saved state is preserved.

Can I use custom fonts?

Currently you can choose from 8 Google Fonts. Custom font support is coming in the future.

How do I modify form fields?

Form fields are currently fixed (Name, Email, Message). Custom field support is coming in the future.

Does the editor work on mobile?

The editor is optimized for desktop. The preview can be viewed on mobile, but editing is more comfortable on a larger screen.

What happens if I cancel my subscription?

Your existing website remains and will be downloadable until the end of the period. After that, the Builder won't be available, but the downloaded HTML file is yours forever.