From 78bb8a005ea8a14ae61d5fe8e74cdb1fbead15ca Mon Sep 17 00:00:00 2001
From: ShubhamPalriwala <spalriwalau@gmail.com>
Date: Wed, 30 Aug 2023 17:04:45 +0530
Subject: [PATCH] fix: add link to examples, fix heading white in light mode,
 update docs as per poc built in examples repo

---
 .../app/docs/api/api-key-setup/page.mdx       |   2 +-
 .../cancel-subscription/page.mdx              |   6 +-
 .../best-practices/docs-feedback/page.mdx     |   4 +-
 .../best-practices/feature-chaser/page.mdx    |   4 +-
 .../docs/best-practices/feedback-box/page.mdx |  20 +-
 .../best-practices/improve-trial-cr/page.mdx  |   6 +-
 .../best-practices/interview-prompt/page.mdx  |   8 +-
 .../docs/best-practices/pmf-survey/page.mdx   |   6 +-
 .../getting-started/framework-guides/page.mdx | 195 +++++++++---------
 .../app/docs/integrations/zapier/page.mdx     |   4 +-
 .../link-surveys/data-prefilling/page.mdx     |   2 +-
 11 files changed, 127 insertions(+), 130 deletions(-)

diff --git a/apps/formbricks-com/app/docs/api/api-key-setup/page.mdx b/apps/formbricks-com/app/docs/api/api-key-setup/page.mdx
index 6ad4ea5f56..755491aeae 100644
--- a/apps/formbricks-com/app/docs/api/api-key-setup/page.mdx
+++ b/apps/formbricks-com/app/docs/api/api-key-setup/page.mdx
@@ -32,7 +32,7 @@ The API requests are authorized with a personal API key. This API key gives you
    />
 
 <Note>
-  ## Store API key safely {{ class: "text-white" }}
+  ## Store API key safely 
   Anyone who has your API key has full control over your account. For security reasons, you cannot view the API
   key again.
 </Note>
diff --git a/apps/formbricks-com/app/docs/best-practices/cancel-subscription/page.mdx b/apps/formbricks-com/app/docs/best-practices/cancel-subscription/page.mdx
index 5d81009940..9e54fc4c98 100644
--- a/apps/formbricks-com/app/docs/best-practices/cancel-subscription/page.mdx
+++ b/apps/formbricks-com/app/docs/best-practices/cancel-subscription/page.mdx
@@ -45,7 +45,7 @@ To run the Churn Survey in your app you want to proceed as follows:
 4. Prevent that churn!
 
 <Note>
-  ## Formbricks Widget running? {{ class: "text-white" }}
+  ## Formbricks Widget running?
   We assume that you have already installed the Formbricks Widget in your web app. It’s required to display messages
   and surveys in your app. If not, please follow the [Quick Start Guide (takes 15mins max.)](/docs/getting-started/quickstart-in-app-survey)
 </Note>
@@ -118,7 +118,7 @@ Whenever a user visits this page, matches the filter conditions above and the re
 Here is our complete [Actions manual](/docs/actions/why) covering [Code](/docs/actions/code) and [No-Code](/docs/actions/no-code) Actions.
 
 <Note>
-  ## Pre-churn flow coming soon {{ class: "text-white" }}
+  ## Pre-churn flow coming soon 
   We’re currently building full-screen survey pop-ups. You’ll be able to prevent users from closing the survey
   unless they respond to it. It’s certainly debatable if you want that but you could force them to click through
   the survey before letting them cancel 🤷
@@ -156,7 +156,7 @@ These settings make sure the survey is always displayed, when a user wants to Ca
 />
 
 <Note>
-  ## Formbricks Widget running? {{ class: "text-white" }}
+  ## Formbricks Widget running? 
   You need to have the Formbricks Widget installed to display the Churn Survey in your app. Please follow [this
   tutorial (Step 4 onwards)](/docs/getting-started/quickstart-in-app-survey) to install the widget.
 </Note>
diff --git a/apps/formbricks-com/app/docs/best-practices/docs-feedback/page.mdx b/apps/formbricks-com/app/docs/best-practices/docs-feedback/page.mdx
index 217423bae8..035128799c 100644
--- a/apps/formbricks-com/app/docs/best-practices/docs-feedback/page.mdx
+++ b/apps/formbricks-com/app/docs/best-practices/docs-feedback/page.mdx
@@ -72,7 +72,7 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
 5. In the same way, you can change the Internal Question ID of the _Please elaborate_ question to **“additionalFeedback”** and the one of the _Page URL_ question to **“pageUrl”**.
 
 <Note>
