Website Viewer

​

Main View (Iframe)

The iframe displays your website for real-time editing and previewing.

​

Chrome Extension Requirement

Note: Ensure the Coframe Chrome Extension is installed to utilize the Editor fully.

​

Interacting with Elements

• Selecting Elements:
  • Hover over an element to highlight it with a blue rectangle and see its type.
  • Click to select the element, adding it to your In Scope list.
• Adding New Elements:
  • Plus Buttons: Appear above and below hovered elements.
  • Click to Insert a New Element, which you can customize via prompts or manual editing.
• Editing Elements:
  • Pencil Icon: Click to open the element in the editing panel.
  • Deselecting Elements:
    • Click the element again to deselect.
    • Click the X button on the top right corner to remove the element from scope.

​

Top Bar

The top bar provides navigation and various view options to enhance your editing experience.

​

Left Side

• Close Button: Click to exit the Editor and return to the main dashboard.

​

Right Side

• Grid View: Toggle to compare variants side by side in a grid layout.
• Page View: Switch back to the standard single-page view.
• Edit Mode: Enable or disable element selection and editing.
• DOM Inspector: Toggle the DOM tree view for precise element selection.
• Device Toggle: Switch device views and adjust scale (50% to 150%).

​

Grid View

The Grid View allows you to compare multiple variants side by side.

​

Mobile View

Switch to Mobile View to see how your website and variants look on mobile devices.

​

DOM Inspector

Use the DOM Inspector to navigate and select elements directly from the DOM tree for precise control.