From b1f7e03995793f18ae76f7af499e6e83c5909d24 Mon Sep 17 00:00:00 2001 From: Johannes Date: Tue, 11 Jul 2023 16:46:26 +0200 Subject: [PATCH] remove subpages, add Zapier link --- .../[environmentId]/integrations/js/page.tsx | 103 ------------------ .../[environmentId]/integrations/page.tsx | 11 +- .../integrations/zapier/page.tsx | 15 --- packages/ui/components/Card.tsx | 57 ++++------ 4 files changed, 29 insertions(+), 157 deletions(-) delete mode 100644 apps/web/app/environments/[environmentId]/integrations/js/page.tsx delete mode 100644 apps/web/app/environments/[environmentId]/integrations/zapier/page.tsx diff --git a/apps/web/app/environments/[environmentId]/integrations/js/page.tsx b/apps/web/app/environments/[environmentId]/integrations/js/page.tsx deleted file mode 100644 index d6d1025379..0000000000 --- a/apps/web/app/environments/[environmentId]/integrations/js/page.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import DocsSidebar from "../DocsSidebar"; -import IntegrationPageTitle from "../IntegrationsPageTitle"; -import CodeBlock from "@/components/shared/CodeBlock"; -import JsLogo from "@/images/jslogo.png"; -import { WEBAPP_URL } from "@formbricks/lib/constants"; -import Image from "next/image"; -import Link from "next/link"; - -export default function JsIntegrationPage({ params }) { - return ( -
- } - /> - -
-
-

- The Formbricks Javascript Widget is the easiest way to integrate Formbricks into your web - application. Once embedded, the SDK allows you to use all the Formbricks features like no code - actions, show in-app surveys and synchronizing your user data with Formbricks. -

-
-

Step 1: NPM Install

- npm install @formbricks/js --save -

Step 2: Initialize widget

-

Import Formbricks and initialize the widget in your Component (e.g. App.tsx):

- {`import formbricks from "@formbricks/js"; - -if (typeof window !== "undefined") { - formbricks.init({ - environmentId: "${params.environmentId}", - apiHost: "${WEBAPP_URL}", - logLevel: "debug", // remove when in production - }); -}`} - -
    -
  • - environmentId: Used to identify the correct - environment: {params.environmentId} is yours. -
    • -
  • - apiHost: This is the URL of your Formbricks backend. -
    • -
-

You're done 🎉

-

- Your app now communicates with Formbricks - sending events, and loading surveys automatically! -

- -
    -
  • - Does your widget work? - Scroll to the top! -
    • -
  • - - Need a more detailed setup guide for React, Next.js or Vue.js? - {" "} - - Check out the docs. - -
    • -
  • - Have a problem?{" "} - - Open an issue on GitHub - {" "} - or{" "} - - join Discord. - -
    • -
  • - - Want to learn how to add user attributes, custom events and more? - {" "} - - Dive into the docs. - -
    • -
-
-
-
- -
-
-
- ); -} diff --git a/apps/web/app/environments/[environmentId]/integrations/page.tsx b/apps/web/app/environments/[environmentId]/integrations/page.tsx index 1926faac63..a5e083b637 100644 --- a/apps/web/app/environments/[environmentId]/integrations/page.tsx +++ b/apps/web/app/environments/[environmentId]/integrations/page.tsx @@ -3,21 +3,22 @@ import Image from "next/image"; import JsLogo from "@/images/jslogo.png"; import ZapierLogo from "@/images/zapier-small.png"; -export default function IntegrationsPage({ params }) { +export default function IntegrationsPage() { return (

Integrations

Connect Formbricks with your favorite tools.

} /> } /> diff --git a/apps/web/app/environments/[environmentId]/integrations/zapier/page.tsx b/apps/web/app/environments/[environmentId]/integrations/zapier/page.tsx deleted file mode 100644 index c5a8efc37b..0000000000 --- a/apps/web/app/environments/[environmentId]/integrations/zapier/page.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import ZapierLogo from "@/images/zapier-small.png"; -import Image from "next/image"; -import IntegrationPageTitle from "../IntegrationsPageTitle"; - -export default function JsIntegrationPage({ params }) { - return ( -
- } - /> -
- ); -} diff --git a/packages/ui/components/Card.tsx b/packages/ui/components/Card.tsx index cb012f32f4..ad771f5c6b 100644 --- a/packages/ui/components/Card.tsx +++ b/packages/ui/components/Card.tsx @@ -1,42 +1,31 @@ -import Link from "next/link"; +import { Button } from "./Button"; interface CardProps { - onClick?: () => void; - href?: string; - title: string; + connectHref?: string; + docsHref?: string; + label: string; description: string; icon?: React.ReactNode; - className?: string; - children?: React.ReactNode; } export type { CardProps }; -export const Card: React.FC = ({ - href, - onClick, - title, - description, - icon, - className = "", - children, -}) => - href ? ( - -
{children}
- {icon &&
{icon}
} -

{title}

-

{description}

- - ) : ( - - ); +export const Card: React.FC = ({ connectHref, docsHref, label, description, icon }) => ( +
+ {icon &&
{icon}
} +

{label}

+

{description}

+
+ {connectHref && ( + + )} + {docsHref && ( + + )} +
+
+);