-  ## Answers need to be identical {{ class: "text-white" }}
+  ## Answers need to be identical 
   If you want different answers than “Yes 👍” and “No 👎” you need update the choices accordingly. They have to
   be identical to the frontend we're building in the next step.
 </Note>
@@ -110,7 +110,7 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
 ### 2. Build the frontend
 
 <Note>
-  ## Your frontend might work differently {{ class: "text-white" }}
+  ## Your frontend might work differently 
   Your frontend likely looks and works differently. This is an example specific to our tech stack. We want to illustrate
   what you should consider building yours 😊
 </Note>
diff --git a/apps/formbricks-com/app/docs/best-practices/feature-chaser/page.mdx b/apps/formbricks-com/app/docs/best-practices/feature-chaser/page.mdx
index cd24bde7bf..74db0313a6 100644
--- a/apps/formbricks-com/app/docs/best-practices/feature-chaser/page.mdx
+++ b/apps/formbricks-com/app/docs/best-practices/feature-chaser/page.mdx
@@ -42,7 +42,7 @@ To run the Feature Chaser survey in your app you want to proceed as follows:
 2. Setup a user action to display survey at the right point in time
 
 <Note>
-  ## Formbricks Widget running? {{ class: "text-white" }}
+  ## Formbricks Widget running? 
   We assume that you have already installed the Formbricks Widget in your web app. It’s required to display messages
   and surveys in your app. If not, please follow the [Quick Start Guide (takes 15mins max.)](/docs/getting-started/quickstart-in-app-survey)
 </Note>
@@ -126,7 +126,7 @@ Lastly, scroll down to “Recontact Options”. Here you have full freedom to de
 <Image src={Publish} alt="Publish survey" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 
 <Note>
-  ## Formbricks Widget running? {{ class: "text-white" }}
+  ## Formbricks Widget running? 
   You need to have the Formbricks Widget installed to display the Feature Chaser in your app. Please follow [this
   tutorial (Step 4 onwards)](/docs/getting-started/quickstart-in-app-survey) to install the widget.
 </Note>
diff --git a/apps/formbricks-com/app/docs/best-practices/feedback-box/page.mdx b/apps/formbricks-com/app/docs/best-practices/feedback-box/page.mdx
index 492de14a4e..b7f60c2cf2 100644
--- a/apps/formbricks-com/app/docs/best-practices/feedback-box/page.mdx
+++ b/apps/formbricks-com/app/docs/best-practices/feedback-box/page.mdx
@@ -74,7 +74,7 @@ Go to the “Audience” tab, find the “When to send” card and choose “Add
 <Image src={AddAction} alt="Add action" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 
 <Note>
-  ## You can also add actions in your code {{ class: "text-white" }}
+  ## You can also add actions in your code 
   You can also create [Code Actions](/docs/actions/code) using `formbricks.track("Eventname")` - they will automatically
   appear in your Actions overview as long as the SDK is embedded.
 </Note>
@@ -84,19 +84,9 @@ We have two options to track the Feedback Button in your application: innerText
 1. **innerText:** This means that whenever a user clicks any HTML item in your app which has an `innerText` of `Feedback` the Feedback Box will be displayed.
 2. **CSS-Selector:** This means that when an element with a specific CSS-Selector like `#feedback-button` is clicked, your Feedback Box is triggered.
 
-<div className="grid grid-cols-2 space-x-2">
-  <Image
-    src={AddHTMLAction}
-    alt="Add HTML action"
-    quality="100"
-    className="rounded-lg max-w-full sm:max-w-3xl"
-  />
-  <Image
-    src={AddCSSAction}
-    alt="Add CSS action"
-    quality="100"
-    className="rounded-lg max-w-full sm:max-w-3xl"
-  />
+<div className="grid grid-cols-2 space-x-2 max-w-full sm:max-w-3xl">
+  <Image src={AddHTMLAction} alt="Add HTML action" quality="100" className="rounded-lg" />
+  <Image src={AddCSSAction} alt="Add CSS action" quality="100" className="rounded-lg" />
 </div>
 
 ### 4. Select action in the “When to ask” card
