mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-04-23 21:59:28 -05:00
Code Issues Packages Projects Releases 164 Wiki Activity

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

Browse Source
This commit is contained in:
ShubhamPalriwala
2023-08-30 17:04:45 +05:30
parent d97df9a6e7
commit 78bb8a005e
11 changed files with 127 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/formbricks-com/app/docs/getting-started/framework-guides/page.mdx
+101 -94
View File
@@ -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)**
---