AI Studio

You can use AI Studio to create:

• Landing pages and full websites with content, visuals, and calls to action already in place

• Appointment booking pages connected to your Ivorey calendar

• Branded forms and lead capture pages

• Multi-step surveys and custom client-facing experiences

• Storefront or portfolio pages built from your uploaded brand images

• Internal team dashboards and interactive task management sites

You are not limited to one page per project - AI Studio can build multi-page experiences within a single project, so you do not need to start a new project for each page.

Inside Ivorey, the AI Studio and Site Pages (website, funnel, blogs, webinars and store builder) are two separate tools - each suited to different needs.

The page builder in Site Pages is your primary tool for building in-depth funnels, websites, and pages with full drag-and-drop control over every element. AI Studio is an additional option when you want to launch a page or website fast - describe what you want, get a complete draft, and refine it from there. Projects built in AI Studio are managed from the AI Studio workspace, not from Site Pages.

Use the AI Studio for speed, simplicity, and hands-off building. Use the standard page builder when you need precise control, or more complexity and integration from the start.

1. From the main Ivorey menu, go to AI Studio to open the workspace > from here, you have two options for how to start your new project:

   1. Start with a prompt - In the prompt box, at the top of the page, type in what you want to build

      1. Include as much detail as you can about your brand, your audience, and what the page needs to include

      2. You can also attach a file or image alongside your prompt, and/or paste in a live URL if you would like AI Studio to use an existing site as inspiration for layout and structure

      3. The more detail you include in your prompt, the stronger the first draft will be. For example: "Create a landing page for a business coaching program targeting female entrepreneurs called [Program Name]. Use a clean, modern aesthetic with my brand colours - [#hexcodes] and my brand fonts - [Font Names]. Include a hero section, a benefits section, a testimonials section, and a booking form connected to my calendar."

      4. Press Enter or click the [↑] arrow icon, to generate your project

      5. If your prompt is broad, AI Studio may ask a follow-up question before building - answer it to help shape the result

   2. Start with a template - Click on the [Templates] tab > and select a template type:

      1. Options include Landing Page, Dashboard, E-commerce, Portfolio, Blog / CMS, To-do / Task Manager, Chat Application, Restaurant / Food Ordering, Fitness Tracker, Social Media Feed, Calendar / Scheduling, and Weather App

      2. AI Studio will generate a starting point based on the template prompt you choose, which you can then customise from there

2. Once AI Studio has generated your first draft, you will see a preview canvas on the right hand side > a chat panel on the left-hand side (more on this to follow) > and at the top of the page:

   1. Click the computer screen icon, to switch between Desktop, Tablet, and Mobile previews

   2. Click the [/] slash icon, to select a page to preview (if there are multiple pages in your project)

   3. Click the [︎] square arrow icon, to preview in a new tab

   4. Click the [⟳] circle arrow icon, to refresh the preview

3. Click the clock icon, at the top left of the page, to view your project’s Version History:

   1. Click on any listed version to preview it

   2. Click the bookmark icon to bookmark a specific version

   3. Click the [⋮] three dots > and click Open preview in new tab > or Go to message in chat, to find the point where those changes were made

   4. Click the [⤺] back arrow > and click the [Cancel] or [Revert] button in the chat, to confirm if you want to restore a previous version or not
      
      Note: Version history is saved automatically with each change, so you can always go back if a prompt result doesn’t land the way you hoped.

4. Click on the [☐] square window icon, at the top left of the page, to Toggle Sidebar closed - this allows you to view the preview canvas at full screen width, without needing to open in a new tab