@@ -131,7 +121,7 @@ Scroll down to “Recontact Options”. Here you have to choose the right settin
 ## Setting up the Widget
 
 <Note>
-  ## Formbricks Widget running? {{ class: "text-white" }}
+  ## Formbricks Widget running?
   You need to have the Formbricks Widget installed to display the Feedback Box in your app. Please follow [this
   tutorial (Step 4 onwards)](/docs/getting-started/quickstart-in-app-survey) to install the widget.
 </Note>
diff --git a/apps/formbricks-com/app/docs/best-practices/improve-trial-cr/page.mdx b/apps/formbricks-com/app/docs/best-practices/improve-trial-cr/page.mdx
index 9f03f06a96..b3a8e00d5b 100644
--- a/apps/formbricks-com/app/docs/best-practices/improve-trial-cr/page.mdx
+++ b/apps/formbricks-com/app/docs/best-practices/improve-trial-cr/page.mdx
@@ -42,7 +42,7 @@ To display the Trial Conversion Survey in your app you want to proceed as follow
 3. Print that 💸
 
 <Note>
-  ## Formbricks Widget running? {{ class: "text-white" }}
+  ## Formbricks Widget running? 
   We assume that you have already installed the Formbricks Widget in your web app. It’s required to display messages
   and surveys in your app. If not, please follow the [Quick Start Guide (takes 15mins max.)](/docs/getting-started/quickstart-in-app-survey)
 </Note>
@@ -78,7 +78,7 @@ Save, and move over to the “Audience” tab.
 ### 3. Pre-segment your audience (coming soon)
 
 <Note>
-  ## Filter by attribute coming soon {{ class: "text-white" }}
+  ## Filter by attribute coming soon 
   We're working on pre-segmenting users by attributes. We will update this manual in the next days.
 </Note>
 
@@ -135,7 +135,7 @@ Lastly, scroll down to “Recontact Options”. Here you have to choose the corr
 <Image src={Publish} alt="Publish survey" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 
 <Note>
-  ## Formbricks Widget running? {{ class: "text-white" }}
+  ## Formbricks Widget running? 
   You need to have the Formbricks Widget installed to display the Feedback Box in your app. Please follow [this
   tutorial (Step 4 onwards)](/docs/getting-started/quickstart-in-app-survey) to install the widget.
 </Note>
diff --git a/apps/formbricks-com/app/docs/best-practices/interview-prompt/page.mdx b/apps/formbricks-com/app/docs/best-practices/interview-prompt/page.mdx
index d132257c0c..87f72601a7 100644
--- a/apps/formbricks-com/app/docs/best-practices/interview-prompt/page.mdx
+++ b/apps/formbricks-com/app/docs/best-practices/interview-prompt/page.mdx
@@ -47,7 +47,7 @@ To display an Interview Prompt in your app you want to proceed as follows:
 3. That’s it! 🎉
 
 <Note>
-  ## Formbricks Widget running? {{ class: "text-white" }}
+  ## Formbricks Widget running? 
   We assume that you have already installed the Formbricks Widget in your web app. It’s required to display messages
   and surveys in your app. If not, please follow the [Quick Start Guide (15mins).](/docs/getting-started/quickstart-in-app-survey)
 </Note>
@@ -90,7 +90,7 @@ Save, and move over to the “Audience” tab.
 ### 3. Pre-segment your audience (coming soon)
 
 <Note>
-  ## Filter by attribute coming soon {{ class: "text-white" }}
+  ## Filter by attribute coming soon 
   We're working on pre-segmenting users by attributes. We will update this manual in the next few days.
 </Note>
 
@@ -107,7 +107,7 @@ To create the trigger to show your Interview Prompt, go to the “Audience” ta
 <Image src={AddAction} alt="Add action" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 
 <Note>
-  ## You can also add actions in your code {{ class: "text-white" }}
+  ## You can also add actions in your code 
   You can also create [Code Actions](/docs/actions/code) using `formbricks.track("Eventname")` - they will automatically
   appear in your Actions overview as long as the SDK is embedded.
 </Note>
@@ -160,7 +160,7 @@ Scroll down to “Recontact Options”. Here you have to choose the correct sett
 <Image src={Publish} alt="Publish survey" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 
 <Note>
