---
title: "How to add guides and surveys to a Webflow site"
description: "Add Amplitude guides and surveys to Webflow. Register the engagement plugin, target a pricing survey, and verify a test response."
canonical: "https://amplitude.com/en-us/build/webflow-guides-surveys"
---

# How to add guides and surveys to a Webflow site

Add Amplitude guides and surveys to Webflow. Register the engagement plugin, target a pricing survey, and verify a test response.

Source: https://amplitude.com/en-us/build/webflow-guides-surveys

---

# How to add guides and surveys to a Webflow site

Add Amplitude guides and surveys to Webflow, target a pricing-page question, and verify a test response. Allow about 25 minutes for setup and preview.

- Webflow
- Custom code
- Browser SDK 2
- CDN
- 25 min

Chris Tam · Last updated 19 October 2026

Visitors can read a Webflow pricing page and leave without explaining what was missing. [Guides and surveys](https://amplitude.com/guides-and-surveys) lets you ask that question on the page and review the response in Amplitude.

In this tutorial, I'll add the engagement plugin to the existing analytics installation, create a short pricing survey, and test its targeting. You'll preserve the replay and conversion tracking already on the site.

## What you'll build

A pricing-page survey loaded through the engagement plugin, with a synthetic response visible in survey insights and no manual standalone boot call.

## Prerequisites

- A Webflow site you can publish, with a plan or Workspace that permits custom code. Webflow lists eligible plans in its [custom code instructions](https://help.webflow.com/hc/en-us/articles/33961357265299-Custom-code-in-head-and-body-tags).
- Permission to edit Site settings and publish to a Webflow staging domain. Use a test site before changing production.
- Your Amplitude project API key from Settings > Projects > your project > General > Manage next to API Key. A manager or admin can copy it. The key is public and its scope is limited to the minimum needed to ingest data. Keep secret keys out of Webflow.
- The shared analytics head snippet and published Pricing page. Use the web analytics tutorial setup first if missing.
- Guides and surveys enabled for the web app in this Amplitude project.
- Access to create and preview a survey. Use the product analytics footer if you choose the optional event trigger.

A free account covers the Amplitude setup in this tutorial. [Sign up for free](https://app.amplitude.com/signup) to get your project API key. Webflow custom-code access has its own plan requirements.

## 1. Attach engagement after analytics is ready

Follow the [Guides and Surveys Web SDK plugin installation](https://amplitude.com/docs/sdks/guides-and-surveys/sdk). Keep the main loader immediately followed by the existing analytics configuration script. That initializer saves its completion promise as window\.webflowAmplitudeReady. Append the engagement script and block below after that configuration script. Use the same project key throughout.

```html
<!-- Webflow Head code: append AFTER the existing analytics configuration script -->
<script src="https://cdn.amplitude.com/script/AMPLITUDE_API_KEY.engagement.js"></script>
<script>
  // Keep the existing loader, replay plugin, analytics init, and privacy options.
  if (window.webflowAmplitudeReady && window.engagement) {
    window.webflowEngagementReady = window.webflowAmplitudeReady
      .then(() => window.amplitude.add(window.engagement.plugin()).promise)
      .catch((error) => console.warn("Guides and surveys did not initialize.", error));
  }
</script>
```

This uses the SDK's documented fallback: wait for analytics initialization to complete before adding the plugin. The project-specific main loader can initialize analytics automatically while a later external script loads, so keeping your analytics init immediately after it prevents a slow engagement download from racing that initializer.

The plugin manages engagement initialization and boot. Do not call engagement.init() or engagement.boot() separately. The fallback doesn't deliver analytics events sent before plugin attachment to engagement. Use Immediately for this first survey. For an event-based trigger, wait until window\.webflowEngagementReady resolves before performing the triggering action; an earlier event won't be replayed to engagement.

If you use EU data residency, use `cdn.eu.amplitude.com` for both script URLs and retain `serverZone: "EU"` in analytics options. Keep replay privacy settings and any `experimentConfig` before the main loader. If your analytics setup uses a custom proxy, follow the SDK's standalone proxy instructions instead of adding this plugin unchanged.

If your site waits for consent before collection or storage, configure your consent platform before enabling these scripts. The project-specific loader starts SDKs itself, so gate loading the entire Amplitude snippet on consent. Waiting to call your own `init()` while loading the script earlier does not provide that guarantee. Follow [Browser SDK consent guidance](https://amplitude.com/docs/sdks/analytics/browser/cookies-and-consent-management). Use a synthetic test site for the steps below.

## 2. Give a guide anchor a stable attribute

Select the Pricing CTA in Webflow and add `data-guide="pricing-help"`. Preserve `data-analytics` and `data-experiment` when present. The survey below uses a modal, so it needs no anchor; this attribute gives a later anchored guide a stable target.

```html
<!-- Pricing CTA attributes: preserve your destination and classes -->
<a href="#demo" data-analytics="pricing-cta" data-guide="pricing-help">
  Request a demo
</a>
```

Publish the script and attribute changes. Use the published page when previewing the survey.

## 3. Create a pricing survey and target the page

In Amplitude, open Guides and Surveys and create a web survey. Choose a modal and add a List question: `What would help you choose a plan?` Use `Feature details`, `Pricing details`, and `A product demo` as answer options. Require an answer and add a completion step.

In Setup and Targeting, target your published Pricing URL and choose Immediately for this first test. Check audience rules, display limits, and throttling. If you later use On event tracked with `Pricing CTA Clicked`, keep the product analytics footer: the plugin receives analytics events without a separate forwarding integration.

Browser Console on the published Pricing page

```javascript
// Browser Console on the published Pricing page
// Confirm the two SDK globals exist before starting Preview.
typeof window.amplitude;
typeof window.engagement;
```

For an anchored guide, target `[data-guide="pricing-help"]` and test the target at desktop and mobile widths before publishing it.

## 4. Preview and verify a response

Open the survey and choose Preview. Enter the published Pricing URL. Confirm the preview bar appears, complete the survey with a synthetic answer, and inspect the survey's Responses and Insights tabs. Turn off **Ignore test/preview data** while checking this response, and choose a date range that includes the test. That toggle excludes test and preview activity when enabled. Confirm the expected answer, visitor, and timestamp, and check that guide and survey events reach the same project as analytics. Restore the filter when reviewing production results. Follow the [survey analysis reference](https://amplitude.com/docs/guides-and-surveys/analyze-a-survey) for these controls.

Browser Console after completing the synthetic test survey

```javascript
// Browser Console after completing the synthetic test survey
window.amplitude.flush();
window.amplitude.getDeviceId();
```

Use Preview's Trigger, Limit, and Throttle conditions to diagnose a missing survey. Reset User History or ignore throttle limits in the test controls when appropriate. Web preview uses cross-window messaging, so keep the Amplitude preview tab open. A multi-page preview issue is documented; test this first survey on one page.

**MCP.** Ask your coding agent to inspect existing event names with the [Amplitude MCP server](https://amplitude.com/docs/amplitude-ai/amplitude-mcp) before adding tracking. Reuse the project's taxonomy when this tutorial's example names already have equivalents.

## Verify it worked

1. **Published site:** Open the staging URL directly. Check that the SDK request succeeds and the Console has no integration errors. Saved custom code reaches the live site only after publishing.
2. **Network:** Confirm an event POST to `api2.amplitude.com` returns `200` for a US project. EU ingestion uses `api.eu.amplitude.com`. Use Network for delivery status; large event batches can be compressed.
3. **Instrumentation Explorer:** Read the event names and properties in the Chrome extension. Note `device_id` and run the action once to check the count.
4. **User profile:** In Amplitude, open Users > User Profiles, search the device ID, and check the event stream. Allow ten seconds to one minute. Data > Sources > Ingestion Debugger shows request and event counts, rather than individual events.

Confirm a completed synthetic survey response in the survey views as well as analytics delivery. Loading the SDK alone is not a survey-response test.

## Troubleshooting

### The engagement plugin reports an initialization error

Keep the main loader and its one analytics initializer together, then load engagement and wait for webflowAmplitudeReady before adding its plugin. Keep the analytics completion promise when merging other pages.

### Preview opens but the survey is missing

Inspect Trigger, Limit, and Throttle in the preview bar. Check the published URL, project, web app enablement, and cross-window messaging.

### Nothing happens after saving the code

Publish the site and open its staging URL directly. Check Site settings and Page settings for duplicate scripts. A change in the settings editor is not a deployment.

### The SDK request fails or events never upload

Check the key, region, browser extensions, and Console. Follow the relevant SDK's endpoint and CSP guidance for a blocked request; keep existing security policies in place.

### You see two page views for one navigation

Check for a second installation in page code, embeds, and GTM. Keep the site-wide initializer and let autocapture send page views; remove your manual page-view call.

### The observed tracking differs from the snippet

Review Data > Settings > Autocapture. Remote settings take precedence over the local autocapture options when remote configuration is enabled.

## FAQ

### Should I call boot after adding the plugin?

The Browser SDK plugin manages initialization and boot. Manual calls belong to the standalone path, including proxy installations.

### Why does a survey fail to appear after the SDK loads?

Check the web app setting, targeting, trigger, limits, and throttle. An SDK global confirms a bundle loaded; it doesn't prove a visitor is eligible.

## Full code reference

This shows the combined Head code after these additions. Merge the changed lines into your existing head; keep any experiment consent configuration above the loader. Unchanged from earlier pages; keep your versions: Footer code, CTA and form attributes, navigation, and page content.

Full code reference

```html
<!-- Webflow Site settings > Custom code > Head code -->
<!-- Keep lines other Webflow pages added here: replay privacyConfig (/build/webflow-session-replay), engagement after webflowAmplitudeReady (/build/webflow-guides-surveys), experimentConfig before this loader (/build/webflow-web-experiment). -->
<script src="https://cdn.amplitude.com/script/AMPLITUDE_API_KEY.js"></script>
<script>
(() => {
  if (!window.amplitude || !window.sessionReplay) {
    console.warn("Amplitude did not load. Check the CDN request and site policy.");
    return;
  }
  window.amplitude.add(window.sessionReplay.plugin({
    sampleRate: 1,
    privacyConfig: {
      defaultMaskLevel: "conservative",
      maskSelector: ['[data-replay-mask="true"]'],
      blockSelector: ['[data-replay-block="true"]']
    }
  }));
  window.webflowAmplitudeReady = window.amplitude.init("AMPLITUDE_API_KEY", {
    remoteConfig: { fetchRemoteConfig: true },
    autocapture: {
      attribution: true,
      pageViews: { trackHistoryChanges: "pathOnly" },
      sessions: true,
      formInteractions: true,
      fileDownloads: true,
      elementInteractions: false,
      frustrationInteractions: false,
      networkTracking: false,
      webVitals: false
    }
  }).promise;
})();
</script>
<!-- Webflow Head code: append AFTER the existing analytics configuration script -->
<script src="https://cdn.amplitude.com/script/AMPLITUDE_API_KEY.engagement.js"></script>
<script>
  // Keep the existing loader, replay plugin, analytics init, and privacy options.
  if (window.webflowAmplitudeReady && window.engagement) {
    window.webflowEngagementReady = window.webflowAmplitudeReady
      .then(() => window.amplitude.add(window.engagement.plugin()).promise)
      .catch((error) => console.warn("Guides and surveys did not initialize.", error));
  }
</script>
```

## Hand it to your agent

Use this prompt with the tutorial content attached.

Using Cursor or Claude Code? Paste this prompt

```text
Agent task: Webflow guides and surveys.
Keep the main loader and analytics init together. Append the engagement script after that configuration block, then await webflowAmplitudeReady before registering its plugin. Preserve webflowEngagementReady and disclose the early-event trigger limitation. Preserve replay privacyConfig, experimentConfig, autocapture options, and the conversion footer. Use the same key and region. Do not call engagement init or boot in plugin mode. Create a test pricing survey with page-load targeting and verify a synthetic response in Amplitude. Test both desktop and mobile anchors for any guide. Report preview, response ingestion, and hosted verification separately.
```

## What this unlocks

[Product analytics](https://amplitude.com/amplitude-analytics) supplies the `Pricing CTA Clicked` event for an event-triggered experience.

[Session replay](https://amplitude.com/session-replay) helps you inspect the visit around a survey interaction, subject to masking.

[Web Experiment](https://amplitude.com/web-experimentation) tests a page change suggested by the feedback.

[Web analytics](https://amplitude.com/web-analytics) connects the visit to the campaign that brought the visitor.

## Next steps

[WebflowHow to add web analytics to a Webflow siteA published Webflow site with automatic page views and sessions, plus a test visit attributed to \`utm\_campaign=webflow-build-qa\`.](https://amplitude.com/build/webflow-web-analytics)[WebflowHow to add product analytics to a Webflow siteA \`Pricing CTA Clicked\` event and a \`Demo Request Confirmed\` event, with fixed properties and no form field values in your custom events.](https://amplitude.com/build/webflow-product-analytics)[WebflowHow to add session replay to a Webflow siteA replay of a Home-to-Pricing visit with synthetic form input masked, a private text region masked, and an excluded region blocked.](https://amplitude.com/build/webflow-session-replay)

Reference docs

[Sdk →](https://amplitude.com/docs/sdks/guides-and-surveys/sdk)[Get started →](https://amplitude.com/docs/guides-and-surveys/get-started)[Build a survey →](https://amplitude.com/docs/guides-and-surveys/build-a-survey)[Setup and target →](https://amplitude.com/docs/guides-and-surveys/setup-and-target)[Testing →](https://amplitude.com/docs/guides-and-surveys/testing)[Analyze a survey →](https://amplitude.com/docs/guides-and-surveys/analyze-a-survey)[Amplitude MCP server →](https://amplitude.com/docs/amplitude-ai/amplitude-mcp)

Amplitude is the leading [all-in-one analytics platform](https://amplitude.com/) for building better products. Product and engineering teams use Amplitude to connect [product analytics](https://amplitude.com/amplitude-analytics) and [web analytics](https://amplitude.com/web-analytics) with [session replay](https://amplitude.com/session-replay), [heatmaps](https://amplitude.com/heatmaps), [experimentation](https://amplitude.com/amplitude-experiment), [feature flags](https://amplitude.com/feature-management), and [guides and surveys](https://amplitude.com/guides-and-surveys) in one unified workflow, with [AI agents](https://amplitude.com/ai-agents) working across all of it. Learn how Amplitude is building [self-improving products](https://amplitude.com/self-improving-products) with [Wave](https://amplitude.com/wave), helping teams turn product data into PRs.

For agents

[View raw .md](/build/webflow-guides-surveys.md)[llms.txt](/llms.txt)

## Ship the instrumentation, then read the data

Use the verification steps above to check the events and product behavior you enabled.

[Create a free account](https://app.amplitude.com/signup)[Browse all Build tutorials](https://amplitude.com/build)