Embed Surveys

Embed Surveys in Your Web Page

Embedding Formbricks surveys directly into your web pages allows you to integrate interactive surveys without redirecting users to a separate survey site. This method ensures a seamless integration and maintains the aesthetic continuity of your website or application.

How to Use it?

1. Create and publish a link survey.

2. Open survey summary page and click on share button on the top right.

3. In the survey share modal, click on Embed survey button.

4. Navigate to Embed in a Web Page tab and click on Copy code

5. Paste the copied iframe code into the HTML of your web page where you want the survey to appear.

Example of Embedding a Survey

<div style="position: relative; height:100vh; max-height:100vh; overflow:auto;">
  <iframe
    src="https://app.formbricks.com/s/<your-surveyId>"
    frameborder="0"
    style="position: absolute; left:0; top:0; width:100%; height:100%; border:0;">
  </iframe>
</div>

Iframe Events

The iframe fires a formbricksSurveyCompleted event when a user finishes a survey within the embedded iframe. This event can be captured through a message listener in your webpage's JavaScript

How to Use it?

1. Embed the Formbricks survey on your webpage using the iframe method as described above.

2. Add an event listener to your webpage’s JavaScript that listens for message events from the iframe.

3. Check if the received message indicates that the survey is completed by comparing the event.data with the value formbricksSurveyCompleted.

4. Implement your custom actions within the callback function based on the survey completion.

Example of Handling Survey Completion Events

window.addEventListener("message", (event) => {
  // Replace 'https://app.formbricks.com' with the actual web app url
  if (event.origin === "https://app.formbricks.com" && event.data === "formbricksSurveyCompleted") {
    console.log("Survey completed!");
    // Implement your custom actions here
  }
});