-  ## Formbricks Widget running? {{ class: "text-white" }}
+  ## Formbricks Widget running? 
   You need to have the Formbricks Widget installed to display the Feedback Box in your app. Please follow [this
   tutorial (Step 4 onwards)](/docs/getting-started/quickstart-in-app-survey) to install the widget.
 </Note>
diff --git a/apps/formbricks-com/app/docs/best-practices/pmf-survey/page.mdx b/apps/formbricks-com/app/docs/best-practices/pmf-survey/page.mdx
index 7dbc82fd94..96398afbe3 100644
--- a/apps/formbricks-com/app/docs/best-practices/pmf-survey/page.mdx
+++ b/apps/formbricks-com/app/docs/best-practices/pmf-survey/page.mdx
@@ -41,7 +41,7 @@ To display the Product-Market Fit survey in your app you want to proceed as foll
 3. Setup the user action to display survey at good point in time
 
 <Note>
-  ## Formbricks Widget running? {{ class: "text-white" }}
+  ## Formbricks Widget running? 
   We assume that you have already installed the Formbricks Widget in your web app. It’s required to display messages
   and surveys in your app. If not, please follow the [Quick Start Guide (15mins).](/docs/getting-started/quickstart-in-app-survey)
 </Note>
@@ -77,7 +77,7 @@ Save, and move over to where the magic happens: The “Audience” tab.
 ### 3. Pre-segment your audience (coming soon)
 
 <Note>
-  ## Filter by attribute coming soon {{ class: "text-white" }}
+  ## Filter by attribute coming soon 
   We're working on pre-segmenting users by attributes. We will update this manual in the next days.
 </Note>
 
@@ -132,7 +132,7 @@ Lastly, scroll down to “Recontact Options”. Here you have to choose the corr
 <Image src={Publish} alt="Publish survey" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 
 <Note>
-  ## Formbricks Widget running? {{ class: "text-white" }}
+  ## Formbricks Widget running? 
   You need to have the Formbricks Widget installed to display the Feedback Box in your app. Please follow [this
   tutorial (Step 4 onwards)](/docs/getting-started/quickstart-in-app-survey) to install the widget.
 </Note>
diff --git a/apps/formbricks-com/app/docs/getting-started/framework-guides/page.mdx b/apps/formbricks-com/app/docs/getting-started/framework-guides/page.mdx
index b169bedc6d..a2a4c1e447 100644
--- a/apps/formbricks-com/app/docs/getting-started/framework-guides/page.mdx
+++ b/apps/formbricks-com/app/docs/getting-started/framework-guides/page.mdx
@@ -35,39 +35,17 @@ Before getting started, make sure you have:
 
 ---
 
