Quick start guide

Use B12 to turn your ideas into a real website, no coding or design experience needed. Just describe what you want in plain language, and B12's AI Agent builds and edits your site for you. This guide walks you through the process, from generating your first site to publishing it.

How B12 works

B12 features an AI Agent that lets you describe what you want and ask it to build or update your site. You can send a prompt directly, like "add a services page," "rewrite the homepage headline for a law firm," or "change the color scheme to navy and gold."

For targeted edits, Visual Edit lets you click any element on your site: a heading, image, button, or section, and change it directly in the settings panel. A code editor is also available for direct control over your site's HTML and CSS.

Every change you make through the AI Agent, Visual Edit, or the code editor creates a restore point automatically. You can revert to any earlier version at any time without losing your work. Everything you need is in the left sidebar: your website editor, domain settings, contact tools, payment features, analytics, and more.

How you'll build your site

Your first step is generating your website. B12 gives you two ways to start: generate a site from scratch using an initial prompt or create a copy from a prompt example in our gallery.

Writing your first prompt

Best for users who have a clear idea of what they want and prefer to start from scratch.

When you sign in to B12 for the first time, you'll be prompted to describe your website, including your business or organization. Enter the site or organization name, what actions visitors should take, information about your audience, and any design or style preferences. B12 generates a fully designed site based on your description.

Use this template as a starting point, then fill in the details for your own site:

Build a website for [business name], a [what you do] serving [who your customers are]. Include pages for Home, [Services / Portfolio / Shop], About, and Contact. The main thing I want visitors to do is [book an appointment / contact me / make a purchase]. Use a [calm and professional / bold and modern / warm and approachable] look with [any color or style notes].

Here is a filled-in example:

Build a website for Greenfield Legal, a family law firm serving individuals and families in Austin, Texas. Include pages for Home, Practice Areas, About, and Contact. The main thing I want visitors to do is schedule a consultation. Use a professional, trustworthy look with navy blue and warm white.

Once your site is generated, use the AI Agent, Visual Edit, or the code editor to personalize the content, design, and structure.

For a full walkthrough, see Writing your first prompt and generating your site.

Remixing a prompt from the gallery

Best for users who prefer to start from a visual example and customize from there.

The AI Website Prompt Gallery is a collection of pre-built website starting points organized by business type. Browse by category: websites, online stores, portfolios, web apps, blogs, and more, then preview any prompt and select one that matches your goals. Click Get a site like this, and B12 generates a version of that site in the editor.

Once your site is generated, update the Business description in your account Profile to match your site's goals. Then ask the AI Agent to apply your updates to the site. The Agent will revise the content, colors, and calls to action to reflect your changes.

For a full walkthrough, see Remixing a prompt to build your website.

Getting to know your dashboard

After generating your site, the Dashboard is your home base in B12. It displays a launch checklist that tracks your setup progress: steps like editing your site, adding a custom domain, and publishing. Each section shows a progress bar and a count of completed steps. Some steps check themselves off automatically as you work; others have Complete and Skip buttons.

The left sidebar is always visible and gives you access to every part of your account. You can return to the dashboard at any time by clicking Menu then Dashboard in the sidebar.

For a full walkthrough, see Getting to know your B12 dashboard.

Editing your website

Before making any changes, take a moment to scroll through your generated site. Check that the business name is correct, the right pages are included, and the overall look feels right. Your site is not live yet, so nothing is visible to the public until you click Publish.

B12 gives you three tools for making changes. Each one is suited to different types of edits:

• AI Agent: Type a request in the chat panel. Use the AI Agent for broad or structural changes: rewrites, layout shifts, new pages, or any edit that spans multiple sections. The Agent can also generate new copy and images.
• Visual Edit: Click Visual Edit in the chat panel, then click any element on your site to edit it directly. Visual Edit is best for targeted changes: a heading, image, button, or color, and many changes don't use AI credits.
• Code editor: Click Code at the top of the preview to open the full code editor. Use this when you need precise control over HTML or CSS.

