XSiteBuilder user guide

XSiteBuilder lets you build, edit and publish websites in your browser — no code needed. Start from a ready-made template, import a site you already have, copy the layout of your old website, or (optionally) describe your business and let AI write a first draft.

The videos in this Help Center have a spoken voiceover and on-screen captions, so you can follow along with the sound on or off.

How your account is organised

Workspaces. Everything lives in a workspace: your sites, your team and your plan. Most people only ever need one. Agencies often make one workspace per client.

Sites. A site is a collection of pages with its own web address. How many sites you can have depends on your plan.

Pages. Each page is edited visually in the editor. The home page is always index.html.

Draft and live

Everything you change is saved as a draft. Visitors only see your changes after you press Publish — so you can work on a site for days without anyone seeing a half-finished page.

Where to go next

• Create your first site — a five-minute walkthrough.
• A tour of your dashboard — what each screen is for.
• Editor basics — how to change text, pictures and layout.

Sign up

Go to the sign-up page (https://build.xsitebuilder.com/register):

1. Your name
2. Email — you'll use it to sign in.
3. Password — at least 8 characters.
4. Click Create account.

You're signed straight in and a workspace is created for you.

Your welcome email

We also send a welcome email with your login details. Keep it somewhere safe. If it hasn't arrived within a few minutes, check your spam or promotions folder.

Bought a plan before signing up? Your account was created for you, and your welcome email contains a link to choose your password. The link works for 7 days — after that, use Forgot your password? on the sign-in page.

Sign in

Go to https://build.xsitebuilder.com/login, enter your email and password, and click Sign in. You can sign in on as many computers and browsers as you like.

Signing out

Click Sign out in the top-right corner of any page. Always do this on shared or public computers.

Forgotten your password? See Resetting your password.

After signing in you land on your workspace's Sites page.

The bar along the top is always there: the logo (back to your sites), your workspace name (click it to switch workspaces), Sites, Settings, Help, your plan, your name and Sign out.

The Sites page

Each site has a card with three buttons:

1. Open editor — start editing pages.
2. Manage — the site's own page (below).
3. View live ↗ — the published site, once it's live.

On the right you create new sites: from a template, with AI (optional), or by copying a website.

A site's page ("Manage")

1. Open editor.
2. Publish site / Publish changes — make your saved changes visible to visitors.
3. The site's web address — click Copy to copy it.
4. Pages — every page, with Edit, Preview, History and Delete.

Further down the same page: Settings (name, address, custom domain, form emails), Form messages, Import HTML, Copy a website, Export and the Danger zone.

Workspace settings

Click Settings in the top bar for your workspace name, your team, your plan and billing, the email server for contact forms and the optional AI connection.

Look out for the small ? buttons next to headings — each one opens the matching help article in a new tab.

Prefer to watch? Here's the whole thing in under a minute:

1. Create the site

On the Sites page, use the New site card on the right:

1. Site name — for example "Bella's Bakery". You can change it later.
2. Site address — optional. Lowercase letters, numbers and dashes, like bellas-bakery. Leave it blank and we'll make one from the name.
3. Start from — pick a template. Templates with several pages say so, e.g. "(3 pages)".
4. Click Create site.

The site's page opens. Click Open editor.

2. Make it yours

• Change text: double-click any text and type.

  

• Change a picture: double-click it and upload your own photo — see Images and media.

• Add sections: click or drag them in from Add on the left. See Adding sections.

• Other pages: pick them from the page menu at the top left, or add one with ＋ Page.

Your work saves itself every few seconds — watch for All changes saved in the toolbar.

3. Check it on a phone

Click Mobile in the toolbar to see how the page looks on a phone. See Mobile and tablet views.

4. Publish

Click Publish. A green message confirms it, with your site's address:

Want your own domain, like www.bellasbakery.com? See Using your own domain.

Each workspace has its own plan. You can see yours in the top bar and under Settings → Plan & billing, along with how much storage you're using.

Plan	Price	Sites	Pages per site	Storage	Team members	Custom domain
Free	$0	1	5	50.0 MB	1	—
Pro	$19/mo	10	100	2.0 GB	5	Yes
Agency	$59/mo	100	500	20.0 GB	25	Yes
Agency Whitelabel	$99/mo	200	500	20.0 GB	25	Yes

What happens at a limit

• Sites: the New site card tells you when you've reached your plan's limit. Upgrade, or delete a site you no longer need.
• Pages: you can't add more pages to that site until you delete one or upgrade.
• Storage: uploads stop working until you delete unused files or upgrade. Storage covers images, videos, fonts and other files.
• Team members: you can't invite more people until a seat is free.

Nothing is ever deleted because you hit a limit.

To change plan, see Upgrading your plan.

Open the editor from Open editor on the Sites page, or Edit next to a page on the site's page. Here's a one-minute tour:

The four areas

1. The toolbar: pages, screen sizes, saving and publishing.
2. Add, Layers and Site styles (left): sections and elements to add, an outline of the page, and your site's colours and fonts.
3. Your page, exactly as visitors will see it. Click to select, double-click text to type.
4. Design, Settings and Advanced (right): change whatever you've selected.

The toolbar

1. Your logo: back to your dashboard.
2. Add: show or hide the left-hand panel (for more room to work).
3. Page menu: switch to another page of the site.
4. ＋ Page: add a page. See Adding and managing pages.
5. Import: bring in an HTML file, a .zip, or pasted code.

1. Desktop / Tablet / Mobile: see the page at different screen sizes. See Mobile and tablet views.
2. ↶ ↷: undo and redo.
3. Save status: "All changes saved", "Unsaved changes" or "Saving…".
4. ?: opens this Help Center.
5. ⋯ More: show outlines around every element, or view the page's code.
6. Preview: the page as visitors see it, in a new tab.
7. Save: save now (it also happens automatically).
8. Publish: put your changes live.

The panels

On the left:

• Add: ready-made sections (with pictures, so you can see them first) and single elements like text, images and buttons. See Adding sections.
• Layers: an outline of everything on the page. It's handy for picking something that's hard to click, or for dragging things into a new order.
• Site styles: your site's colours and fonts, changed on every page at once. See Site colours and fonts.

On the right, for whatever you've selected:

• Design: text, colour, background, spacing, corners, shadow and links, in plain words. See Changing styles.
• Settings: details like a picture's description, a video's address, or a form's options.
• Advanced: every style setting there is, for when you need more control.

The Design panel shows what you've selected and the items around it at the top, for example Container › Row › Column › Heading. Click any of them to select it instead.

Selecting, moving and deleting

Click anything to select it. A blue outline and a small toolbar appear above it:

1. Drag handle: drag it to move the item somewhere else.
2. Its name, e.g. "Heading". Click it to select the item it sits inside (its "parent").
3. Edit text for text, Replace for a picture, or Link for a link or button.
4. Move up and Move down: swap it with the item before or after it.
5. Duplicate: put a copy just after it.
6. Delete: remove it.

Double-click text to type. A text toolbar lets you add bold, italic, underline and links.

Keyboard shortcuts

Shortcut	What it does
Ctrl/⌘ + S	Save now
Ctrl/⌘ + Z	Undo
Ctrl/⌘ + Shift + Z	Redo
Ctrl/⌘ + C, Ctrl/⌘ + V	Copy and paste the selected item
Delete	Delete the selected item (when you're not typing in it)

1. Open Add on the left (click Add in the toolbar if the panel is hidden).
2. Under Sections, pick a type like Hero, Pricing or Testimonials, or search for one.
3. Click a section to add it below the one you've selected (or at the end of the page). Or drag it onto the page, and a green line shows where it will land.

The new section is selected and scrolled into view, ready for your text and pictures.

1. Search sections by name or type.
2. Section types: All, Navigation, Hero, Features, Pricing, Testimonials, FAQ, Footer and more.
3. A picture of each section, so you can see it before you add it.

Elements

Switch to Elements for single pieces you can put anywhere:

• Basics: text, link, image, video, map, columns, quote and custom code.
• Forms, including a ready-to-use Contact form.

Drag an element into a column or section to put it inside it, and watch the green line.

Tips

• To move a section, select it and use Move up and Move down on its toolbar. Or drag the handle on the left of the toolbar, or drag it in Layers.
• To duplicate a section you've already styled, select it and click Duplicate.
• The Custom code element takes embed code from other services, such as booking widgets, maps and social feeds. It runs on the published site, not in the editor, so use Preview to see it working.

1. Click the item you want to change.
2. In Design on the right, change what you like. Changes show straight away.

1. What's selected, and the items around it. Click one to select it instead.
2. Text: font, size, weight, style, alignment, line spacing and colour.
3. Background: a colour or a picture.

Further down are Spacing, Shape (rounded corners and shadow) and Visibility. For a link or button there's Link too, and for a picture, Image.

The colour circles are the colours your page already uses, so everything stays on-brand. The rainbow circle picks any other colour.

Where to find things

To change…	In Design, open
Text font, size, colour, alignment	Text
Background colour or picture	Background
Space inside or around an item	Spacing
Rounded corners, shadow	Shape
Where a link or button goes	Link
Hide something on phones	Visibility

To change the colours or fonts on every page at once, use Site colours and fonts instead.

Advanced

Advanced has every style setting there is (sizes, borders, positions, flex layouts and more) for when Design doesn't have what you need.

At the top are the item's classes: shared style names. While they're ticked, a change you make in Advanced applies to every item that shares them, which is handy for making all your buttons match. To change just this one item, untick the classes first. (Design always changes just the item you've selected.)

Phones and tablets

Styles follow the screen size you're looking at:

So if a heading is too big on phones, click Mobile, select it, and make it smaller there. The desktop version stays as it is. See Mobile and tablet views.

Replace a picture

1. Double-click the picture on the page (or select it and click Replace on its toolbar). Your media library opens.
2. Drop photos onto the upload area (or click it to choose files).
3. Double-click the photo you want to use.

1. The upload area.
2. Your site's photos — reuse them on any page of the site.

Upload limits

• Up to 25 MB per file and 100 MB per upload.
• Your total depends on your plan's storage.
• JPG, PNG, GIF, WebP and SVG pictures, MP4 and WebM videos, audio and fonts are all fine.

Big photos slow your site down. For most websites, photos about 2000 pixels wide and under 500 KB look great. Free tools like Squoosh or TinyPNG can shrink them.

Background images

Many sections use a background picture rather than a normal one. Select the section and, in Design → Background, click Add image (or Change image). Remove takes it away again.

Picture descriptions (alt text)

Select a picture and fill in Description for screen readers in Design → Image. It also helps search engines understand the picture.

Video

Add Video from Add → Elements, then open Settings on the right to choose an uploaded video or paste a YouTube or Vimeo link.

Add a page

1. In the editor, click ＋ Page.
2. Page name — what you call it, e.g. "Our menu".
3. File name — the page's web address. Leave it blank to make one from the name (our-menu.html), or use folders, like blog/first-post.html.
4. Start from — the first option, Blank page with your site's header and footer, gives you an empty page that already matches the rest of your site. You can also start from a template, or write it with AI.
5. Click Create page.

Switch pages

Use the page menu at the top left of the editor. Unsaved changes are saved before switching.

Link pages together

1. Select the link or button (or select some text and click the link button on the text toolbar).
2. In Design → Link, type the page's file name, e.g. contact.html (or index.html for the home page), and press Enter.

To link to another website, type its full address starting with https://, and tick Open in a new tab if you like.

See, edit or delete pages

Every page is listed on the site's page (Manage):

1. Edit — open it in the editor.
2. Preview — see your latest draft.
3. History — earlier versions (more).

Delete removes a page for good. The home page (index.html) can't be deleted. Remember to remove links to a deleted page from your menus.

How many pages you can have depends on your plan.

Use Desktop, Tablet and Mobile in the middle of the editor toolbar. The page is shown at that screen width, just as a visitor's device would show it.

Fixing things on mobile

Most templates already adapt to small screens. If something looks wrong on a phone:

1. Click Mobile.
2. Select the item that looks wrong.
3. Change it in Design, for example a smaller text size or less spacing. The panel reminds you that you're changing the Mobile view.

Changes made in Mobile view only apply to phones; the desktop design isn't affected. The same goes for Tablet.

Hiding something on phones

Click Mobile, select the item, and tick Hide on phones under Design → Visibility. It stays visible on bigger screens. Hidden items can still be found, and selected, in Layers.

Checking on a real phone

Publish, then open your site on your phone:

Autosave

The editor saves your work a few seconds after you stop making changes. Keep an eye on the status in the toolbar, next to undo and redo:

• All changes saved — you're up to date.
• Unsaved changes — a save will happen in a moment.
• Saving…
• Save failed — check your internet connection, then click Save.

You can save any time with Save or Ctrl/⌘ + S. If you try to close the tab with unsaved changes, your browser warns you.

Saving never changes your live site — only Publish does. See Publishing your site.

Version history

Each page keeps its last 30 saved versions.

1. Go to the site's page (Manage).
2. Click History next to the page.
3. Click Restore next to the version you want.

The restored version becomes your current draft — nothing is lost, the version you replaced stays in the list. Publish when you're happy with it.

Click Preview in the editor toolbar. Your latest changes are saved and the page opens in a new tab, just as a visitor would see it — with menus, sliders, animations and embedded widgets working.

You can also click Preview next to any page on the site's page (Manage).

Previews show your draft, and only people signed in to your workspace can open them. To show someone else, publish the site.

Why does the preview look different from the editor?

The editor pauses your page's scripts so you can click and edit things safely. Preview always shows the real thing. See The editor looks different from my live site.

In the editor, open Site styles on the left. (With nothing selected, the Site colours & fonts button on the right opens it too.)

1. Colours: the colours your site uses most.
2. Fonts: one for headings and one for body text.
3. Changed colours: what you've changed, with Undo.

Change a colour everywhere

1. Click the colour you want to change, for example your brand blue.
2. Pick the new colour, or type its code (like #16a34a).
3. Click Change everywhere.

Every button, heading, link and background that used the old colour now uses the new one, on every page of the site. To go back, click Undo next to it under Changed colours.

Fonts

Choose a font for Headings and one for Body text (paragraphs, menus and buttons). There's a preview underneath. Choose The theme's font to go back to the original.

Good to know

• Changes save straight away and show on every page in the editor and in Preview. Your live site changes when you Publish.
• Anything you styled on a single item yourself (in Design or Advanced) keeps its own colour and font.
• Restoring an older version of a page from its history keeps your current site colours and fonts.

For a new site

On the Sites page, the New site card has a Start from menu:

Templates are grouped by category. Those with more than one page say so, e.g. "(3 pages)" — all of those pages are created for you.

For a new page

In the editor, click ＋ Page and choose from Start from:

The first choice, Blank page with your site's header and footer, matches the rest of your site. Other templates also get your site's header and footer automatically, so every page looks like it belongs.

Making a template your own

A template is just a starting point — everything can be changed: text, pictures, colours, fonts and the order of sections. Delete the sections you don't need and add new ones from Add. To change the colours and fonts of the whole site, use Site colours and fonts. See Editor basics.

You can import:

• A single .html page (up to 10 MB).
• A .zip of a whole website or an HTML template you've bought — up to 1 GB. Pages, CSS, JavaScript, images and fonts keep their folder structure, so links between them keep working.

From the site's page

1. Go to the site's page (Manage) and find Import HTML.
2. Choose your file.
3. Click Import.

The new pages appear in the Pages list straight away:

From the editor

Click Import in the toolbar. Upload a file, or switch to Paste code to paste HTML (with optional <style> tags) straight into a page.

Pages with the same name

By default, if a page with the same file name already exists, the imported one is added alongside it with a number (e.g. about-2.html). Tick Replace pages that have the same file name to overwrite them instead — you can still get an old version back from History.

Tips for .zip files

• The .zip can hold the site at the top level or inside one folder — both work.
• Make sure the home page is called index.html.
• Pages count towards your plan's page limit, and files towards your storage. See Plans and limits.

If an import fails, see Import problems.

Only copy websites you own or have written permission to use. Text, photos, logos and designs on other people's websites are protected by copyright and trademark law. Every copy is recorded with your account and the address you copied.

Watch it in action:

Where to find it

• As a new site: on the Sites page, open Copy a website on the right.
• Into an existing site: on the site's page (Manage), scroll to Copy a website.

Choose what to copy

Layout only (recommended) keeps the structure and styling, and swaps all text, photos, logos and videos for placeholders — a unique page ready for your own content:

Full copy keeps the original content — for moving a site you own. You'll need to replace most of it before you can publish; see Making copied pages your own.

Choose how many pages

Pages copies just the address you entered, or that page plus up to 19 pages it links to (20 in total), starting with the main menu.

Tick the box to confirm you have permission, then click Copy into a new site (or Copy website). It takes from a few seconds to a few minutes for big sites — keep the tab open.

What can't be copied

• Things that run on the website's own server: shop checkouts, logins, search, booking systems and databases. You get how they look, not how they work.
• Content that only appears after scrolling or clicking may be missing.
• Some sites block copying altogether.

Pictures missing? See Missing images.

When you copy a website with Full copy, its pages still contain someone's original text and photos. To protect website owners, a site with copied pages can only be published once most of that content has been replaced:

• At least 60% of the original text must be changed.
• At least half of the original photos must be replaced.

Checking your progress

On the site's page (Manage), the Copied pages section shows each copied page:

• Original text left and Original photos left — red until they're low enough.
• Ready once a page passes, or Change more if it doesn't yet.

When every page shows Ready, you can publish.

Tips

• Rewrite headings and paragraphs in your own words — small edits to a sentence still count as the original.
• Replace photos with your own (double-click a picture). See Images and media.
• Deleting sections you don't need counts too.
• Pages copied with Layout only don't need any of this — they start with placeholders.

Your edits are saved as a draft. Visitors see the published version, which only changes when you publish.

Publish

Either:

• Click Publish in the editor toolbar (it saves first), or
• Click Publish site (or Publish changes) on the site's page (Manage).

Publishing makes all pages of the site live at once, and the site gets a green Live badge.

Unpublished changes

After the first publish, the site's page tells you when there are saved changes that visitors can't see yet:

1. A reminder that some changes aren't live yet.
2. Publish changes puts them live.
3. Each changed page is marked unpublished changes.

Take a site offline

On the site's page, under Danger zone, click Unpublish. Visitors will see "not found"; your drafts are kept and you can publish again any time.

A custom "page not found"

Add a page with the file name 404.html and publish. Visitors who follow a broken link will see it instead of the standard message.

Every site gets a free address based on its site address (for example bellas-bakery). The full link is at the top of the site's page (Manage) — click Copy to copy it.

Change the address

1. Go to the site's page (Manage) → Settings.
2. Change Site address (1) — lowercase letters, numbers and dashes, 3 to 48 characters.
3. Click Save settings.

The old address stops working straight away, so update any links you've shared. Only workspace owners and admins can change this.

Want an address like www.yourbusiness.com? See Using your own domain.

Custom domains are available on paid plans. You'll need a domain name from a registrar such as GoDaddy, Namecheap, Cloudflare or Squarespace Domains.

Step 1 — Add a DNS record at your domain provider

Sign in where you bought your domain and find its DNS settings. Add this record:

Type	Name / Host	Value / Points to
CNAME	www	build.xsitebuilder.com

If there's already a www record, edit it instead of adding another.

Step 2 — Enter the domain in XSiteBuilder

1. Go to the site's page (Manage) → Settings.
2. Type your domain in Custom domain, e.g. www.yourbusiness.com.
3. Click Save settings.

That's it. The first time someone visits, a free security certificate (HTTPS) is set up automatically — the very first visit can take a few extra seconds.

Good to know

• DNS changes can take anywhere from a few minutes to 48 hours to reach everyone.
• Most providers don't allow a CNAME on the bare domain (yourbusiness.com without www). Use your provider's redirect or forwarding feature to send the bare domain to https://www.yourbusiness.com.
• Your free address keeps working too.
• Make sure the site is published.

Still not working? Check the record with a free tool such as dnschecker.org — the www name should point to build.xsitebuilder.com.

On the site's page (Manage), find Export:

• Download draft (.zip) — your latest saved version.
• Download published (.zip) — exactly what's live right now.

The .zip contains every page as an HTML file plus all images, CSS, JavaScript and fonts, ready to upload to any web host.

Contact forms in an exported site keep sending to XSiteBuilder while the site exists here. If you delete the site, switch your forms to another service.

1. Go to the site's page (Manage) and scroll to Danger zone.
2. Type the site's address in the box exactly as shown.
3. Click Delete site and confirm.

This permanently deletes the site, its pages, version history, form messages and media. It can't be undone. To keep a copy, export it first.

Just want it offline for a while? Use Unpublish instead — nothing is deleted.

Only workspace owners and admins can delete sites.

Add the form

1. In the editor, open Add on the left and switch to Elements.
2. Under Forms, drag Contact form onto your page (or click it to add it below the selected section).
3. Change the heading, labels and button text if you like, then Publish.

That's all — the form is already connected. The Business starter template's contact page is connected too.

What visitors see

After sending, they see a thank-you message (or your own thank-you page — see below).

Reading messages

Messages appear on the site's page (Manage) under Form messages, newest first:

1. The form address — use it for your own forms.
2. A message, marked New until you click Mark all read.
3. Reply answers by email. Delete removes a message.

Every message is also emailed to you:

To choose who gets these emails, see Who receives form emails.

Using your own form design

Any form on your site can send messages here. Select the form, open Settings on the right and set:

• Action — the address shown under Form messages (click Copy next to it).
• Method — POST.

Give every field a name (e.g. name, email, phone, message) — that's the label you'll see in the message. A field called email becomes the reply-to address.

Optional extras

• Your own thank-you page: add a hidden field named _redirect with a page on your site as its value, e.g. thanks.html.
• Extra spam protection: add a hidden, empty field named _gotcha. People can't see it, but spam robots fill it in and their messages are ignored. (The Contact form block already has one.)

Each visitor can send up to 5 messages every 10 minutes, which stops floods of spam.

By default, contact-form messages are emailed to the workspace owner.

To send them somewhere else:

1. Go to the site's page (Manage) → Settings.
2. In Send form messages to (3), enter one or more addresses separated by commas — up to 5.
3. Click Save settings.

Each site can have different recipients. Every message is also kept under Form messages on the site's page, even if an email doesn't arrive.

Want the emails to come from your own address? See Sending form emails through your own email account.

Not getting them? See Form emails not arriving.

Normally contact-form emails are sent by XSiteBuilder. You can send them through your own email account instead: they then come from your own address and are less likely to land in spam.

Set it up

Go to Settings → Email for contact forms (optional):

1. Mail server (SMTP host) — see the table below.
2. Port
3. Security
4. Username — usually your full email address.
5. Password — for Gmail, an app password (below).
6. From address and From name — who the emails appear to come from.
7. Leave Send a test email … after saving ticked and click Save and test.

We connect to your mail server before saving, so you'll know straight away if something's wrong. Your password is stored encrypted. Only workspace owners and admins can change this, and it applies to every site in the workspace.

Common settings

Provider	Server	Port	Security
Gmail / Google Workspace	smtp.gmail.com	587	STARTTLS
Microsoft 365 / Outlook	smtp.office365.com	587	STARTTLS
Zoho Mail	smtp.zoho.com	465	SSL/TLS
Your web host	ask your host (often mail.yourdomain.com)	465 or 587	SSL/TLS or STARTTLS

Gmail and Google Workspace need an app password, not your normal password: turn on 2-Step Verification in your Google Account, go to Security → App passwords, create one, and paste the 16-letter code into Password.

Microsoft 365 mailboxes may need "Authenticated SMTP" turned on by your Microsoft 365 administrator.

Allowed ports are 25, 465, 587 and 2525.

If your mail server fails

If your server rejects a message, we send it through XSiteBuilder instead so you don't miss it. The message on the site's page is then marked "sent via … — your mail server failed", with the reason.

Stop using it

Click Stop using it in the same section. Emails go back to being sent by XSiteBuilder.

First, check the site's page (Manage) → Form messages. Every message is kept there, even if the email failed — nothing is lost.

If the message is there

Look at the small note next to the message's date:

• No note — the email was sent. Check your spam or junk folder, and add the sender to your contacts.
• "email not sent (…)" — the reason is in brackets. Often it's a wrong password or server setting in your own mail server settings.
• "sent via …" — your own mail server failed, so we sent it another way. The reason is shown.

Also check Settings → Send form messages to on the site's page — is the address right?

If the message isn't there

• Has the site been published since you added the form?
• Is the form connected? The Contact form block always is. Your own forms need the right Action and Method POST.
• Sent lots of test messages quickly? Each visitor can send 5 messages per 10 minutes.

Using Gmail?

Gmail needs an app password — your normal password won't work. See Sending form emails through your own email account.

AI is completely optional — everything else in XSiteBuilder works without it. Once connected, you can generate a whole site, or a single page, from a short description.

AI uses your own API key from an AI provider, so usage is billed by them directly to you.

Get an API key

• Anthropic (Claude): sign in at console.anthropic.com → API Keys → Create Key. Add some credit under Billing.
• OpenAI: sign in at platform.openai.com → API keys → Create new secret key. Add credit under Billing.

Copy the key — you'll only see it once.

Connect it

Go to Settings → AI (optional):

1. Choose your Provider.
2. Paste your API key.
3. Optionally click Load models and pick a Model — or leave it blank and a good one is chosen for you.
4. Click Connect.

We check the key works before saving. It's stored encrypted and never shown in full again:

Only workspace owners and admins can connect or change it. To stop using AI, click Disconnect.

What does it cost?

More capable models write better pages but cost more. A full 5-page site typically costs a few cents to a dollar on your provider's bill, depending on the model. One page costs a fraction of that.

Privacy

To write pages, the provider you chose receives your description, your site's name and its page names. When writing a single page, your home page is also sent so the new page can match its header, footer and style. Nothing else from your workspace is sent.

First connect your AI key. Then, on the Sites page, find Generate with AI on the right:

1. Describe the business — a few sentences: what you do, where, for whom, what makes you different. (Fill in the Site name above it too.)
2. Pages — Home is always included; tick the others you want.
3. Style and Colour — the overall feel and main colour.
4. Click Generate site.

It takes 1–3 minutes. Then the new site is ready to edit like any other — its contact page's form is already connected.

Tips for a better result

• Mention your location, services, prices, opening hours and tone of voice.
• Check every fact before publishing — AI can invent details.
• Replace the placeholder photos with your own. See Images and media.

With your AI key connected:

1. In the editor, click ＋ Page.
2. Enter a Page name (and a File name if you like).
3. Choose Write it with AI.
4. Describe what the page should contain.
5. Click Write page.

After a minute or so the new page opens, with your home page's header, footer and style. Edit it like any other page.

Go to Settings → Plan & billing:

1. Your current plan and how much storage you're using.
2. Click Upgrade under the plan you want, and complete the checkout that opens in a new tab. Use the same email address as your XSiteBuilder account.

Your plan updates automatically a few moments after payment — refresh the page to see it. The new limits apply straight away.

Only the workspace owner can upgrade, and each workspace has its own plan.

Changing or cancelling

• If you see Manage subscription & invoices, click it to change your card, download invoices, switch plan or cancel.
• Otherwise, use the link in your purchase receipt email. If you upgrade from one paid plan to another, remember to cancel the old one.

Moving to a smaller plan never deletes anything — but you can't add more sites, pages, files or members until you're back within its limits.

A workspace holds sites, a team and a plan. You get one when you sign up.

Switch between workspaces

Click the workspace name in the top bar and choose another one:

Create another workspace

Choose All workspaces from that menu (or go to https://build.xsitebuilder.com/dashboard), type a name under New workspace and click Create.

Each new workspace starts on the Free plan.

Rename a workspace

Settings → General: change the name and click Save.

Roles

Role	Can do
Owner	Everything, including billing. Each workspace has one owner.
Admin	Manage sites, settings and team members; publish.
Editor	Create, edit and publish sites and pages.
Viewer	Look at sites and previews only — can't make changes.

Invite someone

Go to Settings → Team:

1. Under Invite someone, enter their email address, choose a role and click Invite.
2. Under Pending invitations, click Copy invite link and send the link to them yourself — by email, chat or text.

When they open the link, they sign in or create an account with the email address you invited, and join the workspace. Invite links work for 7 days; Revoke cancels one.

How many members you can have depends on your plan.

Change a role or remove someone

In the Team list, pick a new role and click Update, or click Remove. To leave a workspace yourself, click Leave next to your own name.

Give a client their own login (Pro and Agency)

Building sites for clients? Give each client a login that opens only their own site:

1. Under Invite someone, enter the client's email address and choose Editor (they can edit and publish) or Viewer (preview only).
2. Choose Only these sites (client login) and tick their site.
3. Click Invite, then copy the invite link and send it to them.

A client login:

• sees only the sites you ticked, under Your sites;
• can't create sites, see your other clients' sites, or open workspace settings, team or billing;
• doesn't use one of your team seats. You can have up to one client login per site your plan allows (10 on Pro, 100 on Agency).

To change which sites someone can open, click Change site access under their name in the Team list. Choose Every site to make them a full team member again.

Contact-form messages go to the workspace owner by default. To send a client's form messages to them, put their email address in the site's Settings → Send form messages to.

1. On the sign-in page, click Forgot your password? (or go to https://build.xsitebuilder.com/forgot).

2. Enter your account's email address and click Send reset link.

   

3. Open the email and click Choose a new password. The link works once and expires after 2 hours.

   

4. Choose a new password (at least 8 characters).

For your security, resetting your password signs you out everywhere else.

To change a password you still know, follow the same steps.

Didn't get the email? Check your spam folder, and make sure you typed the email address you signed up with.

Account emails

These are always sent, because they're part of using your account:

• Your welcome email with your login details.
• Password reset links.
• Contact-form messages from your own sites.

Announcements

From time to time we may email news, tips and updates. Each announcement has an Unsubscribe link at the bottom. Click it and confirm:

You won't receive any more announcements, but you'll still get account emails. Changed your mind? Open the same link again and click Subscribe again.

On the Agency Whitelabel plan, the clients you give a client login see your brand, not XSiteBuilder's:

• your logo and name in the dashboard, the editor and the Help Center;
• your support email and your own Terms of Service and Privacy Policy links;
• emails to them (welcome and password reset) under your name, with replies going to you;
• optionally, your own dashboard address, such as sites.youragency.com.

Your own team still sees XSiteBuilder when they sign in at https://build.xsitebuilder.com, so nothing changes for you.

Set it up

1. Go to Settings → White label.
2. Enter your brand name (this switches the white label on) and, if you like, a support email.
3. Upload your logo: PNG, JPEG, WebP or GIF, up to 1 MB. A wide logo works best.
4. Add links to your own Terms of Service and Privacy Policy if you have them.
5. Click Save white label.

Use your own dashboard address (optional)

1. Pick an address on a domain you own, for example sites.youragency.com.
2. At your domain provider, add a CNAME record for that name pointing to build.xsitebuilder.com.
3. Type the address into Dashboard domain and click Save white label.

The Status line tells you when the record is in place; DNS changes can take up to an hour. The security certificate (HTTPS) is set up automatically the first time someone opens the address.

Once it's set up, invitation links you copy from Settings → Team open on your address. On your address, new accounts can only be created from your invitations.

Want client emails to come from your own email address too? Set up Settings → Email for contact forms. White-labelled emails use it when it's there.

The editor shows your page with its scripts paused. That keeps editing safe and lets you click on anything, but it means interactive parts look different while you edit:

• Sliders and carousels may show all their slides stacked, or only the first one.
• Animations (things that fade or slide in as you scroll) appear already in place.
• Pop-ups, menus and tabs may show open, or closed.
• Embedded widgets (booking, chat, social feeds, maps from code) may show as an empty box.
• Mobile menus — the "hamburger" button may not open.

None of this affects your live site. Click Preview to see the page with everything working:

Things that should look the same

Text, images, colours, fonts and layout should match the preview. If they don't:

1. Press Save, then reload the editor (your browser's refresh button).
2. Check you're in the right view — Desktop, Tablet or Mobile.
3. If images are missing, see Missing images.

On a site copied with "Layout only"

That's expected — photos are swapped for placeholders so the page is your own. Double-click each one to upload your own photo.

On a copied or imported site

Some websites protect their images, load them in unusual ways, or block copying. If an image didn't come across:

1. Save it from the original site (if you have the right to use it), or use your own.
2. In the editor, double-click the empty image and upload it.

For a background image, select the section and use Design → Background → Change image. See Images and media.

For an imported .zip, check the images were inside the .zip, in the folders the pages expect. Images linked from another website only show if that website allows it.

Upload fails

• Files must be under 25 MB each and 100 MB per upload.
• Check Settings → Plan & billing — if your storage is full, delete unused files or upgrade.
• Only pictures, video, audio, fonts and similar web files can be uploaded.

Shows in the editor but not on the live site

You probably haven't published since adding it. Click Publish. See Publishing your site.

"Upload an .html file or a .zip" — only .html, .htm and .zip files can be imported. Other archive types (.rar, .7z, .tar) need converting to .zip first.

The upload is too big — a .zip can be up to 1 GB, and a single HTML page up to 10 MB. Remove files you don't need (original photos, videos, design files) from the .zip.

Page limit reached — the import would take the site over your plan's page limit. Delete pages you don't need, import fewer, or upgrade.

Storage full — the files would take you over your plan's storage. See Plans and limits.

Pages look unstyled — the CSS files weren't in the .zip, or the pages expect them in a different folder. Keep the folder structure exactly as it was on the original website.

Built with React, Vue or Angular — these need "building" first. Import the built files (usually a dist or build folder), not the source code.

Copying a website failed — the website may block copying, need a login, or be very slow. Try fewer pages, or just the start page.

If you can't find the answer here, we're happy to help.

Reply to any email you've received from us, or contact the person who set up your account.

To help us help you faster, please include:

• Your account's email address.
• The site's name or address.
• What you were trying to do, what you expected, and what happened instead.
• A screenshot, if you can. (On Windows press Windows + Shift + S; on a Mac press ⌘ + Shift + 4.)