How to embed a survey on your site

Embedded surveys appear inline with the content on your page, at a specific location you choose. Unlike Popover, Button, or Bubble surveys, an embedded survey doesn't hover over the page — it becomes part of it. Use this survey type to collect contextual feedback tied directly to a page section (for example, a product description, a completed booking, or an article).

Before you begin 

• The Contentsquare tag must be installed on the page where you want to embed the survey.
• You'll need the CSS selector of the page element where the survey should appear (see below)

Find the CSS selector of your target element

1. On your site, right-click the element where you want the survey to appear and select Inspect (in Chrome, Edge, or Firefox). This opens your browser's Developer Tools with the element highlighted.
2. In the Developer Tools panel, right-click the highlighted element in the HTML view, then select Copy → Copy selector.

You now have the CSS selector to paste into the survey targeting configuration.

If you're not comfortable using Developer Tools, ask your web developer for the selector of the element where the survey should appear.

Embed a survey on your site

Create or edit a survey.

1. In the Design step, under Type, select Embedded.
2. In the Target step, under Pages, select Specific pages.
3. In Position on page, enter the CSS selector of the element where the survey should appear. The survey will be embedded at the first matching element on the page.
4. Continue configuring your survey through the rest of the Target step and the Review step.
5. Save and activate your survey.

Once the survey is active, it will appear inline within your chosen page element the next time a matching user visits the page.

Test your embedded survey 

1. Set your survey status to Active.
2. Open the page in your browser (in a device and context that matches your targeting rules).
3. Navigate to the section where your target element sits — the survey should be visible inline.

Changes made to an embedded survey can take up to 60 seconds to reflect on your live site.

FAQs 

What happens if my target element selector matches multiple elements on the page?

The survey is embedded at the first matching element on the page.

What happens if the target element doesn't exist on the page?

The survey won't appear. Check that the selector is correct and that the element is rendered on the page when your targeting rules match.

Can I embed a survey inside an iframe?

Yes, but the Contentsquare tag must be installed on the iframe's source page. See Tracking iframes inside Session Replay and Heatmaps for guidance.

Can I customize the appearance of an embedded survey?

Yes. Standard appearance controls apply (language, colors, branding). Custom CSS is available on the Voice of Customer Pro plan.

Why isn't my embedded survey appearing?

Common causes:

• The target element selector doesn't match any element on the page.
• Your targeting rules (URL, event, User Attributes) haven't matched.
• The Contentsquare tag isn't installed on the page.
• Changes take up to 60 seconds to propagate — refresh after a short wait.