5. You have different options for how to edit and refine your project:

   1. Refine using prompts - Continue the conversation in the AI Studio chat panel, on the left-hand side, to make changes:

      1. Examples of follow-up prompts:

         • Change the background colour to a soft cream (or give exact hex code)

         • Rewrite the hero headline to focus on transformation (or give exact copy)

         • Add a testimonials section below the benefits section

         • Make the top navigation and hero section similar to this URL: [yourreference.com]

      2. Click the [+] plus icon, at the bottom left > and click [Attach] to upload an image or file (either as inspiration, or to be used in the page)

      3. If you made an error in your prompt or changed your mind - while AI is thinking, you can click the [︎] square icon, to stop it from generating the changes > then type in a new prompt

   2. Refine manually - Click on the [Visual Edits] button, at the bottom > select any element directly in the preview canvas (e.g. text, an image or a section) > use the Visual Edit panel, with manual controls specific to what you have selected:

      1. Adjust colours, fonts, spacing, borders, shadows, and opacity

      2. Paste in an image URL or select a different icon

      3. To edit text inline, double-click the text element > type your changes directly > and click outside the element when done

      4. When you are happy with your changes, click [Save] to apply them > or [Discard] to revert

      5. When you’re done, click the [Visual Edits] button again to switch back to the regular chat panel

   3. Refine using Visual Edits and AI - Click on the [Visual Edits] button, at the bottom > select any element directly in the preview canvas > and type in the changes you want AI to make to that specific element
      
      Note: Use the Ctrl / Cmd key to select multiple elements. Click the [X] icon on any selected element, to remove selection, or click on another element.

6. (optional) At the top of the page, click the [</>] code icon, to switch to Code mode > select the relevant file > paste in your custom code > and click the preview icon to review your changes

7. At any time, you can click the [←] back arrow, in the top left corner of your screen, to return back to the AI Studio home page > your project will be drafted for you to return back to any time

1. Inside your AI Studio project, scan through all of the pages, sections, headers, footers and menus to confirm:

   1. All text reads correctly - If anything is inaccurate or does not align with your brand voice, click on the [Visual Edits] button, at the bottom left > double-click on the text to edit it directly > or ask AI to adjust it

   2. All sections display as intended across devices - Click the computer screen icon, at the top of the page, to switch between Desktop, Tablet, and Mobile previews

   3. All links are working - If there are any missing links, click on the [Visual Edits] button > select a button or text > ask AI to link or hyperlink a URL > and paste in the link

   4. All connected forms, calendars or other embeds are working as expected - Review the details below for what can and can’t be connected or embedded inside an AI Studio project.

2. To preview and test the live version of your site, click [Publish] in the top right corner of the screen > your project will be assigned a preview URL, which you can edit here if needed (if you want to share with team members) > and click [Publish]
   
   Note: You can’t connect a custom domain until the project has first been published to a preview domain.

3. Edit the generated Website Info with relevant meta data to improve SEO

   1. Click to upload a Favicon from your device (the icon on the browser tab)

   2. Edit the Title text (the text on the browser tab)

   3. Edit the Description with a relevant short summary about your business or offer (depending on your project)

   4. Click the [Replace] button, on the Social Image, to upload your own cover image from your device (the image that will display on socials if your site URL is shared)

   5. Preview the data at the bottom (this is how it will display in a browser search e.g. on Google)

   6. Click [Apply Changes]
      
      Note: These meta data details can be edited later as needed.

4. Click the [Publish] button again > click the [View App] button to preview the live site in a new tab > click through to pages and test thoroughly (go back to the AI Studio editor to make adjustments as needed)

5. When you’re ready to connect your custom domain, return back to the AI Studio tab > click the [Publish] button again > and click the [Add custom domain] button
   
   Note: Click the [Edit Settings] button here, to edit meta data details.

6. Type in the domain or subdomain you want to use for this site > and click [Continue]:

   1. If your root domain is already being used by another website - Please note connecting it here will replace the existing site. Please ensure you are using a subdomain or you are 100% ready to replace the existing site on this domain

   2. If your root domain is already connected or being hosted inside Ivorey - Click the [Add Records] button, and your DNS records will be automatically updated to connect your new site project to your domain

   3. If your root domain is not yet connected to Ivorey - Copy the provided DNS records > and update them with your domain host (e.g. GoDaddy) > once complete, click the [Verify DNS] button
      
      Note: Please refer to our Connect a Domain or Subdomain guide for the steps to update DNS records.

7. Once your domain is successfully connected, click the [Publish] button again > check if there is a gold ️star icon on your custom domain, to indicate this domain is set as the primary > if it is not the primary, click the [⋮] three dots next to your custom domain > and click [Set as Primary]

