Getting started

From your first idea to a variant you can review.

Choose a page, describe the change, review the result, and take the code into your existing testing stack.

Public installation is not open yet. You can explore the interactive example now.

1. Open VibeVariant in Chrome

When public installation opens, install VibeVariant from its official Chrome Web Store listing. Pin it using Chrome’s Extensions menu, then open it on a website you are authorized to edit.

Sign in inside the extension. If you use an email link, open it in the same Chrome profile and return to VibeVariant once sign-in is confirmed.

Follow the extension’s permission prompts. If a preview asks for Allow User Scripts, open VibeVariant’s extension settings, enable that permission, and retry. Browser-protected pages and inaccessible frames are not supported.

2. Scope the experiment

Create a project and choose the pages the variant belongs to. Use Exact match for a complete URL, Simple match for a path regardless of query or hash, and Starts with for a URL prefix and its descendants. Use named page aliases for a multi-page journey.

Create a variant, then use the element picker to select the relevant headline, CTA, card, or section. Include enough surrounding context to explain the change.

3. Describe, build and review

Tell the copilot the outcome you want and what must stay the same: destinations, prices, offers, dynamic content and existing behavior. Attach a reference when it adds useful visual context.

Make this hero more specific to CRO teams and update the CTA to “Build the variant”.

The copilot can inspect the page, ask for a missing decision and propose JavaScript and CSS. Preview the result in the attached tab, refine it in conversation, or edit the code directly.

Verification checks the candidate against that page. Review responsive layouts, keyboard interaction and dynamic states yourself, then validate the implementation in your testing platform before launch.

Your request sends relevant page context to the AI service. Avoid sensitive pages and remove confidential details from prompts and attachments. Read how page context is handled.

4. Take the code into your testing stack

Open the code editor, review both the JavaScript and CSS, and copy them into the corresponding code fields in your experimentation platform. Apply the same URL targeting there and check when its code runs.

VibeVariant previews changes in your browser. Your platform delivers the traffic split; your analytics measure the experiment.

Runnable example from the guided demo

This example targets a sample webpage’s .hero section. Adapt selectors and behavior to your own page before using it elsewhere.

script.js

(() => {
  const hero = document.querySelector(".hero");

  if (hero) {
    hero.querySelector(".eyebrow").textContent =
      "More tests, less waiting";
    hero.querySelector("h1").innerHTML =
      "From test idea<br>to <em>working code.</em>";
    hero.querySelector("p").textContent =
      "Build and refine the JavaScript and CSS without waiting for the developer queue.";
    hero.querySelector(".button").textContent =
      "Build the variant";
    hero.classList.add("hero--variant");
  }
})();

styles.css

.hero--variant {
  background: #fff1c7;
}

.hero--variant h1 em {
  color: #985700;
}

.hero--variant .button {
  background: #34312d;
  color: #fffefc;
}

Test the copied implementation on the intended pages and screen sizes, preserve your tracking, and confirm the control and variant before starting the experiment.

Keep the next step focused.

Need help with setup or your first variant?

Contact support