Getting Started with AI Studio in Captivation Hub

AI Studio is an AI-powered builder inside Captivation Hub that helps you create websites, landing pages, and other interactive web experiences faster using natural language prompts. Instead of starting from scratch, you describe what you want to build, use templates, reference a URL or image, and then refine the result with AI. AI Studio is designed to speed up creation while keeping your projects organized inside a dedicated workspace.

Key Benefits of AI Studio

• AI-Powered Creation: Describe what you want and let AI build the first version for you.
• Visual Refinement: Click elements directly in the live preview to update text, images, icons, spacing, colors, and layout without touching code.
• Flexible Inspiration: Use templates, URLs, screenshots, and uploaded images to guide the output.
• Safe Iteration: Use version history and restore options to test changes with confidence.
• Built-In Organization: Manage projects, folders, recent work, and starred items from one place.
• Production Path: Preview, publish, and connect a custom domain when your project is ready.

Step 1 — Where to Find AI Studio

AI Studio is available from the left navigation inside your Captivation Hub account once it has been enabled in Labs. This makes it easy to return to your projects and continue working from the same workspace over time.

1. Open your account in Captivation Hub.
2. Enable AI Studio in Labs if it is not already turned on.
3. In the left navigation, click AI Studio.

AI Studio Home and Interface Overview

The AI Studio home screen is where you start new projects, reopen past work, and manage everything you have built. Getting familiar with this layout makes it easier to move between creation, editing, and organization.

When you open AI Studio, you will see:

• A prompt area to start a new project
• Tabs such as Recently Viewed, My Projects, Starred, and Templates
• Template options including landing pages, dashboards, ecommerce storefronts, portfolios, and blogs
• A left sidebar with project access and recent work

From the home area, you can start a new project, open an existing project, rename a project, move a project to a folder, or delete a project.

Creating a Project in AI Studio

AI Studio gives you several ways to begin, which helps different users start from the type of input they already have. Whether you start with an idea, a template, a website reference, or an uploaded image, the goal is the same: get to a strong first draft faster.

Start with a Prompt

Type a prompt describing what you want to build. The more detail you include, the better AI Studio can shape the first version. A prompt can be as simple as a short description, or as detailed as a full brief with specific sections, colors, and goals.

AI Studio Asks Follow-Up Questions When Needed

After the initial prompt, AI Studio may ask follow-up questions to better understand your goals. This helps it make decisions on structure, content, and layout before generating the project. Once the project is created, you can keep prompting AI Studio to make changes such as:

• Change colors or styling
• Rewrite headlines or body copy
• Add a contact form or booking section
• Use a reference URL or screenshot for a specific section
• Swap the hero image for an uploaded photo

AI Studio can also use uploaded images in the project. If you do not provide images, it may generate visuals for you.

Start with a Template

If you prefer a structured starting point, browse the template library from the home screen. Templates cover a range of use cases including landing pages, service pages, lead capture pages, and more. Select a template and AI Studio will use it as the foundation for your project.

How to Edit and Refine Your Project

After the initial build, AI Studio keeps the conversation going so you can keep improving the result until it matches your goal. You can continue prompting to refine any part of the page, and AI Studio will update accordingly. This makes iteration faster than rebuilding from scratch.

Visual Edits in AI Studio

Visual Edits gives you a direct way to refine your project by clicking elements in the live preview. Rather than typing a prompt for every small change, you can select a section or element and use contextual controls, or use a prompt on selected elements when you want AI help with a targeted update.

This is useful for adjusting text, images, icons, spacing, colors, and layout details without editing code.

For a full walkthrough of features and capabilities, see the Visual Edits in AI Studio article in our Help Center.

Code Editor in AI Studio

AI Studio also includes a built-in Code Editor for users who want more direct control over their projects. The Code Editor lets you manually edit the underlying code for precise customization.

This is especially useful for making targeted design changes, adjusting functionality, or refining AI-generated output without regenerating the entire project. You can use it to update layouts, modify styles, debug issues, and fine-tune advanced behaviors — all within AI Studio, with changes reflected in real time.

For a full walkthrough of features and capabilities, see the Code Editor in AI Studio article in our Help Center.

Advanced SEO Support in AI Studio

AI Studio includes built-in SEO tools to help your projects get discovered by search engines, social platforms, and AI-powered search experiences.

Because AI Studio sites are built as fast, modern web apps, they can sometimes be harder for search engines and crawlers to read by default. Advanced SEO Support solves this by making your content more accessible and easier to index without changing how your site looks or performs.

For a full walkthrough, see the Advanced SEO Support in AI Studio article in our Help Center.

Previewing and Reviewing Your Project

Before publishing, you can preview your project across desktop, tablet, and mobile views. Click the Computer icon at the top of the preview area to switch between view modes. This helps you check the layout on different screen sizes before anything goes live.

Version History

AI Studio keeps a version history of your project so you can review and restore earlier states. This makes it safer to experiment with changes because you can roll back if something does not work as expected.

Forms and Calendar Integration