Note: After publishing, you can continue making edits. Changes remain in draft until you publish again, so your live page will not be affected until you choose to update it.

• Forms - AI Studio can generate a custom form for you as part of your project, including contact forms, lead capture forms, registration forms, and booking inquiry forms. Once generated, you will be prompted to connect it to your Ivorey CRM. Once connected, any submissions can be found in Site Pages > Forms > Submissions > External Forms.
  

  Note: To trigger a workflow from an AI Studio-generated form, use the External Tracking Event trigger > select Form Submitted as the event filter > then use the Domain and External Form filters to make sure the workflow only fires for that specific form, on that specific domain. This is different from the standard Form Submitted trigger used for forms built inside Ivorey.
  

  You can also embed an existing form you have already built inside Ivorey by pasting in its embed code and asking AI to place it on the page or connect it to a button as a pop-up. Existing forms embedded this way use the standard Form Submitted trigger in workflows as usual, and submissions can be found in Site Pages > Forms > Submissions > Internal Forms.
  

• Calendars - AI Studio can generate a booking widget as part of your project. Use the Visual Edits function > select the booking element or CTA button > then ask AI to connect it to your calendar, providing the name. Bookings will flow directly into your Ivorey calendar and can trigger workflows from there as usual.
  

• Review Widgets - Copy and paste the embed code for your review widget > and ask AI to embed it in the relevant section of your page.
  

• Countdown Timers - Copy and paste the embed code for your countdown timer > and ask AI to embed it where needed.
  

• Surveys or Quizzes - Copy and paste the embed code for your survey or quiz > and ask AI to embed it in the relevant section.
  

• Chat Widgets - Copy and paste the embed code for your chat widget > and ask AI to place it on the page, specifying where exactly it should be placed, and whether it should appear on every page or specific pages only.
  

• QR Codes - Download your QR code as a PNG > upload it to AI Studio via the attachment option > and tell AI where it should be placed.
  
  Note: Share links for QR codes are not currently supported inside AI Studio - use the downloaded image instead.
  

• Any URL - You can link to any URL from buttons, CTAs, menus, text elements etc. - including payment links, offer checkouts, funnels, blogs, stores, external pages, social media profiles etc. Use the Visual Edits function > and ask AI to link a specific element to your URL.

• Payments - AI Studio can build beautiful checkout-style and storefront pages, but does not process payments directly. To handle payments, link your page or button to a payment link, offer checkout, form (with payment), or sales funnel built inside Ivorey.
  

• Products - A direct connection to Ivorey products is not currently supported. We recommend using the above suggested payment options, to link your products to your AI Studio project.
  

• Coupon Codes - Coupon codes cannot be added directly, as payments are not directly processed in AI Studio-generated checkouts. If you need coupon functionality, use an existing Ivorey form, calendar, etc. with coupon codes enabled.
  

• Gift Card Checkouts - While you can share your gift card checkout embed code with AI Studio, the widget is not currently fully supported.

No, you don’t need design or coding experience, AI Studio is designed to do the heavy lifting for you. You describe what you want in simple terms - including your brand style, your audience, and what the page needs to include - and AI Studio generates a complete draft. From there, you can refine it using follow-up prompts or the Visual Edits panel, without needing to know anything about design or code.

Yes, you can upload your own images, from your device, and include them in your prompt - AI Studio will incorporate them into your project. You can also paste in a live URL for AI Studio to use as layout or style inspiration. If you do not provide images, AI Studio can generate visuals for hero sections and supporting areas.

No, AI Studio projects stay in the AI Studio and can’t be moved or copied into Site Pages. AI Studio publishes directly from its own workspace.

Yes, you can clone a project to create a copy, with or without the original chat history and version history. Cloning is useful when you want to reuse a layout for a different campaign or audience without starting from scratch. From the AI Studio home page, click the [⋮] three dots on your project > and click [Clone]

The Code Editor in the AI Studio is CodeMirror-powered and supports editing TypeScript, JSX, CSS, JSON, and other text-based project files.

You can open any published project inside the AI Studio, click the [Publish] button at the top right > and click the [⏻] unpublish button, to unpublish and disconnect a live project from your domain.