Here are a few prompts to get started with the AI Agent:

Rewrite the homepage hero headline to: "[your headline]". Update the subheadline to: "[one sentence describing what you do and who you serve]". Do not change anything else on the page.

Change the color scheme to [primary color] and [secondary color]. Keep the fonts the same.

To undo a change, find the corresponding message in the AI Agent chat and click Restore. You can restore to any version in any order without using AI credits. Experiment freely, every change has a safety net.

For a full walkthrough, see Editing your B12 website.

Adding functionality

B12 includes built-in tools for managing contacts, collecting payments, sending contracts, and more, all accessible from the left sidebar. Here is what is available:

• Data & Users: lets you store API keys and secrets for third-party services and run edge functions for custom backend logic. For example, an AI chatbot, a custom data connection, or a backend integration.
• Contact forms: most B12 sites include a contact form by default. Visitor submissions are stored under Form submissions in the sidebar and forwarded to your account email.
• Commerce: powered by Stripe. Accept website payments, send invoices, and manage payouts to a connected bank account.
• Contact manager: a built-in tool that organizes contacts collected from your forms and other sources. You can also manually add and import contacts. (Requires Client Engagement access.)
• Email marketing: send newsletters and automated campaigns to your contact list. (Requires Client Engagement access.)
• eSignatures: create contracts and send them to clients for digital signing. (Requires Client Engagement access.)

You can also connect almost any third-party tool using embed codes or API integrations, such as scheduling widgets, live chat, and custom forms. Use this prompt to add one to your site:

Add a [tool name] widget to my [page name] page using this embed code: [paste your embed code here]

For a full walkthrough, see Adding functionality to your B12 website.

Preparing to launch

Before publishing, take a few minutes to review your site as a visitor would. Click Preview in the top-right toolbar to open your site in a new browser tab, then switch to Mobile View to check how it looks on a phone. Most of your visitors will be on a small screen, so this step matters.

Work through this checklist before clicking Publish:

Content and copy

• All text is accurate and free of placeholder content from site generation
• Contact information, address, and business hours are correct
• Your homepage clearly communicates what you do within the first few seconds
• Each key page has a clear call to action

Design

• Images load correctly and are relevant to your business
• On mobile, text is readable and buttons are easy to tap
• Brand colors and logo appear consistently throughout the site

Functionality

• Navigation links and buttons all work correctly
• Contact forms submit successfully and appear under Form submissions
• Any payment or booking features work end to end

SEO

• Every page has its own page title and meta description, set under Settings
• Images have descriptive alt text

When everything checks out, click Publish in the top-right toolbar. Your site goes live immediately at your connected domain or your default B12 subdomain.

For the complete pre-launch checklist, see Preparing your website to launch.

Frequently asked questions

→ What if I don't like my generated site?

⇒ The generated site is a starting point, not a final product. Use the AI Agent to make specific changes, or ask it to rebuild the site entirely with a more detailed prompt. See Writing your first prompt and generating your site for tips on writing a stronger prompt.

→ Do I need any coding or design experience?

⇒ No. The AI Agent handles the code. Visual Edit lets you make changes by clicking directly on elements. The code editor is available if you want precise control and are comfortable with HTML and CSS, but it is entirely optional.

→ What happens if I run out of AI credits?

⇒ You can still access your site and use certain Visual Edit features and the code editor, neither of which uses credits. To send new prompts to the AI Agent, you can wait for your credits to reset or purchase additional credits. See AI credits for details.

→ Can I keep editing after I publish?

⇒ Yes. Publishing does not lock your site. Changes you make in the editor stay private until you click Publish again. Your live site always shows the last published version.

→ Do I need a custom domain to publish?

⇒ No. Every B12 site publishes to a free subdomain at yoursite.b12sites.com. You can connect a custom domain at any time. We recommend publishing to a custom domain to increase your site's legitimacy and improve its longterm performance. 

Next steps

• Adding a custom domain
• Improving your website's SEO
• AI credits
• Adding functionality to your B12 website