Varili
Sign inGet started

Docs › Getting started › Quick start

Quick start

Varili is a low-friction workspace for vibe-style website editing, user research, and lightweight testing — including persona QA and heat-map insights. This guide gets you from zero to a first session in minutes.

Step-by-step

  1. 1

    Add your website

    From the home page, paste the URL of the site you want to edit or research. Varili loads a preview context so prompts apply to real structure — not a blank canvas.

  2. 2

    Install our browser extension

    Required for the best preview of protected sites (Apple, Amazon, Target). Add it from the Chrome Web Store, then reload Varili — the nav shows a green light when connected. Without it, Varili falls back to a proxy automatically.

  3. 3

    Add the connection code to your website

    Add our connection code to your site (usually in the header area or through your tag manager). That lets you publish changes to your live site and collect the performance data we use for experiments, heat maps, and results.

  4. 4

    Describe what you want

    Use plain language: copy changes, layout tweaks, persona QA, heat-map review, or a lightweight comparison between variants. The workspace is built for self-serve iteration.

  5. 5

    Review signals and ship

    Use heat maps, performance-oriented signals, and experiment summaries to decide what to keep. Persona runs help catch friction before you expand the test.

Adding the connection code

This is the same code referenced in Step 3 — one line, added as high as possible in your <head> so published changes and performance tracking work end-to-end:

<script src="https://YOUR_APP_DOMAIN/s/YOUR_SITE_ID"></script>

Replace YOUR_SITE_ID with the ID from Settings → Install. Each property has a unique site ID. When you publish from Varili, we detect your website type and show tailored instructions.

How the connection code talks to Varili

The snippet on your website never talks to our database directly. The one-line tag loads a small bootstrap from /s/YOUR_SITE_ID, which pulls in pbx.min.js from Varili. That SDK calls our API (/api/sdk/config and /api/track) to fetch published experiments and send analytics. Supabase credentials stay on our servers only — your site only needs the connection code once; every publish after that is picked up automatically.

Install by website type

Pick the guide that matches how your site is built. Varili auto-detects most website types when you load a URL — you can override it at publish time if needed.

Shopify

In Shopify, go to Online Store → Themes → Edit code, paste the code at the very top, then Save.

Where to put it

layout/theme.liquid

Your theme layout file — paste the connection code at the very top.

<script src="https://YOUR_APP_DOMAIN/s/YOUR_SITE_ID"></script>
  1. Log in to Shopify and go to Online Store → Themes. Open Shopify themes
  2. On your live theme, click ⋯ → Edit code.
  3. Under Layout, open theme.liquid. Help article
  4. Paste the connection code at the very top of that file.
  5. Click Save.
  6. Come back here and click Check it’s working.

WordPress

In WordPress, install “Insert Headers and Footers”, paste the code into the Header box, then Save.

Where to put it

Settings → Insert Headers and Footers → Header

Paste the connection code in the Header box so it loads on every page.

<script src="https://YOUR_APP_DOMAIN/s/YOUR_SITE_ID"></script>
  1. Log in to WordPress and go to Plugins → Add New.
  2. Install a plugin called “Insert Headers and Footers”. Get the plugin
  3. Open Settings → Insert Headers and Footers.
  4. Paste the connection code into the Header box and click Save.
  5. Come back here and click Check it’s working.

Wix

In Wix, go to Settings → Custom Code, add the code so it loads first on every page.

Where to put it

Settings → Custom Code

Add the connection code on all pages, placed first in the header area.

<script src="https://YOUR_APP_DOMAIN/s/YOUR_SITE_ID"></script>
  1. Log in to Wix and go to Settings → Custom Code. Help article
  2. Click + Add Custom Code and paste the connection code.
  3. Set it to show on All pages and load first.
  4. Click Apply.
  5. Come back here and click Check it’s working.

Squarespace

In Squarespace, go to Settings → Advanced → Code Injection, paste into Header, then Save.

Where to put it

Settings → Advanced → Code Injection → Header

Paste the connection code in the Header field.

<script src="https://YOUR_APP_DOMAIN/s/YOUR_SITE_ID"></script>
  1. Log in to Squarespace and go to Settings → Advanced → Code Injection. Help article
  2. Paste the connection code into the box labeled Header.
  3. Click Save.
  4. Come back here and click Check it’s working.

Webflow

In Webflow, go to Project Settings → Custom Code, paste at the top, then Publish your site.

Where to put it

Project Settings → Custom Code → Head code

Paste the connection code at the top of the head code area, then publish your site.

<script src="https://YOUR_APP_DOMAIN/s/YOUR_SITE_ID"></script>
  1. Log in to Webflow, open your site, and go to Project Settings → Custom Code. Help article
  2. Paste the connection code into the top Head code box.
  3. Save and Publish your site.
  4. Come back here and click Check it’s working.

Google Tag Manager

