Lovable Integration

Run A/B tests on apps built with Lovable. This guide walks you through adding CADENCE to a Lovable project using the script tag approach, with exact prompts you can paste into Lovable's AI chat.

How It Works

Lovable generates React + Vite + TypeScript apps with an index.html file. CADENCE loads via a single <script> tag in that file. The SDK auto-initializes, fetches your experiment config, and applies visual changes — no React code or npm packages needed.

Step 1: Add the Script Tag

Paste this into Lovable's AI chat:

Add this script tag to the <head> section of index.html, before any other scripts:

<script src="https://cdn.softpath.co/sdk/v1/cadence.min.js" data-project="YOUR_PROJECT_ID" data-api-url="https://cdn.softpath.co"></script>

Do not create any wrapper components, React hooks, or additional JavaScript for this. The script tag alone handles everything.

Replace YOUR_PROJECT_ID with your actual Project ID from the CADENCE dashboard (looks like proj_Ax8mK2pQr4nB).

Get your Project ID

Find your Project ID on your project Settings page in the CADENCE dashboard, under the Quick Install tab.

Include data-api-url

Since your Lovable app runs on a different domain than CADENCE, you must include data-api-url="https://cdn.softpath.co" so the SDK knows where to send data. Without it, the SDK tries to use your Lovable app's domain, which will fail.

Step 2: Create an Experiment in CADENCE

  1. Go to your project in the CADENCE dashboard
  2. Click New Experiment
  3. Choose Visual Editor mode to make changes visually, or Code mode for custom logic
  4. Set the Target URL to your Lovable app's deployed URL (e.g., https://your-app.lovable.app/page)
  5. Add your variants and make changes using the Visual Editor
  6. Set traffic allocation and split weights
  7. Click Start

Step 3: Deploy and Test

Deploy your Lovable app. To preview a specific variant, append ?cadence_variant=Variant+A to your URL:

https://your-app.lovable.app/page?cadence_variant=Variant+A

This forces that variant to display regardless of the normal assignment, which is useful for QA and demos.

Zero-Code Conversion Tracking

Add data-cadence-goal to any clickable element to track conversions. Tell Lovable:

Add the attribute data-cadence-goal="cta-click" to the main CTA button.

When a visitor clicks the element, CADENCE automatically tracks a conversion event. No additional JavaScript needed.

You can also configure conversion rules in the CADENCE dashboard (under experiment settings) for:

  • URL match — track when a visitor reaches a specific page (e.g., /thank-you)
  • Click — track when a visitor clicks a specific CSS selector (e.g., #buy-now-btn)

Code-Based Experiments (Advanced)

For tests that need custom JavaScript logic beyond visual changes, tell Lovable to add a script block after the SDK tag:

Add this script block to index.html, after the CADENCE script tag:

<script>
  Cadence.ready().then(function () {
    var variant = Cadence.getVariant('my-experiment')
    if (variant === 'new-layout') {
      document.querySelector('.hero').classList.add('layout-b')
    }
  })
</script>

Cadence.ready() waits for the SDK to load your experiment config before running the code.

Preventing Content Flash

If your test changes visible elements and you notice a brief flash of the original content, add data-anti-flicker:

Update the CADENCE script tag in index.html to include the data-anti-flicker attribute.

The page stays hidden until variants load or 2 seconds pass — whichever comes first.

Troubleshooting

Config request returns 400 or "undefined" in the URL

Make sure the data-project attribute has your actual Project ID value (starting with proj_). If you see /api/sdk/undefined/config in the Network tab, the Project ID isn't being read correctly — check for typos in the attribute name.

Variant not loading / no visual changes

Check these in order:

  1. Network tab: Is the /api/sdk/p/.../config request returning 200?
  2. Experiment status: Is the experiment in Running status in the CADENCE dashboard?
  3. Target URL: Does the experiment's target URL match the page you're on (including the path)?
  4. Visual mutations: Did you save visual changes in the Visual Editor?

SDK not found on the page

Open the browser console and type Cadence. You should see an object with methods like init, getVariant, and track. If you see "Cadence is not defined", the script tag isn't loading — check that it's in the <head> section of index.html.

Events not appearing in the dashboard

Events are batched and sent every 5 seconds. Wait a moment, then refresh. Check the Network tab for requests to /api/sdk/p/.../events — look for 4xx errors that indicate a connection issue.

What's Next