fix: add link to examples, fix heading white in light mode, update docs as per poc built in examples repo

2026-01-06 05:40:02 -06:00 · 2023-08-30 17:04:45 +05:30
parent d97df9a6e7
commit 78bb8a005e
11 changed files with 127 additions and 130 deletions
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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)**
+
+---
--- 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
--- 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>