AI Studio can build front-end experiences for forms and booking sections, then guide you through the steps needed to make them functional inside your Captivation Hub account. This means your page can look finished right away while you control when forms and calendars actually get connected.

How Forms Work in AI Studio

AI Studio can create form-based sections from a prompt. For example, you can ask it to add a contact form, registration form, feedback form, or lead capture section. At this stage, the form starts as a front-end layout — it can appear on the page before it is connected to your account.

When you want the form to start collecting submissions, ask AI Studio to connect it or click Connect when prompted in the chat. This triggers the Connect to CRM flow, which is used to:

• Create contacts in your account
• Capture form submissions
• Support workflows through tracking triggers

Once that connection step is completed, AI Studio will wire the form into your connected setup so submissions flow into your Captivation Hub account.

How Calendars Work in AI Studio

AI Studio can also create booking-focused pages. If you ask for an appointment page, consultation booking page, or discovery call page, it can build the page around scheduling and include a booking section.

To make the booking experience functional, AI Studio can detect calendars that already exist in your account and prompt you to choose which one to connect. At a high level, the calendar flow works like this:

1. AI Studio creates the booking area on the page.
2. You select a calendar from your account.
3. That calendar is connected to the page.

This makes it easier to turn a booking page into a working scheduling experience without rebuilding it manually.

Publishing Your Projects

Publishing your AI Studio project makes it available through a live URL so you can review it, share it, and launch it on your own domain. Captivation Hub supports a publishing flow that starts with a preview URL, then lets you connect a custom domain and choose the main published URL visitors should use.

After a project is published, you can continue making edits. Those changes stay in draft until you publish again, so you can improve the page without immediately changing the live version.

Step 1 — Publish to a Preview Domain

To get an initial live URL for your project:

1. Click Publish in the top right of AI Studio.
2. AI Studio will generate a preview URL you can use to review and share the project.

Step 2 — Connect a Custom Domain

Once you are ready to go live on your own domain:

1. Click Publish, then select Add Custom Domain.
2. Enter the domain you want to connect. If you enter an apex domain (example.com) or the www version (www.example.com), an option appears to also add the other version and set up a redirect. It is recommended to connect both your root and www domains. Leave the option selected to connect both in the same setup, or clear it if you only want the domain you typed.
3. Follow the DNS setup steps shown. If the domain is managed in Captivation Hub, the DNS records can be added automatically. If it is managed elsewhere, add the DNS records shown and then click Verify DNS.
4. Once setup is complete, the AI chat confirms the custom domain is connected and includes a View site option.

Step 3 — Set a Primary Published URL

Setting a primary published URL lets you choose the main live domain for your AI Studio project. Other connected URLs will automatically redirect to the primary domain using a 301 redirect.

To set a primary published URL:

1. Click Publish, then click the three-dot menu next to the URL you want to make primary.
2. Click Set as primary.

Cloning Projects in AI Studio

AI Studio lets you clone a project within the same account or across accounts. Project cloning makes it easier to reuse successful work without rebuilding the same experience from scratch.

When cloning a project, you can:

• Duplicate it inside the same account
• Place it at the root level or inside an existing folder
• Choose whether to include chat activity and version history

Submission Data for Your Project

When forms in your AI Studio project are connected to CRM tracking, submission data is captured and available in two places:

• Contacts — new contacts created from form submissions appear here
• Funnels > Forms > Submissions > External Forms — all form submission records

How Workflows Connect to Form Submissions

Once the form is connected to CRM tracking, submissions can trigger automations in your workflows. The flow works like this:

1. Create the form layout in AI Studio.
2. Connect the form to CRM tracking.
3. In a workflow, use the trigger External Tracking Event.
4. Use the Form submission event to continue your automation.
5. Use the Domain filter and/or External Form filter to target specific forms, then continue your automation actions.

Current Limitations and Important Notes

Knowing the current boundaries of AI Studio helps set expectations during setup. Since AI Studio is available in Labs, some behavior may continue to evolve over time.

• AI Studio projects are managed inside AI Studio and cannot be moved into the standard Funnels or page builders.
• URL and image-based recreation should be treated as inspiration for structure, layout, and style direction rather than an exact one-to-one copy.
• Forms and calendars may require additional connection steps before they work with your Captivation Hub data and scheduling setup.
• AI Studio is designed to publish directly from its own workspace — you do not need to move output into other builders.

Frequently Asked Questions

Q: Can I use AI Studio to build multi-page websites?
Yes. You can build multiple pages and connect them within the same project, then publish and connect a domain from there.

Q: Can I move or copy an AI Studio project into Funnels or Websites?
No. AI Studio projects stay in AI Studio and cannot be copied into the standard page or funnel builders. AI Studio publishes directly from its own workspace, so you do not need to move the output elsewhere.

Q: Can I preview my project on mobile before publishing?
Yes. AI Studio includes preview options for desktop, tablet, and mobile views so you can review the layout before publishing. Click the Computer icon at the top of the preview to switch between view modes.