Skip to main content

Myop Dashboard

Why Use Myop's Dashboard?​

The Myop dashboard gives you tools to efficiently manage and update UI components. With an intuitive interface, you can create, edit, and publish changes in real-time, freeing you to focus on your next feature while variant updates run automatically, keeping your workflow smooth and uninterrupted.

Terminology​

Component​

A Myop component acts as an API layer between logic and variant, enabling the logic to communicate with new variants or new components. This contract allows runtime UI updates without modifying core code. Components include Refs and Props to define logic, while variants reflect the visual aspect.

Variant​

Defines the visual appearance of a component. Myop allows multiple variants per component, enabling developers to swap or update the UI dynamically at runtime. Variants can be created using HTML, IFrame, or Web Components. A single component can have multiple variants assigned and switched remotely. When using IFrame or Web Component, variant can also include basic logic. The default variant is defined manually and reflects the main variant of the component in the Myop system.

Refs​

Refs are a tool for interacting with elements across components. It can be defined as either "myop-id" data attribute, CSS selector, or xpath. It serves three main purposes:

  • Message communication: Refs can be sent in messages to trigger actions or pass data between components.
  • Direct manipulation: Developers can directly access and modify properties through refs, such as changing the title or the background color of an element.
  • External integration: Refs allow embedding a component within another one, enabling dynamic interaction and reuse.

Props​

Runtime-generated objects that enable bidirectional data flow between the dashboard and components. While props are crucial, they are typically used in more complex, advanced scenarios.

Segment​

A user classification based on predefined rules (e.g., role, location, behavior). In Myop, a segment is a semantic reference to a function defined in the customer’s code.

Experience​

Reflects a combination of a Segment and Variant, determining which variant or UI version a user sees. Types of Experiences:

  • Basic Experience: Assigns a variant to a whole segment.
  • A/B Testing: Splits a segment into multiple equal groups for controlled experimentation.
  • Promo Experience: Defines a start and end date for a specific variant. After expiration, Myop automatically rolls back to the default configuration.

Flow​

A collection of components grouped for testing or experimentation.

HTML Component​

A reusable piece of HTML code that can be used in web development. It generally describes any encapsulated unit of HTML that might include structure (elements), behavior (JavaScript), and styling (CSS).

Web Component​

A set of web platform APIs that allow you to create custom, reusable HTML tags. It encapsulates functionality and styles, ensuring that it remains isolated from other code on the page. Web components typically consist of three main technologies:

  • Custom Elements
  • Shadow DOM
  • HTML Templates.

iFrame​

An inline frame (known as iFrame) is an HTML element that allows you to embed another document within the current HTML document. It creates a separate browsing context, which means it can contain a different webpage or resource and operates independently within the enclosing document.

Composite​

A higher-level UI structure that groups multiple components or other composites. It helps developers organize complex UI hierarchies while keeping the UI modular and flexible.

Key Capabilities​

  1. Variants Lifecycle Management: Manage variants separately from your codebase, so you can update or rollback changes without touching the core logic.
  2. Built-In Testing and Segmentation: Assign variants to specific user groups, run A/B tests and create tailored experiences, all directly from the dashboard.
  3. Visualization and Navigation: Keep everything organized. Easily navigate variants, version histories, and components to streamline your workflow.
  4. AI-Driven Enhancements: Leverage AI-assisted tools to explore faster variant creation and smarter automation — at your own pace and on your terms.

Let's Deep Dive​

Let’s take a closer look at how the Myop dashboard works and explore its key capabilities in action. Here’s a breakdown of its features before diving into the screenshot walkthrough. Open a Myop Account Myop Dashboard

Component Management​

Once the Myop library is installed, your components appear on the dashboard, giving you a centralized interface to view active components and manage their configurations seamlessly. Component Overview Create New

View and Edit Binding Rules​

Access and modify binding rules (refs and props) that link your component's logic to its variant. Add Refs and Props Explore or Add Component Binding Rules

Explore and switch between variants effortlessly, with zoom capabilities for detailed inspection and adjustments. Explore Variant

Add New Variants​

Add variants using technologies you’re comfortable with, such as plain HTML, design-to-code tools, AI-generated variants, Web-components, or iFrames. Add Variant

Create User Flows​

Combine multiple components into user journeys when they share dependencies, serve related functions, belong to a feature set, or require a specific order—such as onboarding, registration, or checkout flows. User flows are needed for designing multiple experiences across an entire journey. Build User Flows

Experience Editor​

The Myop Experience Editor is a visual tool that allows you to design, customize, and manage experiences. It provides a clear interface to modify component variants, define user flows, assign segments, and preview changes in real time Build Flows View Flows

Modify Variants​

Click on a component to preview and modify variants directly in the Experience Editor to ensure everything looks and works as expected. Change Variants

Create a Segment​

Currently, Myop Segments can only reference a function defined within your code. Create Segments

Campaign / Promo Management​

Set start and end dates for variants tied to campaigns or events, like special promotions or holiday themes. Once a campaign ends, Myop automatically reverts to the default experience, saving you the hassle of manual rollbacks. Time-Limited Skin

Testing and Optimization​

Assign variants to specific user groups or test multiple variants on separate user groups, then roll out the best option effortlessly. Testing and Segmentation Switch between variants easily, and with one click, translate your actions and decision trees into a complete configuration.

Publish Changes​

Deploy UI updates to production with a single click. Myop supports on-prem solutions when required. Myop also lets you download configurations for local testing, deployment, or integration into your existing workflows. Publish Changes


Dive in to Myop and get started today to focus on building, not revising.​