--- title: Quick start guide description: Learn how to build and launch a website with B12. This guide covers generating your site, editing with the AI Agent, adding functionality, and publishing. --- [Skip to content](https://support.b12.io/en/v3/b12-quick-start-guide#main-content) ![b12 logo](https://support.b12.io/hubfs/b12%20logo.svg) - [Help Center](https://support.b12.io/) - [B12 Website](https://www.b12.io/) - [AI Website Prompts](https://www.b12.io/ai-website-prompt-gallery) - [Resources](https://www.b12.io/resource-center/) - [Pricing](https://www.b12.io/pricing/) - [Log in](https://b12.io/dashboard/) Open main navigation Close main navigation - [Help Center](https://support.b12.io/) - [B12 Website](https://www.b12.io/) - [AI Website Prompts](https://www.b12.io/ai-website-prompt-gallery) - [Resources](https://www.b12.io/resource-center/) - [Pricing](https://www.b12.io/pricing/) - [Log in](https://b12.io/dashboard/) - [Start for free](https://b12.io/signup/) [Start for free](https://b12.io/signup/) How can we help? - There are no suggestions because the search field is empty. 1. [B12 Help Center](https://support.b12.io/en?hsLang=en) 2. [Getting started](https://support.b12.io/en/getting-started?hsLang=en) 3. [Introduction](https://support.b12.io/en/getting-started?hsLang=en#introduction) # Quick start guide ## Everything you need to know to build, customize, and launch your website, step by step | ![ronnel](https://support.b12.io/hs-fs/hubfs/Ronnel%20DG.png?width=60&height=60&name=Ronnel%20DG.png) Written by: Ronnel DG Last updated: 06 Aug., 2026 | | --- | 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](https://support.b12.io/hubfs/B12%20UI%20Icons/Editing/visual-edit.svg) **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](https://support.b12.io/en/v3/editing-your-website-with-the-ai-agent?hsLang=en), [Visual Edit](https://support.b12.io/en/v3/left-pane-editing-in-b12-3.0?hsLang=en), or the [code editor](https://support.b12.io/en/v3/editing-your-websites-code?hsLang=en) automatically saves a [version](https://support.b12.io/en/v3/editing-your-website-with-the-ai-agent#restore-point) of your site. 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](http://www.b12.io) 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. **Tip:** The more specific your prompt, the more personalized your site. Include your business name, services, target audience, and any design preferences such as "clean and professional" or "bold and modern." For a full walkthrough, see [Writing your first prompt and generating your site](https://support.b12.io/en/writing-your-first-prompt-generating-your-site?hsLang=en). #### 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 **![user-profile](https://support.b12.io/hubfs/B12%20UI%20Icons/B12%20Drop-down/user-profile.svg) 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](https://support.b12.io/en/browse-the-ai-website-prompt-gallery?hsLang=en). ### 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](https://support.b12.io/en/v3/getting-to-know-your-b12-dashboard?hsLang=en). ### 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](https://support.b12.io/en/v3/editing-your-b12-website?hsLang=en). ### 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: - **Backends:** 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] ``` **Note:** Contact manager, eSignatures, and Email marketing require a paid plan that includes a Client Engagement seat. Commerce, Backends and Form submissions are available on all plans, including the free plan. For a full walkthrough, see [Adding functionality to your B12 website](https://support.b12.io/en/v3/adding-functionality-to-your-b12-website?hsLang=en). ### Preparing to launch Before publishing, take a few minutes to review your site as a visitor would. In the **Page Switcher** toolbar, click the **preview icon ![page-preview](https://support.b12.io/hubfs/B12%20UI%20Icons/Editing/page-preview.svg)** 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. **Note:** Connecting a custom domain requires a [paid B12 plan](https://b12.io/dashboard/upgrade). You can publish to your free B12 subdomain at any time and connect a custom domain later. Your content won't change when you switch. For the complete pre-launch checklist, see [Preparing your website to launch](https://support.b12.io/en/v3/preparing-your-website-to-launch?hsLang=en). ### 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](https://support.b12.io/en/writing-your-first-prompt-generating-your-site?hsLang=en) 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](https://support.b12.io/en/publishing-your-website-on-a-custom-domain?hsLang=en) 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 - [Getting started](https://support.b12.io/en/getting-started?hsLang=en#main-content) - [Introduction](https://support.b12.io/en/getting-started?hsLang=en#introduction) - [Detailed guides](https://support.b12.io/en/getting-started?hsLang=en#detailed-guides) - [Working with B12's AI Agent](https://support.b12.io/en/working-with-b12s-ai-agent?hsLang=en#main-content) - [Agent Skills](https://support.b12.io/en/working-with-b12s-ai-agent?hsLang=en#agent-skills) - [Built-in features](https://support.b12.io/en/built-in-features?hsLang=en#main-content) - [Visual edit](https://support.b12.io/en/built-in-features?hsLang=en#visual-edit) - [Code editor](https://support.b12.io/en/built-in-features?hsLang=en#code-editor) - [Data & users (Backends)](https://support.b12.io/en/built-in-features?hsLang=en#data-users-backends) - [Forms & submissions](https://support.b12.io/en/built-in-features?hsLang=en#forms-submissions) - [Commerce](https://support.b12.io/en/built-in-features?hsLang=en#commerce) - [Contact manager](https://support.b12.io/en/built-in-features?hsLang=en#contact-manager) - [eSignatures](https://support.b12.io/en/built-in-features?hsLang=en#esignatures) - [Email Marketing](https://support.b12.io/en/built-in-features?hsLang=en#email-marketing) - [Team](https://support.b12.io/en/built-in-features?hsLang=en#team) - [Analytics](https://support.b12.io/en/built-in-features?hsLang=en#analytics) - [Website settings](https://support.b12.io/en/built-in-features?hsLang=en#website-settings) - [Adding functionality](https://support.b12.io/en/adding-functionality?hsLang=en#main-content) - [Third-party integrations](https://support.b12.io/en/adding-functionality?hsLang=en#third-party-integrations) - [Publishing & growing](https://support.b12.io/en/publishing-growing?hsLang=en#main-content) - [Domains](https://support.b12.io/en/publishing-growing?hsLang=en#domains) - [Connecting your Domain](https://support.b12.io/en/publishing-growing?hsLang=en#connecting-your-domain) - [Managing Your Domain](https://support.b12.io/en/publishing-growing?hsLang=en#managing-your-domain) - [Email Forwarding & Sending](https://support.b12.io/en/publishing-growing?hsLang=en#email-forwarding-sending) - [Growth & Marketing](https://support.b12.io/en/publishing-growing?hsLang=en#growth-marketing) - [Troubleshooting](https://support.b12.io/en/troubleshooting?hsLang=en#main-content) - [FAQs](https://support.b12.io/en/troubleshooting?hsLang=en#faqs) - [Account & billing](https://support.b12.io/en/account-billing?hsLang=en#main-content) - [Account Login & Password](https://support.b12.io/en/account-billing?hsLang=en#account-login-password) - [Subscription & Payment Information](https://support.b12.io/en/account-billing?hsLang=en#subscription-payment-information) - [Your Account](https://support.b12.io/en/account-billing?hsLang=en#your-account) - [Managing Multiple Websites](https://support.b12.io/en/account-billing?hsLang=en#managing-multiple-websites) - [Multi-user](https://support.b12.io/en/account-billing?hsLang=en#multi-user) - [Getting support](https://support.b12.io/en/getting-support?hsLang=en#main-content) - [Professional & Advanced Plan Support (B12 2.0)](https://support.b12.io/en/getting-support?hsLang=en#professional-advanced-plan-support-b12-2-0) - [B12 2.0](https://support.b12.io/en/b12-2-0?hsLang=en#main-content) - [Website Structure and Content](https://support.b12.io/en/b12-2-0?hsLang=en#website-structure-and-content) - [Website Style & Design](https://support.b12.io/en/b12-2-0?hsLang=en#website-style-design) - [Sitewide Settings](https://support.b12.io/en/b12-2-0?hsLang=en#sitewide-settings) - [Using the B12 Editor](https://support.b12.io/en/b12-2-0?hsLang=en#using-the-b12-editor) - [Analytics & SEO](https://support.b12.io/en/b12-2-0?hsLang=en#analytics-seo) - [Integrations - General](https://support.b12.io/en/b12-2-0?hsLang=en#integrations-general) - [Integrations - Communication](https://support.b12.io/en/b12-2-0?hsLang=en#integrations-communication) - [Integrations - Language](https://support.b12.io/en/b12-2-0?hsLang=en#integrations-language) - [Integrations - Ecommerce](https://support.b12.io/en/b12-2-0?hsLang=en#integrations-ecommerce) - [Professional & Advanced Plan Features](https://support.b12.io/en/b12-2-0?hsLang=en#professional-advanced-plan-features) - [Troubleshooting & Resources](https://support.b12.io/en/b12-2-0?hsLang=en#troubleshooting-resources) - [Contact Forms](https://support.b12.io/en/b12-2-0?hsLang=en#contact-forms) - [Online Scheduling](https://support.b12.io/en/b12-2-0?hsLang=en#online-scheduling) - [Advanced Editing (Experts Only)](https://support.b12.io/en/b12-2-0?hsLang=en#advanced-editing-experts-only) [![B12\_logo\_2025](https://support.b12.io/hs-fs/hubfs/B12_logo_2025.png?width=53&height=24&name=B12_logo_2025.png "B12_logo_2025")](https://www.b12.io) © 2025 B12. All rights reserved. ×