Coframe’s Editor allows you to optimize your website using AI-driven variants. This guide will walk you through the process of creating and managing variants, focusing on the left panel and the bottom panel of the Editor interface.

​
Overview

The Editor interface is divided into several key areas:
  • Left Panel: AI chat window and element selection.
  • Main View (Iframe): Visual representation of your website.
  • Bottom Panel: Variant management.
In this guide, we’ll focus on the Left Panel and Bottom Panel to help you make the most of Coframe’s variant creation capabilities.

​
Left Panel

Left Panel The left panel contains the AI chat window and the selected elements list. This is where you’ll interact with the AI to generate content variants and manage the elements in scope.

​
AI Chat Window

Below the Audience Segment Dropdown is the AI Chat Window, which occupies most of the sidebar.
  • Generating Variants:
    • Prompting: Type instructions or requests to guide the AI in generating variants.
    • Generate More: Click this button to let the AI produce additional variants automatically.
  • Selected Elements List:
    • Located above the input bar.
    • Shows elements that are In Scope.
    • Elements can be:
      • Selected: Actively included in variant generation.
      • Deselected: Temporarily excluded from immediate variant generation but still part of offline processes.
    • Removing Elements from Scope:
      • Deselect the element.
      • Click the Trash Can icon in the element list or directly in the iframe.

​
Generating Variants

With elements selected, leverage AI to create optimized content variants.
  • AI Generation Process:
    • The AI determines the type of content to generate (text, HTML, JavaScript) based on the selected elements.
    • Typically, three variant options are produced per generation cycle.
  • Managing Variant Options:
  • Editing Variants: Click the Edit Icon on a variant to manually adjust its content before saving.
  • Creating Official Variants: Click Create New Variant to save a variant option to your list for testing.
  • Updating Existing Variants: When viewing a specific variant, click Update Variant to apply changes.
  • Previewing Variants:
    • Hover over a variant option to see how it looks in the editor.
    • Each variant has a title summarizing its main idea or theme.
You can also edit variants manually. See editing variants for more information.

​
Managing Variants

Variant Grid View The Bottom Panel is where you manage all your generated variants.
  • Variant List:
    • Located below the iframe, displaying all your variants.
    • The Original variant is always on the far left.
  • Switching Between Variants:
    • Click on any variant to load it in the main view for examination.
  • Variant Details:
    • Shows which elements are edited and the variant’s title.
    • A Draft Badge indicates the variant is not yet finalized.
  • Deleting Variants:
    • Remove unwanted variants by clicking the Trash Can Icon.

​
Beta Feature: Generative UI Components

Beta Feature
Unlock advanced capabilities to generate entire sections and dynamic CMS components using AI.

​
Enabling Generative UI Components

  • Type /enable genui into the prompt input to activate the feature.

​
Using the Feature

  1. Select or Insert One Element: Focus on a single element for generation.
  2. Provide a Description: Describe the section or component you want the AI to create.
  3. Generation Process:
    • The AI will build the section with editable content and styles.
  4. Editing Generated Components:
    • Use the generated CMS interface to fine-tune content and design elements directly.

​
Finishing Up

After crafting and reviewing your variants, finalize your optimizations.
  • Confirm Variants:
    • Click the Confirm button located in the top right corner of the Editor.
  • Metric Selection Step:
    • You’ll be guided to select performance metrics to evaluate your variants’ effectiveness.