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. You can also make use of AI there to generate or edit your pages, while retaining full control options.

AI Studio is an additional option when you want to launch a page or website fast - projects built in AI Studio are managed from the AI Studio workspace, not from Site Pages.

Please refer to our Website & Funnel AI guide for more information on when to use each.

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 an image alongside your prompt (upload from your device or select from the media library), 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 [Upload Image] to upload an image from your device or hover on Media library > and click [Insert link] to select any file or [Add reference image] to select an image from the media library in Ivorey™
         
         Note: Include in your prompt whether you want AI Studio to use the image/s as inspiration for the design/layout, or to use the image/file in the page directly.

      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
         
         Note: Manual edits do not use any tokens, so you can tweak to your heart’s content.

   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 instruct 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 > instruct 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 the [↥] upload icon to upload a Favicon (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 (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 - You can embed an existing Ivorey™ form into your AI Studio project by pasting in its embed code and asking AI Studio 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.
  

  AI Studio can also generate a brand new form for you inside your project and connect it to the CRM, so you can receive submissions. Please see the Create a Form in AI Studio section below for more details.
  

• 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 instruct 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 the embed code for your review widget > and paste it into your chat in the AI Studio, to embed the widget in the relevant section of your page.
  

• Countdown Timers - Copy the embed code for your countdown timer > and paste it into your chat in the AI Studio, to embed it where needed.
  

• Surveys or Quizzes - Copy the embed code for your survey or quiz > and paste it into your chat in the AI Studio, to embed the survey or quiz in the relevant section of your project.
  

• Chat Widgets - Copy the embed code for your chat widget > and paste it into your chat in the AI Studio 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 instruct 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.

1. In your AI Studio project chat panel, instruct AI to create the form and list the fields you want included (e.g. "Add a contact form with fields for first name, last name, email, phone, and a message box")

2. Ask it to check whether matching custom fields already exist in your CRM, and to create any that don't exist yet

3. Confirm the fields are mapped correctly to your CRM before moving on

4. Instruct AI to connect the form to your CRM (e.g. "Connect this form to my CRM") or click [Connect] when prompted in the chat
   
   Note: AI-generated forms are not connected automatically. You need to explicitly ask AI Studio to connect the form, or confirm when prompted, before it will start sending submissions into your account.

5. (optional) Once connected, request the embed code for the form if you'd like to use it elsewhere - you can add it to an Ivorey™ website or funnel page, or an external website, the same way you would embed any other Ivorey™ form
   
   Note: You don’t have to publish the AI Studio project for the form to work elsewhere. Once the form is connected to the CRM, and the embed code has been pasted into another page, the form works independently.

6. Send yourself a test submission > confirm the form submission was received in Site Pages > Forms > Submissions > External Forms > and check that it has created or updated a contact record correctly in Contacts

7. 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 in Site Pages > Forms)

1. From the main Ivorey™ menu, go to AI Studio to open the Home page

2. On the left-hand sidebar:

   1. Click your account name at the top, to open a drop-down > and click [Appearance] to adjust to Light, Dark, or System mode, for the colouring of the AI Studio interface

   2. Click the [Home] button to return to the main AI Studio Home page at any time

   3. Click [All projects] to search or browse every project in your account > click [+ Create folder] in the top right corner > give your folder a name > and click [Create folder] to start organising your projects

   4. Click [Starred] to quickly access any projects you've marked as a favourite

   5. Under Recents, find a list of your most recently viewed or edited projects for quick access

3. In the main window, below the prompt box, use the tabs to browse and manage your projects:

   1. Recently viewed - the most recently opened projects in your account, across all users

   2. My projects - all projects created by you specifically (no other user’s projects)

   3. Starred - your favourited projects

   4. Templates - browse AI Studio's built-in template starting prompts

4. Hover over any project card > and click the [⋮] three dots:

   1. Click [Star/Unstar] to add/remove the project from your Starred tab for quick access

   2. Click [Rename] to update the project name

   3. Click [Move to folder] to organise your projects into folders > search for a folder at the top > select the folder or click [+ Create folder] to create a new folder > and click [Save changes]

   4. Click [Clone] to duplicate the project as a new copy > give the copy a new Project name > select a folder it should be added to > toggle ON/OFF to Include project history (toggle ON to keep the original chat and version history) > and click [Clone]
      
      Note: Useful for reusing a layout for a different campaign or audience without starting from scratch

   5. Click [Settings] to open the full project settings (see below)

   6. Click [Delete] to permanently delete the project (this can’t be undone)

5. In Settings, on the Project Settings tab, you can view your project name, URL subdomain, and creation date > and manage the following settings:

   1. Click [Rename] to update the project title

   2. Click [Clone] to duplicate the project as a new copy

   3. Click [Unpublish] to take the project offline (only visible once the project has been published)
      
      Note: If you unpublish a project, your published URL will no longer be accessible until you publish again.

   4. Click [Delete] to permanently delete the project (this can’t be undone)

6. On the [Domains] tab, you can view your preview domain URL and any connected custom domains:

   1. Click [Publish now] to open your project (only visible if your project is not yet published) > and follow the steps above to Review and Publish your project

   2. Click the [⋮] three dots on your preview or connected custom domain > and click [Set as primary] to set it as your primary domain

      1. Click [Disconnect] > and [Disconnect] again to disconnect a custom domain from your project

   3. Click [Connect domain] to connect a new custom domain to this project.
      

      Note: You must publish the project first before a custom domain can go live.

7. On the [SEO] tab, you can manage your project's search engine visibility:

   1. Toggle ON/OFF Advanced SEO Support to pre-render your page content. This makes it easier for search engines to crawl, improves social media previews, helps AI crawlers see your content, and allows search engines to index your site
      
      Note: Your project must be published with a custom domain connected, before you can enable Advanced SEO Support.

   2. Under Improve your SEO, you can find a checklist of recommended steps to improve your search engine visibility:

      1. Verify your site is live - click [Copy website link] > open a private/incognito window > and paste in the link to confirm it's live (only for published projects with a custom domain connected)

      2. Improve social preview content - click [Copy prompt] > click [← Go back] in the top left corner, to return to your project > and paste the prompt into AI Studio, to generate proper meta tags for social sharing

      3. Generate sitemap - click [Copy prompt] > click [← Go back] in the top left corner, to return to your project > and paste the prompt into AI Studio, to create a sitemap.xml for search engines

      4. Submit sitemap to Search Console - click [Learn how] for instructions on submitting your sitemap to Google

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 or from the media library in Ivorey™, 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.

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

AI Studio pages are built as React single-page applications, which means search engines and crawlers can sometimes have difficulty reading the page content by default. This makes AI Studio less reliable for organic search compared to pages built in Site Pages.

You can still set meta titles, descriptions, and social images inside AI Studio, and there is an Advanced SEO Support toggle available inside your project settings that can help improve crawlability. If organic search visibility is a priority for your project, we recommend building in Site Pages instead, where full SEO control is available. AI is available inside the regular Site Pages builder, see our Website & Funnel AI guide for the details.