From 2ff17c2b2273607801f7eee808c7fe1b23d08f56 Mon Sep 17 00:00:00 2001
From: Dhruwang Jariwala <67850763+Dhruwang@users.noreply.github.com>
Date: Mon, 22 Apr 2024 17:52:13 +0530
Subject: [PATCH] docs: Event listener doc (#2432)

Co-authored-by: Johannes <johannes@formbricks.com>
Co-authored-by: S P <spalriwalau@gmail.com>
---
 .../docs/link-surveys/embed-surveys/page.mdx  | 81 +++++++++++++++++++
 .../components/docs/Navigation.tsx            |  1 +
 .../components/docs/TellaVideo.tsx            | 18 +++++
 3 files changed, 100 insertions(+)
 create mode 100644 apps/formbricks-com/app/docs/link-surveys/embed-surveys/page.mdx
 create mode 100644 apps/formbricks-com/components/docs/TellaVideo.tsx

diff --git a/apps/formbricks-com/app/docs/link-surveys/embed-surveys/page.mdx b/apps/formbricks-com/app/docs/link-surveys/embed-surveys/page.mdx
new file mode 100644
index 0000000000..5ffff7c22e
--- /dev/null
+++ b/apps/formbricks-com/app/docs/link-surveys/embed-surveys/page.mdx
@@ -0,0 +1,81 @@
+import { TellaVideo } from "@/components/docs/TellaVideo";
+
+export const metadata = {
+  title: "Embed Surveys in Your Web Page",
+  description: "Embed Formbricks surveys seamlessly into your website or web application using an iframe.",
+};
+
+#### 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?
+
+<TellaVideo tellaVideoIdentifier="clvavyy2f00000fjr0mple922"/>
+
+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
+
+<Col>
+<CodeGroup title="Example Embedding Code">
+
+```html
+<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>
+```
+
+</CodeGroup>
+</Col>
+
+## 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`.
+
+<Note>
+  It is important to verify the origin of the message to ensure it comes from the iframe containing your
+  survey, enhancing the security of your event handling.
+</Note>
+
+4. Implement your custom actions within the callback function based on the survey completion.
+
+### Example of Handling Survey Completion Events
+
+<Col>
+<CodeGroup title="Example Code for Event Listener">
+
+```javascript
+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
+  }
+});
+```
+
+</CodeGroup>
+</Col>
diff --git a/apps/formbricks-com/components/docs/Navigation.tsx b/apps/formbricks-com/components/docs/Navigation.tsx
index fd06cdcb5c..a7106beddd 100644
--- a/apps/formbricks-com/components/docs/Navigation.tsx
+++ b/apps/formbricks-com/components/docs/Navigation.tsx
@@ -210,6 +210,7 @@ export const navigation: Array<NavGroup> = [
       { title: "Source Tracking", href: "/docs/link-surveys/source-tracking" },
       { title: "Hidden Fields", href: "/docs/link-surveys/hidden-fields" },
       { title: "Start At Question", href: "/docs/link-surveys/start-at-question" },
+      { title: "Embed Surveys", href: "/docs/link-surveys/embed-surveys" },
     ],
   },
   {
diff --git a/apps/formbricks-com/components/docs/TellaVideo.tsx b/apps/formbricks-com/components/docs/TellaVideo.tsx
new file mode 100644
index 0000000000..21d2b8c9ea
--- /dev/null
+++ b/apps/formbricks-com/components/docs/TellaVideo.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+export function TellaVideo({ tellaVideoIdentifier }: { tellaVideoIdentifier: string }) {
+  return (
+    <div>
+      <iframe
+        className="aspect-video"
+        style={{
+          width: "100%",
+          height: "100%",
+          border: 0,
+        }}
+        src={`https://www.tella.tv/video/${tellaVideoIdentifier}/embed?b=0&title=0&a=1&loop=0&autoPlay=true&t=0&muted=1&wt=0`}
+        allowFullScreen={true}
+        title="Tella Video Help"></iframe>
+    </div>
+  );
+}