mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-04-17 03:21:51 -05:00
Code Issues Packages Projects Releases 162 Wiki Activity

fix /demo 404, update docs

Browse Source
This commit is contained in:
Johannes
2023-03-31 12:02:11 +02:00
parent 40fb28f5e1
commit 5968d764ca
4 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/formbricks-com/next.config.mjs
View File

@@ -67,7 +67,7 @@ const nextConfig = {
},
{
source: "/demo",
destination: "https://app.formbricks.com/demo",
destination: "https://app.formbricks.com/",
permanent: false,
},
{

18
apps/formbricks-com/pages/docs/getting-started/nextjs/index.mdx
View File

@@ -31,17 +31,20 @@ pnpm add @formbricks/js
## Integrating Formbricks SDK with Next.js
Update your App component in the \_app.ts file.
Update your App component in the \_app.ts file like so:
```tsx
import "@/styles/globals.css";
import type { AppProps } from "next/app";
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
logLevel: "debug", // remove when in production
});
}
@@ -62,8 +65,17 @@ export default function App({ Component, pageProps }: AppProps) {
}
```
First you need to initialize the Formbricks SDK, making sure it only runs on the client side. To connect the Next.js router to Formbricks and ensure the SDK can keep track of every page change, you need to register the route change event.
**What are we doing here?**
First we need to initialize the Formbricks SDK, making sure it only runs on the client side.
That's it! 🎉 You have now successfully integrated the Formbricks SDK into your Next.js application. You can start creating and customizing in-product micro-surveys to gather valuable feedback from your users and improve your product experience.
To connect the Next.js router to Formbricks and ensure the SDK can keep track of every page change, we are registering the route change event.
That's it! 🎉
You should now see that the Widget Status in the setup checklist updated accordingly:
If it doesnt work, please [join our Discord](https://formbricks.com/discord) and let us know!
You have now successfully integrated the Formbricks SDK into your Next.js application. You can start creating and customizing in-product micro-surveys to gather valuable feedback from your users and improve your product experience.
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;

1
apps/web/app/environments/[environmentId]/settings/setup/SetupInstructions.tsx
View File

@@ -36,6 +36,7 @@ if (typeof window !== "undefined") {
formbricks.init({
environmentId: "${environmentId}",
apiHost: "${window.location.protocol}//${window.location.host}",
logLevel: "debug", // remove when in production
});
}`}</CodeBlock>

2
apps/web/components/shared/WidgetStatusIndicator.tsx
View File

@@ -34,7 +34,7 @@ export default function WidgetStatusIndicator({ environmentId, type }: WidgetSta
icon: ArrowDownIcon,
color: "slate",
title: "Not implemented yet.",
subtitle: "The Formbricks widget has not yet been implemented.",
subtitle: "The Formbricks widget is neede to display surveys in your app.",
},
running: { icon: CheckIcon, color: "green", title: "Receiving data.", subtitle: "Last event received:" },
issue: {