> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.screeb.app/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to embed Surveys directly on your website

**Enhance user engagement by embedding surveys directly into your website pages. Follow these steps to set up and customize your in-page surveys without requiring technical expertise.**

### ${color}[#5b7083](1️⃣ Go to Surveys)

Navigate to the survey section within your account to create or manage your surveys.

[![](https://storage.crisp.chat/users/helpdesk/website/-/b/7/7/3/b773c527a4dce800/03571f4f-3e1d-4966-a14d-1ad3a7_1qzemsm.png)](https://downloads.intercomcdn.com/i/o/1117430710/427084d1978e88d8861981c2/Screenshot+2024-07-18+at+12_29_41.png?expires=1767195000&signature=53e99f7f98e8907b0a9f851a12b15a0d3c2a24999246728b9717fed13c1ff70f&req=dSEmEc19nYZeWfMW1HO4zfqjn01BHYCvcl%2B3GealRGxzWY8gKGsD5ZOzU1YN%0Ai7GrOlQQTfyKXjE4YWM%3D%0A)

### ${color}[#5b7083](2️⃣ Select In-page Embedded Survey)

Choose the option for an "In-page Embedded Survey" to integrate the survey seamlessly into your web content.

[![](https://storage.crisp.chat/users/helpdesk/website/-/2/8/c/0/28c0cce815d2bc00/fde17cf9-e693-4d46-92ba-135a33_10o4x0w.png)](https://downloads.intercomcdn.com/i/o/f9ft79uz/1551650408/6f95c7a7f7c0c3e4d29684f3e942/Screenshot+2025-05-30+at+10_17_02.png?expires=1767195000&signature=1a17b2fa82ed0c99785b1e6be4373c169d0b115e30646aaa7485682e498024f1&req=dSUiF897nYVfUfMW1HO4zRRUiFd2929TKqCVEySwJzCB4w05hFW8pjgghC4L%0AcpCdlxutY3ytuU5yg8k%3D%0A)

### ${color}[#5b7083](3️⃣ Targeting and Placement)

1. **Define Target Audience:** Set rules to specify who will see the survey, such as based on user behavior or specific page views.
2. **Choose Placement:** Identify the exact spot on your webpage where the survey should appear by providing a CSS Selector.

[![](https://storage.crisp.chat/users/helpdesk/website/-/8/4/7/c/847ca6bf48a83800/51e2d203-ce3c-421d-a1f5-ae8930_9ldt76.png)](https://downloads.intercomcdn.com/i/o/f9ft79uz/1551650834/03a8da4f6a9ffca233480a29359c/Screenshot+2025-05-30+at+10_17_53.png?expires=1767195000&signature=0c8fff90b200634214400b7dee476c658fde971e3e786888a7771e397894bea9&req=dSUiF897nYlcXfMW1HO4zfp84HizAvfDg0hWkgq18UW1AzXYOhD4CHRiRlAs%0Axg8qNpe4KbRqiVZ%2FEDo%3D%0A)

###### How to Find the CSS Selector:

* Use the "Pick an Element" tool to visually select the desired element on your website.
* Enter your website URL (ensure the Screeb tag is installed) to open a new tab where you can directly select the element for embedding.

[![](https://storage.crisp.chat/users/helpdesk/website/-/f/e/c/d/fecd09f3dde39800/08967563-4640-49bc-b198-301a43_1tg11h7.png)](https://downloads.intercomcdn.com/i/o/f9ft79uz/1551651302/8fd0ea44514e129f8b9cc95324e5/Screenshot+2025-05-30+at+10_18_03.png?expires=1767195000&signature=e24066ed1091e767a38f19100d024c8aa87f535ac34b515559f243c5953b7209&req=dSUiF897nIJfW%2FMW1HO4zVdx7cC%2BotiPEuQD7HmEpijmEiaQmMhOQcK3zqkA%0ANG9YPDgeG5cxOKvvi4M%3D%0A)

Example :

[![](https://storage.crisp.chat/users/helpdesk/website/-/1/c/4/c/1c4c6bed4ab3040/f7c0c36b-f5fc-4442-a9b7-f49279_j94icp.png)](https://downloads.intercomcdn.com/i/o/1150812958/ef8bcb7ae297e0edcda9377a/Capture+d%E2%80%99e%CC%81cran+2024-08-19+a%CC%80+16_22_56.png?expires=1767195000&signature=cf089ce9029aaf90b7860b5fc2ba73de054b5d5e6f342383fac531af36986a68&req=dSEiFsF%2Fn4haUfMW1HO4zTEeD2BEtioubEo3%2BzR4EhGqp5a0bsHbkcLbL0LA%0AVLTbHiXz1Dk98vFpE80%3D%0A)

Use the "pick an element" to choose directly on your website or use directly the CSS class.
Then, just confirm the emplacement.

[![](https://storage.crisp.chat/users/helpdesk/website/-/c/b/8/1/cb81821789eb980/e854972d-ae28-4c32-bbba-e6998a_h30uul.png)](https://downloads.intercomcdn.com/i/o/1150819379/62c2494af06cda66d9f47941/Capture+d%E2%80%99e%CC%81cran+2024-08-19+a%CC%80+16_27_54.png?expires=1767195000&signature=f466e1fe09b3ed899018b3aeb77929d2a850c5bf3a59754761b8b164fafaa772&req=dSEiFsF%2FlIJYUPMW1HO4zT8Gd6O%2F%2By24QZ2Tkn27iLLPOreMMhOAYvWH9jN4%0AmG7pHvZi5Fz06bV9gGE%3D%0A)

* Alternatively, if you know the CSS class or ID, you can enter it manually.
* You can also use advanced CSS selectors to find any dom elements
* `.is-home-page, .is-user-page` Use a comma to match multiple elements.
* `[class*="-page"]` Match any elements with "-page" in their classes.
* Check W3C doc about CSS selectors for more advanced usages: [https://www.w3schools.com/cssref/css_selectors.php](https://www.w3schools.com/cssref/css_selectors.php)

###### How can I find the CSS class?

Watch this video:
${frame}[](https://www.youtube.com/embed/0QAyqXDpwbE)

### ${color}[#5b7083](4️⃣ Customize your surveys)

* After setting the placement, go to the Design Settings within your workspace to tailor the look and feel of the survey. Match it to your website's design for a seamless user experience.

💡Tips:
**Preview**: Always preview the survey on different devices to ensure it looks great everywhere.
**Test**: Verify the survey’s placement and functionality across various browsers and screen sizes.
**Optimize**: Monitor the survey’s performance and adjust as needed based on user feedback.