Installation

Webflow setup

Publish the SDK in Webflow custom code and prepare selector-based experiments.

Last updated: May 22, 20268-14 minBeginner to intermediate
Start free See pricingMethodology

What does this do?

Webflow setup helps make the installation workflow decision-ready in Testvoy. The goal is not only finding a setting, but understanding why it exists, how to read the outcome and where to debug first.

Know when to use it

Learn which UI fields matter

Know what success looks like

Webflow setup screen flow
SetupQAReport
This placeholder can be replaced with a real product screenshot later.

When should you use it?

Use this guide during first setup, experiment creation, report interpretation or before sharing with a client or team. Testvoy keeps the workflow approachable for non-technical users while still exposing SDK, event and security context for developers.

  1. 01

    Choose the relevant workspace and project

  2. 02

    Follow the checklist on this page

  3. 03

    Verify with preview or verifier

  4. 04

    Share the setting or report with the team

How to do it

Most Testvoy workflows follow the same pattern: choose context, define the rule or change, then verify through QA and reporting. This keeps the product focused on decision quality, not only running tests.

  • Is the workspace correct?
  • Is the project key or domain correct?
  • Does the goal/event match?
  • Were mobile and desktop checked?
  • Any bot/SRM or dropped event warning?

Example placement for Webflow

For Webflow, the goal is to load the snippet once on every page you want to test. Using the theme or custom code head area applies visual changes earlier. For platform-restricted areas such as checkout, verify event and goal scope separately.

  1. 01

    Open theme or custom code settings

  2. 02

    Find the head/custom head area

  3. 03

    Add the Testvoy script once

  4. 04

    Complete cache/publish

  5. 05

    Check SDK loaded on the live page with view-source or verifier

Webflow head area example
<script
  async
  src="https://cdn.testvoy.com/sdk/v1/testvoy.min.js"
  data-project-key="PROJECT_KEY_HERE">
</script>

Practical scenario

A growth team changes CTA copy on the pricing page, connects signup_started and signup_completed goals, then reads Google Ads and returning visitor segments separately. If the result is promising, they share a report link with the client or leadership.

Common mistakes

Most mistakes come from wrong project keys, overly broad selectors, missing goals, staging/prod mixups, early decisions on small samples or skipping mobile QA.

Naming an experiment 'test'

Launching without a goal

Deciding on total CVR only

Sending screenshots instead of shareable reports

Related pages

Visual editorHow to write CSS selectors

Write stable selectors with ID, class, data attribute, parent-child and fragile nth-child examples.

InstallationJavaScript SDK installation

Install the Testvoy Browser SDK through the CDN and verify your first event.

Frequently asked questions

Who is Webflow setup for?

Marketing, growth, product and developer teams can use the same guide at different depths.

Do I need a developer?

Not for basic visual changes and report reading; SDK, custom events, custom JS or enterprise security benefit from technical support.

How do I know it worked?

Verifier, recent events, preview, QA checklist and report warnings show setup and experiment health.

What is the common mistake?

Wrong project keys, missing goals, fragile selectors, early decisions on small samples and skipped mobile QA are common.

Docs

Try this guide in the app

Finish setup, create your first experiment and read the report with cleaner data in Testvoy.

Start free Docs