---
title: "How to add guides and surveys to a Framer site"
description: "Add Amplitude guides and surveys to a Framer site."
canonical: "https://amplitude.com/en-us/build/framer-guides-surveys"
---

# How to add guides and surveys to a Framer site

Add Amplitude guides and surveys to a Framer site.

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

---

# How to add guides and surveys to a Framer site

Add Amplitude guides and surveys to a Framer site. Build a pricing-page survey, test its targeting, and verify a synthetic response.

- Framer
- Published site
- Browser SDK 2
- 30 min

Chris Tam · Last updated 19 October 2026

A visitor can review a plan on your Framer pricing page and still have a question about it. Amplitude [guides and surveys](https://amplitude.com/guides-and-surveys) let you ask for feedback while the plan is in front of them.

In this tutorial, you'll use a small product website to build a survey about pricing clarity. You'll install the engagement SDK, restrict the survey to pricing, and check its display and a synthetic response.

A pricing-page survey asking whether the plan is clear, with Yes and No choices and a Done button. You'll test its display, page restrictions, and a response in the same Amplitude project.

The example site follows a visitor evaluating a product: the home page introduces it, `/pricing` describes one plan, and a `Start test` button represents the decision to try that plan. For this demo, the button opens `/thank-you` so you can follow the navigation without creating an account or taking a payment.

## Prerequisites

- A Framer site where you can add custom code and publish changes.
- A published home page, `/pricing`, and `/thank-you`. On `/pricing`, add a `Start test` link to `/thank-you`.
- An Amplitude test project and its project API key from [your project settings](https://amplitude.com/docs/apis/authentication). Use the project's US data region for the code below.
- Guides and surveys enabled for your project, permission to save experiences, and access to test-user and survey response controls.

[Sign up for free](https://app.amplitude.com/signup) to create a project. Check your project's product access and quotas before moving beyond the test.

## 1. Load engagement with analytics

In Framer, open **Settings > Code > Add**. Name the snippet `Amplitude`, set **Placement** to **Start of \<head>**, choose **All pages**, and set **Run** to **Once**. Use the [Amplitude Quickstart's script installation](https://amplitude.com/docs/get-started/amplitude-quickstart) for this site without a build step.

Replace every `AMPLITUDE_API_KEY` with the same project API key. The key is public and has the scope needed for ingestion. Framer injects this value into the published page; keep secret and management keys out of it.

If Amplitude is already installed, merge the additions into that snippet. Keep one SDK loader and one `amplitude.init()` call, including lines added by other Framer tutorials. Use the browser snippet in Framer's site settings, outside an Embed component or canvas preview.

```html
<!-- Framer Settings > Code: Start of <head>, All pages, Once -->
<!-- Keep lines other Framer pages added here: Pricing CTA Clicked listener
(/build/framer-product-analytics), attribution.trackingMethod
(/build/framer-web-analytics), sessionReplay privacyConfig
(/build/framer-session-replay), replay sampling used by heatmaps
(/build/framer-heatmaps), experiment.js (/build/framer-web-experiment),
engagement.js and engagement.plugin() (/build/framer-guides-surveys). -->
<script src="https://cdn.amplitude.com/script/AMPLITUDE_API_KEY.js"></script>
<script src="https://cdn.amplitude.com/script/AMPLITUDE_API_KEY.engagement.js"></script>
<script>
if (!window.__amplitudeFramerInitialized) {
  window.__amplitudeFramerInitialized = true;
  window.amplitude.add(window.sessionReplay.plugin({ sampleRate: 1 }));
  window.amplitude.add(window.engagement.plugin());
  window.amplitude.init("AMPLITUDE_API_KEY", {
    remoteConfig: { fetchRemoteConfig: true },
    autocapture: {
      attribution: { trackingMethod: ["userProperty", "eventProperty"] },
      fileDownloads: true,
      formInteractions: true,
      pageViews: true,
      sessions: true,
      elementInteractions: true,
      networkTracking: true,
      webVitals: true,
      frustrationInteractions: true
    }
  });
}
</script>
```

This test configuration also starts session replay with `sampleRate: 1`. That requests capture of every eligible session; project settings and quotas still apply. To disable session replay, remove the `sessionReplay.plugin(...)` registration. Before a production rollout, choose the replay sampling and privacy settings you want.

Remote autocapture settings can override individual local options. If the expected page, click, or form events are missing, check **Data > Settings > Autocapture** in the project.

**Why.** Framer can navigate between pages without reloading the document. Running initialization once lets the SDK handle page views across those transitions without adding another listener on every route.

The [guides and surveys SDK guide](https://amplitude.com/docs/sdks/guides-and-surveys/sdk) registers the engagement plugin before `amplitude.init()`. Load the analytics script first, then `engagement.js`, synchronously. The plugin shares the analytics project's key and identity. It handles initialization; don't add separate `engagement.init()` or `engagement.boot()` calls.

## 2. Build a short pricing survey

Publish the snippet, then open **Guides & Surveys > Surveys** in Amplitude. Start a blank web survey, name it, and use a Modal for this example.

Add a title asking `Was this test plan clear?` and a short explanation. Add a List block with the prompt `Was the pricing clear?`, and add `Yes` and `No` as actual list items. Add a primary button labeled `Done` using the builder's **Go forward** action. Save the survey.

The list prompt and list items are separate fields. Typing `Yes` into the prompt doesn't create an answer option.

```text
Survey content
Title: Was this test plan clear?
Body: Help us improve this pricing page.
List prompt: Was the pricing clear?
List items: Yes, No
Button: Done
```

## 3. Restrict the survey to pricing

In **Setup**, choose **Specific Pages** and include the public pricing URL. Keep **Hide on all pages that don't match above rules** enabled so an active survey doesn't follow the visitor onto another page.

Choose **Immediately** for the trigger. Use the URL-rules test to confirm pricing matches and home doesn't. Save the changes. Use the test hostname while validating the setup, and change it deliberately when you move to your production domain.

```text
Survey Setup
Trigger: Immediately
Page: https://your-site.framer.app/pricing
Hide on non-matching pages: enabled
```

## 4. Preview on the published site

Choose **Preview** and enter the public pricing URL. Keep the Amplitude builder open while its preview tab loads.

Check that the survey appears and the choices work. Preview checks the SDK and display flow. It has a documented issue with multi-page apps, so use Testing status in the next step to check completion and navigation between your Framer pages.

## 5. Test a response before publishing

After the survey is saved, add your test device ID in **Test users** and change its status to **Testing**. Use the same test browser identity when opening the pricing page.

Choose a synthetic answer and complete the survey. Inspect the survey's **Responses** and **Insights** in Amplitude. Turn off **Ignore test/preview data** while checking synthetic responses, and choose a date range that includes the test. Navigate home and confirm the active survey hides there. Testing status limits eligibility to your specified test users; completion and dismissal history still apply. Once the response and page behavior pass, publish the survey to the intended audience.

## Verify it worked

1. **Published site:** use the public Framer URL. Open developer tools and confirm the Amplitude scripts load. Canvas preview isn't the published installation.
2. **Network:** confirm an event ingestion POST succeeds with HTTP 200. For the US endpoint, filter on `api2.amplitude.com`. Requests can be compressed, so use Instrumentation Explorer for event contents.
3. **Instrumentation Explorer:** inspect the event names, properties, and device ID. In Amplitude, find that device in **User Profiles** and check its activity. Use your test project, not another project in the organization.
4. **Preview:** the survey renders on pricing. Check Trigger, Limit, and Throttle statuses in the preview bar if it doesn't appear.
5. **Page rule:** home and thank-you don't display the active survey when the hide-on-non-matching-pages setting is enabled.
6. **Response:** in Testing status, submit a synthetic answer from an eligible device and confirm it in the survey's Responses view with **Ignore test/preview data** turned off. A loaded `engagement.js` script alone doesn't prove delivery or ingestion.

## Troubleshooting

### The published page has no events

Confirm the snippet is saved, published, assigned to All pages, and uses the intended project key. Check browser console errors and whether an extension blocks the script or ingestion request.

### One navigation produces two page views

Remove duplicate installations from site and page code, tag managers, and components. Keep one init call and let `autocapture.pageViews` track navigation. Inspect a fresh page load after publishing.

### A form event arrives, but no submission arrives at its destination

Form autocapture records an interaction. Configure the native Framer form's destination and its **Redirect** field separately, then verify delivery at that destination. A link on the form layer doesn't configure the success redirect.

### The survey doesn't appear

Confirm the engagement loader is published, uses the same key as analytics, and registers its plugin before init. Then check status, test-user identity, page rules, trigger, limits, and throttles.

### The preview appears once and then stops

Completion or dismissal history can suppress it. In the preview bar, inspect the Limit condition and use Reset User History for your test identity where appropriate.

### The SDK loads, but the Responses view stays empty

Verify a completed response from an eligible Testing user. Confirm the survey saved successfully, **Ignore test/preview data** is off, and both SDKs point to the same project. Keep server-side save errors separate from browser installation problems.

## Full code reference

This fresh-install snippet adds engagement after the analytics script and registers its plugin before init. Merge those two additions into an existing installation, preserving replay privacy, custom events, and Web Experiment.

Full code reference

```html
<!-- Keep lines other Framer pages added here: Pricing CTA Clicked listener
(/build/framer-product-analytics), attribution.trackingMethod
(/build/framer-web-analytics), sessionReplay privacyConfig
(/build/framer-session-replay), replay sampling used by heatmaps
(/build/framer-heatmaps), experiment.js (/build/framer-web-experiment),
engagement.js and engagement.plugin() (/build/framer-guides-surveys). -->
<script src="https://cdn.amplitude.com/script/AMPLITUDE_API_KEY.js"></script>
<script src="https://cdn.amplitude.com/script/AMPLITUDE_API_KEY.engagement.js"></script>
<script>
if (!window.__amplitudeFramerInitialized) {
  window.__amplitudeFramerInitialized = true;
  window.amplitude.add(window.sessionReplay.plugin({ sampleRate: 1 }));
  window.amplitude.add(window.engagement.plugin());
  window.amplitude.init("AMPLITUDE_API_KEY", {
    remoteConfig: { fetchRemoteConfig: true },
    autocapture: {
      attribution: { trackingMethod: ["userProperty", "eventProperty"] },
      fileDownloads: true,
      formInteractions: true,
      pageViews: true,
      sessions: true,
      elementInteractions: true,
      networkTracking: true,
      webVitals: true,
      frustrationInteractions: true
    }
  });
}
</script>
```

## Hand it to your agent

Use this prompt with an agent that can inspect your Framer settings and the published page.

Using Cursor or Claude Code? Paste this prompt

```text
Follow https://amplitude.com/build/framer-guides-surveys on my Framer test site.
Merge changes into existing custom code. Preserve the additions listed in its
keep-lines comment, and never delete lines another Amplitude Build page added.
Use one analytics loader and one init call. Create /pricing and /thank-you if
missing, and add a pricing CTA pointing to /thank-you. Ask for the project API
key if it isn't available; never insert a secret or management key. Don't reset
anonymous visitors or double-track autocaptured page views. Check the published
site after saving and publishing custom code. Report events and properties you
observed, separate docs checks from runtime tests, and list unresolved checks.
Register engagement before analytics init and do not add separate init or boot. Restrict pages to the test hostname. Verify a saved survey and a real synthetic response; report save failures rather than claiming success.
```

## What this unlocks

[Session replay](https://amplitude.com/session-replay) lets you inspect a recorded visit around `[Amplitude] Page Viewed` after replay capture is configured.

[Heatmaps](https://amplitude.com/heatmaps) show aggregate pricing-page interactions after heatmap capture and sufficient traffic are available.

[Experimentation](https://amplitude.com/amplitude-experiment) lets you compare variants using a defined conversion metric, alongside the experiment's exposure event.

[Guides and surveys](https://amplitude.com/guides-and-surveys) let you ask a targeted question on the pricing page after you install the engagement SDK and configure the experience.

## Next steps

[FoundationFramer product analyticsAdd a named pricing CTA event.](https://amplitude.com/build/framer-product-analytics)[BehaviorFramer session replayReview a visit while keeping form fields masked.](https://amplitude.com/build/framer-session-replay)

Reference docs

[Guides and surveys SDK →](https://amplitude.com/docs/sdks/guides-and-surveys/sdk)[Build a survey →](https://amplitude.com/docs/guides-and-surveys/build-a-survey)[Setup and targeting →](https://amplitude.com/docs/guides-and-surveys/setup-and-target)[Testing and publishing →](https://amplitude.com/docs/guides-and-surveys/testing)[Browser SDK 2 →](https://amplitude.com/docs/sdks/analytics/browser/browser-sdk-2)

Use [Amplitude MCP](https://amplitude.com/mcp) to inspect your project's existing event taxonomy before naming custom events.

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/framer-guides-surveys.md)[llms.txt](/llms.txt)

## Ship the instrumentation, then read the data

Once events are flowing, build a funnel for your pricing flow and use the checks above to verify the additional products you enable.

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