With CSS selector trigger, you can prompt a survey when a user interacts with a specific element within a page. For example, you can select a certain component or CTA button to trigger a survey. While this approach doesn’t necessarily require making changes in the source code of your product, you need to know which component or element in HTML/CSS to trigger the survey. Follow the steps below to launch a survey with CSS selector trigger.
Step 1. Identify which specific element in the page you want the survey to show up. There are a few ways to do this. If you have access to the source code, you can inspect the code to identify the class name of the component.
Step 1.1. A quick alternative is to use developer mode in the browser to inspect the elements. For Chrome, you can find the option under View > Developer. For Safari, go to Preference > Advanced tab > Click Show Develop menu in menu bar.
Step 1.2. Open the website with developer mode turned on. You will be able to see the HTML/CSS file. Hover over the elements you want the survey to be triggered.
Example below uses Hubble website below. We want to trigger the survey when a user selects the Get started for free today! button. As I hover over the button, the corresponding code section is highlighted. The class name is primary-button w-button. Save the class name, which will be used to publish the survey later on.
Step 3. Design your in-product survey as needed. Have the study ready to publish.
Step 4. Click Publish on the top right that will prompt a configuration screen.
Step 5. Select CSS Selector, which will prompt the survey when a user lands on the specified URL. In the #selector, paste in the class name. Add additional CSS selector by clicking + Add another selector as needed.
Step 6. Configure the rest of the setup and publish the study. Once you publish the survey, you can still edit the CSS selector tags, which gives you flexibility to edit live studies. Make sure to test the survey before sharing it with testers.