In Google Tag Manager, create a new tag, paste the code, set it to All pages, then publish your changes.

Where to put it

Tags → New → Custom HTML

Create a new tag for all pages, paste the connection code, then publish your changes.

<script src="https://YOUR_APP_DOMAIN/s/YOUR_SITE_ID"></script>
  1. Log in to Google Tag Manager and click Tags → New. Open Google Tag Manager
  2. Choose Custom HTML and paste the connection code.
  3. Set it to run on All pages.
  4. Save and publish your changes.
  5. Come back here and click Check it’s working.

HTML website

Paste the connection code near the top of every page’s header section, then save and publish your site.

Where to put it

Header section of your HTML template

Paste near the top of the header area on every page (or in your shared layout file).

Your connection code

<script src="https://YOUR_APP_DOMAIN/s/YOUR_SITE_ID"></script>
  1. Copy the code from step 1.
  2. Open your website files on your computer — look for the HTML file or template your site uses for every page.
  3. Find the header section at the top of each page (or in your shared layout file).
  4. Paste the connection code near the top of that header section.
  5. Save your changes and publish your site.
  6. Come back here and click Check it’s working.

Next.js

Your site looks like it was built with Next.js. Paste the connection code into your site’s main layout file, then publish your changes.

Where to put it

src/app/layout.tsx or app/layout.tsx

Open this file and paste the code inside the <head> section at the top. This is your site’s “first page” wrapper — it loads on every page.

Connection code for your layout file

// app/layout.tsx
import PbxHead from './integrations/pbx/PbxHead'
import PbxHydrationReady from './integrations/pbx/PbxHydrationReady'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <PbxHead siteKey="YOUR_SITE_ID" appOrigin="https://YOUR_APP_DOMAIN" />
      </head>
      <body>
        <PbxHydrationReady siteKey="YOUR_SITE_ID" appOrigin="https://YOUR_APP_DOMAIN" />
        {children}
      </body>
    </html>
  )
}

// integrations/pbx/PbxHead.tsx
export default function PbxHead({ siteKey, appOrigin }: { siteKey: string; appOrigin: string }) {
  return (
    <>
      <link rel="preload" href={`${appOrigin}/pbx.min.js`} as="script" fetchPriority="high" />
      <style
        id="pbxLoadingStyleSheet"
        suppressHydrationWarning
        dangerouslySetInnerHTML={{
          __html: "html::after { content: ''; position: fixed; inset: 0; background: #fff; z-index: 2147483647; }",
        }}
      />
    </>
  )
}

// integrations/pbx/PbxHydrationReady.tsx
'use client'
import { useEffect } from 'react'

export default function PbxHydrationReady({ siteKey, appOrigin }: { siteKey: string; appOrigin: string }) {
  useEffect(() => {
    window.pbx = window.pbx || []
    window.pbx.push(['init', { siteId: siteKey }])
    window.pbxDisplayPage = function (fromEngine?: boolean) {
      if (!fromEngine) window.pbxTimeout = true
      document.getElementById('pbxLoadingStyleSheet')?.remove()
    }
    window.pbxDisplayPageTimeOut = window.setTimeout(window.pbxDisplayPage, 750)
    if (document.getElementById('pbx-sdk')) return
    const script = document.createElement('script')
    script.id = 'pbx-sdk'
    script.src = `${appOrigin}/pbx.min.js`
    script.async = true
    document.head.appendChild(script)
  }, [siteKey, appOrigin])
  return null
}
  1. Copy the code from step 1.
  2. Open your site files (GitHub, your computer, or wherever you edit the site).
  3. Find and open src/app/layout.tsx or app/layout.tsx. Create it if it is not there yet.
  4. Paste the code inside the <head> section near the top — so it loads before the page shows (this prevents flicker).
  5. Save and publish your site the way you normally update it.
  6. Come back here and click Check it’s working.

React / Vite / CRA

Paste the connection code near the top of your site’s main HTML file (index.html), then publish your changes.

Where to put it

public/index.html

Open this file and paste the code near the top of the <head> section. This is the first page your site loads.

Connection code for index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My App</title>
    <!-- Varili snippet — paste as high as possible in <head> -->
    <script src="https://YOUR_APP_DOMAIN/s/YOUR_SITE_ID"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
  1. Copy the code from step 1.
  2. Open your site files (GitHub, your computer, or wherever you edit the site).
  3. Find and open public/index.html (sometimes just index.html in your project root).
  4. Paste the code near the top of the <head> section — so it loads before the page shows (this prevents flicker).
  5. Save and publish your site the way you normally update it.
  6. Come back here and click Check it’s working.

Writing effective prompts

Name the page, the change, and the goal. Mix editing, research, and light testing in one line when it helps:

“Tighten the hero on /pricing and run a persona review for objections before we A/B the headline.”

“Show heat map summary for the last week on /signup and flag the top three dead-click zones.”