Documentation

Master SpeakSite in minutes.

Everything you need to build, edit, and publish stunning websites with AI-powered tools. From your first page to advanced multi-language setups.

Get Started Explore Tools

Quick Navigation

Jump to any section.

Chat Options

Send options, multi-language, multi-page, form embedding, and image attachments.

Interaction Modes

Select, Edit, Draw, View, and Navigate modes for the preview panel.

Toolbar & Tools

Pages, Menu, Blog, Forms, SEO, Styles, Media, Config, and more.

Top Bar & Header

Viewport selector, Git operations, version history, publishing, and sharing.

Git & Publishing

Version control, branching, commits, push/pull, and site deployment.

Advanced Features

Google Ads, GTM, AI Queries, Queue management, and bug reporting.

Chat Interface

Send Options & Attachments.

Send Options Panel

The collapsible "Send Options" panel appears below the chat text area whenever options are available for your current project.

Apply in All Languages

Appears when your page has configured translations. After applying changes to the current page, the system automatically translates those changes to all other language versions.

  • Translates the final result to all language versions
  • Shows estimated additional token cost
  • Does not read other language versions as context

Multi-page

Appears when your project has more than one page. Allows the AI to read and modify any page, not just the current one.

  • Read any page as reference across your project
  • Modify shared files like layouts, components, and styles
  • Smart behavior: only touches relevant pages

Embed Forms & Attach Images

Seamlessly insert forms and attach visual references to your AI instructions.

Embed Form

Select a form from the Forms module and let the AI embed it into your page. Just pick the form from the dropdown and tell the AI where to place it.

Attach Images

Three ways to add reference images:

  • Clip button — Open file picker to select images
  • Ctrl+V / Cmd+V — Paste from clipboard
  • Drag & drop — Drop images onto the chat area

Interaction Modes

Five ways to interact.

The Modes Bar sits at the bottom of the chat. Each mode changes how you interact with the live preview of your website. Your selected mode is remembered between sessions.

Select

Default mode

Click any element in your site preview to select it. Selected elements get a blue border and a preview badge above the chat.

  • Quick actions: Delete, Edit, Duplicate, View Code
  • Multi-select: Hold Alt or Shift to select multiple elements

Edit Text / Image

Direct editing

Edit text, images, and links directly on the preview without AI. Changes are saved instantly with zero credit cost.

  • Text: Rich editor with bold, italic, underline, links
  • Images: Replace image or edit alt text

Draw

Visual annotation

Draw freehand on the preview to highlight areas. Optionally dictate instructions by voice while drawing.

  • Yellow semi-transparent marker strokes
  • Auto-captures the marked area as a reference image

View Only

Live preview

Your site works like a real website — navigate, scroll, interact with forms and test links. The chat area is hidden so you can see the full preview.

Navigate

Follow links

Internal links navigate within the editor. External links open in new tabs. Anchor links scroll normally. The chat stays visible for giving instructions while browsing.

File Structure

Toggle panel

Not a mode — it's a toggle button that opens a side panel showing your project's complete file tree. Works alongside any of the five modes above.

Toolbar

All your tools, one sidebar.

On desktop, the toolbar is a vertical sidebar on the left. On mobile, it becomes a floating grid accessible from the bottom-right corner. Only one panel opens at a time.

Core Management Tools

Every tool you need to manage content, design, and performance — all accessible from the sidebar.

Pages

Create, edit, manage pages. Handle broken links and redirects. Multi-language support.

Menu

Visual editor with drag & drop, AI generation, style presets, and import from HTML.

Blog

Create posts with categories, scheduling, featured images, and multi-language versions.

Forms & Leads

Build forms, capture leads, detect spam, export CSV, and configure SMTP notifications.

Languages

Multi-language support with AI translation, URL strategies, progress tracking, and language selector widget.

SEO

Meta titles, descriptions, keywords, robots directives, Open Graph images, canonical URLs, and Google preview.

Styles

AI style recommender, color palettes, typography settings, custom fonts, and live preview.

Media

Upload files, grid/list views, sorting, multi-select, drag-to-editor, and file info with copy path.

Config

Favicon, site title, custom domain (Pro/Agency), sitemap, robots.txt, AI context, env variables, and Composer dependencies.

AI Queries

Ask AI about your site: SEO tips, accessibility improvements, performance, code review, and content feedback.

Query Queue

Monitor in-progress, pending, and completed AI operations. Cancel, retry, report issues, and view file changes.

Top Bar

Header controls at a glance.

The top bar contains navigation, viewport selector, Git operations, version history, and publishing controls.

Desktop Layout

[Back] [Name/Slug] [Viewports] [SuperAdmin] [Badges] ---- [Share] [Git] [History] [View Live] [Publish]

Mobile Layout

[Back] [Name] ---- [History] [Publish] [Menu ...]

Viewport Selector

Preview your site at different screen sizes:

  • Mobile: 375px  |  Tablet: 768px
  • Desktop: 1024px  |  Full: 100%

Share & Collaborate

Invite team members as Editors or Viewers. Only the project owner sees this option.

  • Editor: Can edit pages and publish changes
  • Viewer: Read-only access, no editing

Version History

Browse all snapshots ordered by date. Each shows timestamp and file count.

  • Restore: Roll back with automatic backup
  • Snapshots auto-created before each publish

Deployment

Git operations & publishing.

Full Git Integration

Manage your repository directly from the editor. Branch, commit, push, pull, and create PRs — all without leaving SpeakSite.

  • Branch management: Switch branches or create new ones
  • Commit: Stage changes with custom messages
  • Push & Pull: Sync with GitHub seamlessly
  • Pull Requests: Create PRs directly in GitHub
  • Auto-refresh: Status updates every 30 seconds

Publishing Your Site

The Publish button adapts its state to show you exactly what's happening:

1. Optimize

Images are compressed and optimized

2. Backup

Automatic snapshot for safety

3. Upload

FTP upload with live progress

4. Live!

Site is published and accessible

Advanced

Power features for pros.

Google Tag Manager

Connect your GTM account, sync resources, and get AI-powered tracking recommendations.

  • Verify credentials before connecting
  • View variables, triggers, and tags
  • AI recommendations for better tracking

Google Ads

Manage campaigns directly from SpeakSite with AI-powered analysis and optimization.

  • 30-day performance dashboard at a glance
  • AI campaign builder from scratch
  • Pause/resume campaigns and manage budgets

Status Badges

Context-aware indicators that appear temporarily after AI operations:

  • yellow Auto-repair: "Auto-repaired X changes"
  • green Token usage: "Used 15,432 tokens" with pulse animation
  • blue Translation sync: success or partial failure status

Report a Bug

Found something wrong? Send a detailed report with automatic context collection.

  • Attach screenshots via drag & drop or Ctrl+V
  • Auto-captures browser, screen size, and project info

Ready to Build

Start creating now.

You have all the knowledge you need. Open the editor, select a mode, and let AI transform your vision into a stunning website.

Sign Up Free Log In