-## Validate your setup
-
-Once you have completed the steps above, you can validate your setup by checking the **Setup Checklist** in the Settings. Your widget status indicator should go from this:
-
-<Image
-  src={WidgetNotConnected}
-  alt="Widget isnt connected"
-  quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
-/>
-
-To this:
-
-<Image
-  src={WidgetConnected}
-  alt="Widget is connected"
-  quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
-/>
-
-**Can’t figure it out? [Join our Discord!](https://formbricks.com/discord)**
-
----
-
 ## HTML
 
 All you need to do is copy a `<script>` tag to your HTML head, and that’s about it!
 
 <CodeGroup title="HTML">
 ```html {{ title: 'index.html' }}
+<!-- START Formbricks Surveys -->
 <script type="text/javascript">
-!function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="./dist/index.umd.js";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.init("<environment-id>","<api-host>")},500)}();
-</script>
+    !function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://unpkg.com/@formbricks/js@^1.0.0/dist/index.umd.js";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks=window.js;window.formbricks.init({environmentId: "<your-environment-id>", apiHost: "<api-host>"})},500)}();
+    </script>
+<!-- END Formbricks Surveys -->
 ```
 </CodeGroup>
 
@@ -84,7 +62,7 @@ All you need to do is copy a `<script>` tag to your HTML head, and that’s abou
   </Property>
 </Properties>
 
-Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
+Refer our [Example HTML project](https://github.com/formbricks/examples/tree/main/html) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
 
 ---
 
@@ -107,7 +85,7 @@ yarn add @formbricks/js
  
 Now, update your App.js/ts file to initialise Formbricks.
 
-<CodeGroup title="app.js">
+<CodeGroup title="src/App.js">
 
 ```js
 // other imports
@@ -151,10 +129,10 @@ The app initializes 'formbricks' when it's loaded in a browser environment (due
   src={ReactApp}
   alt="In app survey in React app for micro surveys"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-lg"
+  className="rounded-lg max-w-full sm:max-w-3xl"
 />
 
-Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
+Refer our [Example ReactJs project](https://github.com/formbricks/examples/tree/main/reactjs) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
 
 ---
 
@@ -192,22 +170,22 @@ import { usePathname, useSearchParams } from "next/navigation";
 import { useEffect } from "react";
 
 export default function FormbricksProvider() {
-const pathname = usePathname();
-const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
 
-useEffect(() => {
-formbricks.init({
-environmentId: "<environment-id>",
-apiHost: "<api-host>",
-debug: true, // remove when in production
-});
-}, []);
+  useEffect(() => {
+    formbricks.init({
+      environmentId: "<environment-id>",
+      apiHost: "<api-host>",
+      debug: true, // remove when in production
+    });
+  }, []);
 
-useEffect(() => {
-formbricks?.registerRouteChange();
-}, [pathname, searchParams]);
+  useEffect(() => {
+    formbricks?.registerRouteChange();
+  }, [pathname, searchParams]);
 
-return null;
+  return null;
 }
 
 ````
@@ -215,77 +193,80 @@ return null;
 
 <CodeGroup title="app/layout.tsx">
 ```tsx {{title: 'Typescript'}}
+// other imports
 import FormbricksProvider from "./formbricks";
-import "./globals.css";
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
-return (
-  <html lang="en">
-    <FormbricksProvider />
-    <body>{children}</body>
-  </html>
-);
+  return (
+    <html lang="en">
+      <FormbricksProvider />
+      <body>{children}</body>
+    </html>
+  );
 }
 ````
 
 </CodeGroup>
 
+Refer our [Example NextJS App Directory project](https://github.com/formbricks/examples/tree/main/nextjs-app) for more help!
+
 ### Pages Directory
 
-<CodeGroup title="_app.tsx">
+<CodeGroup title="src/pages/_app.tsx">
+
 ```tsx {{ title: 'Typescript' }}
-import "@/styles/globals.css";
-import type { PagesProps } from "next/app";
+// other import
+import formbricks from "@formbricks/js";
 import { useEffect } from "react";
 import { useRouter } from "next/router";
-import formbricks from "@formbricks/js";
 
 if (typeof window !== "undefined") {
-formbricks.init({
-environmentId: "your-environment-id",
-apiHost: "your-api-host", // e.g. https://app.formbricks.com
-debug: true, // remove when in production
-});
+  formbricks.init({
+    environmentId: "<environment-id>",
+    apiHost: "<api-host>",
+    debug: true, // remove when in production
+  });
 }
 
-export default function Pages({ Component, pageProps }: PagesProps) {
-const router = useRouter();
+export default function App({ Component, pageProps }: AppProps) {
+  const router = useRouter();
 
-useEffect(() => {
-// Connect next.js router to Formbricks
-const handleRouteChange = formbricks?.registerRouteChange;
-router.events.on("routeChangeComplete", handleRouteChange);
+  useEffect(() => {
+    // Connect next.js router to Formbricks
+    const handleRouteChange = formbricks?.registerRouteChange;
+    router.events.on("routeChangeComplete", handleRouteChange);
 
-return () => {
-router.events.off("routeChangeComplete", handleRouteChange);
-};
-}, []);
-
-return <Component {...pageProps} />;
+    return () => {
+      router.events.off("routeChangeComplete", handleRouteChange);
+    };
+  }, []);
+  return <Component {...pageProps} />;
 }
+```
 
-````
 </CodeGroup>
 
+Refer our [Example NextJS Pages Directory project](https://github.com/formbricks/examples/tree/main/nextjs-pages) for more help!
+
 ### Required Customizations to be Made
 
 <Properties>
-<Property name="environment-id" type="string">
-  Formbricks Environment ID.
-</Property>
+  <Property name="environment-id" type="string">
+    Formbricks Environment ID.
+  </Property>
 </Properties>
 <Properties>
-<Property name="api-host" type="string">
-  URL of the hosted Formbricks instance.
-</Property>
+  <Property name="api-host" type="string">
+    URL of the hosted Formbricks instance.
+  </Property>
 </Properties>
 
 ### Optional Customizations to be Made
 
 <Properties>
-<Property name="debug" type="boolean">
-  Whether you want to see debug messages from Formbricks on your client-side console.
-</Property>
+  <Property name="debug" type="boolean">
+    Whether you want to see debug messages from Formbricks on your client-side console.
+  </Property>
 </Properties>
 
 ### What are we doing here?
@@ -318,32 +299,34 @@ yarn add @formbricks/js
 </CodeGroup>
 
 <CodeGroup title="src/formbricks.js">
+
 ```js
 import formbricks from "@formbricks/js";
 
 if (typeof window !== "undefined") {
-formbricks.init({
-environmentId: "<environment-id>",
-apiHost: "<api-host>",
-});
+  formbricks.init({
+    environmentId: "<environment-id>",
+    apiHost: "<api-host>",
+  });
 }
 
 export default formbricks;
 ```
 
-```js {{ title: 'main.js' }}
+</CodeGroup>
+
+<CodeGroup title="src/main.js">
+
+```js
 // other imports
-import Vue from "vue";
-import VueRouter from "vue-router";
 import formbricks from "@/formbricks";
 
-Vue.use(VueRouter);
+const app = createApp(App);
 
-const router = new VueRouter({
-  // Your router configuration here
-});
+app.use(router);
+
+app.mount("#app");
 
-// Add a global navigation guard
 router.afterEach((to, from) => {
   if (typeof formbricks !== "undefined") {
     formbricks.registerRouteChange();
@@ -374,4 +357,28 @@ router.afterEach((to, from) => {
   </Property>
 </Properties>
 
-Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
+Refer our [Example VueJs project](https://github.com/formbricks/examples/tree/main/vuejs) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
+
+## Validate your setup
+
+Once you have completed the steps above, you can validate your setup by checking the **Setup Checklist** in the Settings. Your widget status indicator should go from this:
+
+<Image
+  src={WidgetNotConnected}
+  alt="Widget isnt connected"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+
+To this:
+
+<Image
+  src={WidgetConnected}
+  alt="Widget is connected"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+
+**Can’t figure it out? [Join our Discord!](https://formbricks.com/discord)**
+
+---
\ No newline at end of file
diff --git a/apps/formbricks-com/app/docs/integrations/zapier/page.mdx b/apps/formbricks-com/app/docs/integrations/zapier/page.mdx
index a252cbbe4b..72f6819949 100644
--- a/apps/formbricks-com/app/docs/integrations/zapier/page.mdx
+++ b/apps/formbricks-com/app/docs/integrations/zapier/page.mdx
@@ -26,7 +26,7 @@ export const meta = {
 Zapier is a powerful ally. Hook up Formbricks with Zapier and you can send your data to 5000+ other apps. Here is how to do it.
 
 <Note>
-  ### Nail down your survey first? {{ class: "text-white" }}
+  ### Nail down your survey first? 
   Any changes in the survey cause additional work in the Zap. It makes sense to first settle on the survey you
   want to run and then get to setting up Zapier.
 </Note>
@@ -45,7 +45,7 @@ When setting up the Zap your life will be easier when you change the `questionId
 _In every question card in the Advanced Settings you find the Question ID field. Update it so that you’ll recognize the response tied to this question._
 
 <Note>
-  ### Already published? Duplicate survey {{ class: "text-white" }}
+  ### Already published? Duplicate survey 
   You can only update the questionId when the survey was not yet published. Already published it? Just **duplicate
   it** to update the questionIds.
   <Image
diff --git a/apps/formbricks-com/app/docs/link-surveys/data-prefilling/page.mdx b/apps/formbricks-com/app/docs/link-surveys/data-prefilling/page.mdx
index 56e6d00a59..cbfbde2954 100644
--- a/apps/formbricks-com/app/docs/link-surveys/data-prefilling/page.mdx
+++ b/apps/formbricks-com/app/docs/link-surveys/data-prefilling/page.mdx
@@ -38,7 +38,7 @@ To prefill the first question of a survey, append `?question_id=answer` at the e
 Please make sure the answer is [URL encoded](https://www.urlencoder.org/).
 
 <Note>
-  ## Prefill only the first question {{ class: "text-white" }}
+  ## Prefill only the first question 
   Currently, you can only prefill the first question of a link survey.
 </Note>