From 59481a7f5b6701937f083aa35339e82d746f7fab Mon Sep 17 00:00:00 2001 From: Matthias Nannt Date: Mon, 26 Jun 2023 16:24:03 +0200 Subject: [PATCH 1/4] add js integration --- .../[environmentId]/EnvironmentsNavbar.tsx | 5 +- .../integrations/DocsSidebar.tsx | 2 +- .../integrations/IntegrationsPageTitle.tsx | 31 ++++++ .../integrations/alerts/layout.tsx | 11 -- .../integrations/alerts/page.tsx | 35 ------ .../alerts/slack/AddSlackAlertModal.tsx | 82 -------------- .../integrations/alerts/slack/page.tsx | 56 ---------- .../integrations/data/page.tsx | 11 -- .../installation/javascript/page.tsx | 75 ------------- .../integrations/installation/layout.tsx | 11 -- .../integrations/installation/npm/page.tsx | 75 ------------- .../integrations/installation/page.tsx | 26 ----- .../[environmentId]/integrations/js/page.tsx | 103 ++++++++++++++++++ .../[environmentId]/integrations/layout.tsx | 9 ++ .../[environmentId]/integrations/page.tsx | 20 +++- .../integrations/AddAlertButton.tsx | 24 ---- .../web/components/integrations/AlertCard.tsx | 42 ------- .../integrations/IntegrationsPageTitle.tsx | 31 ------ .../integrations/IntegrationsTabs.tsx | 32 ------ apps/web/components/shared/CodeBlock.tsx | 3 +- 20 files changed, 167 insertions(+), 517 deletions(-) rename apps/web/{components => app/environments/[environmentId]}/integrations/DocsSidebar.tsx (87%) create mode 100644 apps/web/app/environments/[environmentId]/integrations/IntegrationsPageTitle.tsx delete mode 100644 apps/web/app/environments/[environmentId]/integrations/alerts/layout.tsx delete mode 100644 apps/web/app/environments/[environmentId]/integrations/alerts/page.tsx delete mode 100644 apps/web/app/environments/[environmentId]/integrations/alerts/slack/AddSlackAlertModal.tsx delete mode 100644 apps/web/app/environments/[environmentId]/integrations/alerts/slack/page.tsx delete mode 100644 apps/web/app/environments/[environmentId]/integrations/data/page.tsx delete mode 100644 apps/web/app/environments/[environmentId]/integrations/installation/javascript/page.tsx delete mode 100644 apps/web/app/environments/[environmentId]/integrations/installation/layout.tsx delete mode 100644 apps/web/app/environments/[environmentId]/integrations/installation/npm/page.tsx delete mode 100644 apps/web/app/environments/[environmentId]/integrations/installation/page.tsx create mode 100644 apps/web/app/environments/[environmentId]/integrations/js/page.tsx create mode 100644 apps/web/app/environments/[environmentId]/integrations/layout.tsx delete mode 100644 apps/web/components/integrations/AddAlertButton.tsx delete mode 100644 apps/web/components/integrations/AlertCard.tsx delete mode 100644 apps/web/components/integrations/IntegrationsPageTitle.tsx delete mode 100644 apps/web/components/integrations/IntegrationsTabs.tsx diff --git a/apps/web/app/environments/[environmentId]/EnvironmentsNavbar.tsx b/apps/web/app/environments/[environmentId]/EnvironmentsNavbar.tsx index 43de0c5916..02b97b46d9 100644 --- a/apps/web/app/environments/[environmentId]/EnvironmentsNavbar.tsx +++ b/apps/web/app/environments/[environmentId]/EnvironmentsNavbar.tsx @@ -29,6 +29,7 @@ import { useTeam } from "@/lib/teams/teams"; import { capitalizeFirstLetter, truncate } from "@/lib/utils"; import { CustomersIcon, + DashboardIcon, ErrorComponent, FilterIcon, FormIcon, @@ -117,12 +118,12 @@ export default function EnvironmentsNavbar({ environmentId, session }: Environme icon: FilterIcon, current: pathname?.includes("/events") || pathname?.includes("/attributes"), }, - /* { + { name: "Integrations", href: `/environments/${environmentId}/integrations/installation`, icon: DashboardIcon, current: pathname?.includes("/integrations"), - }, */ + }, { name: "Settings", href: `/environments/${environmentId}/settings/profile`, diff --git a/apps/web/components/integrations/DocsSidebar.tsx b/apps/web/app/environments/[environmentId]/integrations/DocsSidebar.tsx similarity index 87% rename from apps/web/components/integrations/DocsSidebar.tsx rename to apps/web/app/environments/[environmentId]/integrations/DocsSidebar.tsx index 323c140c44..d9f9c8848a 100644 --- a/apps/web/components/integrations/DocsSidebar.tsx +++ b/apps/web/app/environments/[environmentId]/integrations/DocsSidebar.tsx @@ -2,7 +2,7 @@ import { Button } from "@formbricks/ui"; export default function DocsSidebar() { return ( -
+

Documentation

Get detailed instructions

- - -
- - - - ); -}; - -export default AddEmailAlertModal; diff --git a/apps/web/app/environments/[environmentId]/integrations/alerts/slack/page.tsx b/apps/web/app/environments/[environmentId]/integrations/alerts/slack/page.tsx deleted file mode 100644 index f7d48d7097..0000000000 --- a/apps/web/app/environments/[environmentId]/integrations/alerts/slack/page.tsx +++ /dev/null @@ -1,56 +0,0 @@ -"use client"; - -import { AddAlertButton } from "@/components/integrations/AddAlertButton"; -import AlertCard from "@/components/integrations/AlertCard"; -import IntegrationPageTitle from "@/components/integrations/IntegrationsPageTitle"; -import SlackLogo from "@/images/slacklogo.png"; -import Image from "next/image"; -import AddSlackAlertModal from "./AddSlackAlertModal"; -import DeleteDialog from "@/components/shared/DeleteDialog"; -import { useState } from "react"; - -export default function SlackAlertPage({ params }) { - const exampleAlert = { - href: "/", - title: "Example Alert", - description: "This is an example alert", - }; - - const [isAlertModalOpen, setAlertModalOpen] = useState(false); - const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false); - - const handleAddAlertClick = async () => { - setAlertModalOpen(true); - }; - - const handleDeleteAlertClick = async () => { - setDeleteDialogOpen(true); - }; - - const deleteEmailAlert = async () => { - setDeleteDialogOpen(false); - }; - - return ( -
- -
- } - /> - handleAddAlertClick()} /> -
- - -
- ); -} diff --git a/apps/web/app/environments/[environmentId]/integrations/data/page.tsx b/apps/web/app/environments/[environmentId]/integrations/data/page.tsx deleted file mode 100644 index e23aec5635..0000000000 --- a/apps/web/app/environments/[environmentId]/integrations/data/page.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import IntegrationsTabs from "@/components/integrations/IntegrationsTabs"; -import ContentWrapper from "@/components/shared/ContentWrapper"; - -export default function EventsAttributesPage({ params }) { - return ( -
- - Data -
- ); -} diff --git a/apps/web/app/environments/[environmentId]/integrations/installation/javascript/page.tsx b/apps/web/app/environments/[environmentId]/integrations/installation/javascript/page.tsx deleted file mode 100644 index c98749efeb..0000000000 --- a/apps/web/app/environments/[environmentId]/integrations/installation/javascript/page.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import DocsSidebar from "@/components/integrations/DocsSidebar"; -import IntegrationPageTitle from "@/components/integrations/IntegrationsPageTitle"; -import JSLogo from "@/images/jslogo.png"; -import { Input } from "@formbricks/ui"; -import Image from "next/image"; - -export default function JavaScriptPage({ params }) { - /* useEffect(() => { - Prism.highlightAll(); - }, []); */ - - return ( -
- } - goBackTo="installation" - /> - -
-
-
-

Quick Start

-
    -
  1. Copy the Javascript snippet below into the HEAD of your HTML file.
    2. -
  2. Set up a button with the onClick handler below to let your users open the widget.
    3. -
  3. PLACEHOLDER
    4. -
-
-
-

Production ID

- -
-
-

Development ID

- -
-
-
-
-

JavaScript Snippet

-
- 
-                
-                  {`
-
-
-
-`}
-                
-
-
-
-
-
- -
-
-
- ); -} diff --git a/apps/web/app/environments/[environmentId]/integrations/installation/layout.tsx b/apps/web/app/environments/[environmentId]/integrations/installation/layout.tsx deleted file mode 100644 index ac9f8711a6..0000000000 --- a/apps/web/app/environments/[environmentId]/integrations/installation/layout.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import ContentWrapper from "@/components/shared/ContentWrapper"; -import IntegrationsTabs from "@/components/integrations/IntegrationsTabs"; - -export default function InstallationsLayout({ children, params }) { - return ( - <> - - {children} - - ); -} diff --git a/apps/web/app/environments/[environmentId]/integrations/installation/npm/page.tsx b/apps/web/app/environments/[environmentId]/integrations/installation/npm/page.tsx deleted file mode 100644 index 01ba1a18c0..0000000000 --- a/apps/web/app/environments/[environmentId]/integrations/installation/npm/page.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import DocsSidebar from "@/components/integrations/DocsSidebar"; -import IntegrationPageTitle from "@/components/integrations/IntegrationsPageTitle"; -import NPMLogo from "@/images/npmlogo.png"; -import { Input } from "@formbricks/ui"; -import Image from "next/image"; - -export default function NPMPage({ params }) { - /* useEffect(() => { - Prism.highlightAll(); - }, []); */ - - return ( -
- } - goBackTo="installation" - /> - -
-
-
-

Quick Start

-
    -
  1. Copy the Javascript snippet below into the HEAD of your HTML file.
    2. -
  2. Set up a button with the onClick handler below to let your users open the widget.
    3. -
  3. PLACEHOLDER
    4. -
-
-
-

Production ID

- -
-
-

Development ID

- -
-
-
-
-

JavaScript Snippet

-
- 
-                
-                  {`
-
-
-
-`}
-                
-
-
-
-
-
- -
-
-
- ); -} diff --git a/apps/web/app/environments/[environmentId]/integrations/installation/page.tsx b/apps/web/app/environments/[environmentId]/integrations/installation/page.tsx deleted file mode 100644 index d71ba7a9af..0000000000 --- a/apps/web/app/environments/[environmentId]/integrations/installation/page.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import JSLogo from "@/images/jslogo.png"; -import NPMLogo from "@/images/npmlogo.png"; -import { Card, PageTitle } from "@formbricks/ui"; -import Image from "next/image"; - -export default function InstallationsPage({ params }) { - return ( -
- Installation -
- } - /> - } - /> -
-
- ); -} diff --git a/apps/web/app/environments/[environmentId]/integrations/js/page.tsx b/apps/web/app/environments/[environmentId]/integrations/js/page.tsx new file mode 100644 index 0000000000..d6d1025379 --- /dev/null +++ b/apps/web/app/environments/[environmentId]/integrations/js/page.tsx @@ -0,0 +1,103 @@ +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/layout.tsx b/apps/web/app/environments/[environmentId]/integrations/layout.tsx new file mode 100644 index 0000000000..bc5e075801 --- /dev/null +++ b/apps/web/app/environments/[environmentId]/integrations/layout.tsx @@ -0,0 +1,9 @@ +import ContentWrapper from "@/components/shared/ContentWrapper"; + +export default function IntegrationsLayout({ children }) { + return ( + <> + {children} + + ); +} diff --git a/apps/web/app/environments/[environmentId]/integrations/page.tsx b/apps/web/app/environments/[environmentId]/integrations/page.tsx index c1817628d6..7db8a150a4 100644 --- a/apps/web/app/environments/[environmentId]/integrations/page.tsx +++ b/apps/web/app/environments/[environmentId]/integrations/page.tsx @@ -1,3 +1,19 @@ -export default function IntegrationsPage() { - return
Integrations
; +import { Card, PageTitle } from "@formbricks/ui"; +import Image from "next/image"; +import JsLogo from "@/images/jslogo.png"; + +export default function IntegrationsPage({ params }) { + return ( +
+ Integrations +
+ } + /> +
+
+ ); } diff --git a/apps/web/components/integrations/AddAlertButton.tsx b/apps/web/components/integrations/AddAlertButton.tsx deleted file mode 100644 index 219c28e092..0000000000 --- a/apps/web/components/integrations/AddAlertButton.tsx +++ /dev/null @@ -1,24 +0,0 @@ -"use client"; - -import { PlusCircleIcon } from "@heroicons/react/24/solid"; - -interface AddAlertButtonProps { - channel: string; - onClick?: () => void; -} - -export const AddAlertButton: React.FC = ({ channel, onClick = () => {} }) => { - return ( - - ); -}; diff --git a/apps/web/components/integrations/AlertCard.tsx b/apps/web/components/integrations/AlertCard.tsx deleted file mode 100644 index 788ec9bc6b..0000000000 --- a/apps/web/components/integrations/AlertCard.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from "react"; -import { Card } from "@formbricks/ui"; -import type { CardProps } from "@formbricks/ui"; - -import { TrashIcon, PencilSquareIcon } from "@heroicons/react/24/outline"; - -interface AlertCardProps extends CardProps { - onDelete?: () => void; - onEdit?: () => void; -} - -const AlertCard: React.FC = ({ title, description, icon, onDelete, onEdit }) => ( -
-
- {onDelete && ( - - )} - {onEdit && ( - - )} -
- -
-); - -export default AlertCard; diff --git a/apps/web/components/integrations/IntegrationsPageTitle.tsx b/apps/web/components/integrations/IntegrationsPageTitle.tsx deleted file mode 100644 index abfa3b773f..0000000000 --- a/apps/web/components/integrations/IntegrationsPageTitle.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { BackIcon } from "@formbricks/ui"; -import Link from "next/link"; - -interface IntegrationPageTitleProps { - title: string; - icon?: React.ReactNode; - goBackTo: string; - environmentId: string; -} - -const IntegrationPageTitle: React.FC = ({ - title, - icon, - goBackTo, - environmentId, -}) => { - return ( -
- - - - -
- {icon &&
{icon}
} -

{title}

-
-
- ); -}; - -export default IntegrationPageTitle; diff --git a/apps/web/components/integrations/IntegrationsTabs.tsx b/apps/web/components/integrations/IntegrationsTabs.tsx deleted file mode 100644 index 5b19aa8073..0000000000 --- a/apps/web/components/integrations/IntegrationsTabs.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import SecondNavbar from "../environments/SecondNavBar"; -import { CodeBracketSquareIcon, MegaphoneIcon, ArrowPathIcon } from "@heroicons/react/24/solid"; - -interface IntegrationsTabs { - activeId: string; - environmentId: string; -} - -export default function PeopleGroupsTabs({ activeId, environmentId }: IntegrationsTabs) { - const tabs = [ - { - id: "installation", - label: "Installation", - icon: , - href: `/environments/${environmentId}/integrations/installation`, - }, - { - id: "alerts", - label: "Team Alerts", - icon: , - href: `/environments/${environmentId}/integrations/alerts`, - }, - { - id: "data", - label: "Data Sync", - icon: , - href: `/environments/${environmentId}/integrations/data`, - }, - ]; - - return ; -} diff --git a/apps/web/components/shared/CodeBlock.tsx b/apps/web/components/shared/CodeBlock.tsx index d1b6882c62..0019cee6b5 100644 --- a/apps/web/components/shared/CodeBlock.tsx +++ b/apps/web/components/shared/CodeBlock.tsx @@ -1,4 +1,5 @@ -// components/ui/CodeBlock.tsx +"use client"; + import { DocumentDuplicateIcon } from "@heroicons/react/24/outline"; import Prism from "prismjs"; import "prismjs/themes/prism.css"; From 95f588d5d1e9c084e03fef399100e0fb14126990 Mon Sep 17 00:00:00 2001 From: Johannes Date: Fri, 30 Jun 2023 18:47:01 +0200 Subject: [PATCH 2/4] update link and ui --- .../[environmentId]/EnvironmentsNavbar.tsx | 2 +- .../[environmentId]/integrations/page.tsx | 5 +++-- packages/ui/components/PageTitle.tsx | 11 ----------- packages/ui/index.tsx | 1 - 4 files changed, 4 insertions(+), 15 deletions(-) delete mode 100644 packages/ui/components/PageTitle.tsx diff --git a/apps/web/app/environments/[environmentId]/EnvironmentsNavbar.tsx b/apps/web/app/environments/[environmentId]/EnvironmentsNavbar.tsx index 02b97b46d9..4d0bb98f90 100644 --- a/apps/web/app/environments/[environmentId]/EnvironmentsNavbar.tsx +++ b/apps/web/app/environments/[environmentId]/EnvironmentsNavbar.tsx @@ -120,7 +120,7 @@ export default function EnvironmentsNavbar({ environmentId, session }: Environme }, { name: "Integrations", - href: `/environments/${environmentId}/integrations/installation`, + href: `/environments/${environmentId}/integrations`, icon: DashboardIcon, current: pathname?.includes("/integrations"), }, diff --git a/apps/web/app/environments/[environmentId]/integrations/page.tsx b/apps/web/app/environments/[environmentId]/integrations/page.tsx index 7db8a150a4..9df46ae27a 100644 --- a/apps/web/app/environments/[environmentId]/integrations/page.tsx +++ b/apps/web/app/environments/[environmentId]/integrations/page.tsx @@ -1,11 +1,12 @@ -import { Card, PageTitle } from "@formbricks/ui"; +import { Card } from "@formbricks/ui"; import Image from "next/image"; import JsLogo from "@/images/jslogo.png"; export default function IntegrationsPage({ params }) { return (
- Integrations +

Integrations

+

Connect Formbricks with your favorite tools.

= ({ children }: { children: React.ReactNode }) => { - return ( -
-

{children}

-
- ); -}; diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx index 0096c1f233..21d382d833 100644 --- a/packages/ui/index.tsx +++ b/packages/ui/index.tsx @@ -29,7 +29,6 @@ export { ErrorComponent } from "./components/ErrorComponent"; export { Input } from "./components/Input"; export { PasswordInput } from "./components/PasswordInput"; export { Label } from "./components/Label"; -export { PageTitle } from "./components/PageTitle"; export { Popover, PopoverTrigger, PopoverContent } from "./components/Popover"; export { ProgressBar, HalfCircle } from "./components/ProgressBar"; export { RadioGroup, RadioGroupItem } from "./components/RadioGroup"; From c8c6d922c3a5ef07f00c31353b27b8611a321ae1 Mon Sep 17 00:00:00 2001 From: Johannes Date: Mon, 3 Jul 2023 16:14:31 +0200 Subject: [PATCH 3/4] zapier subpage --- .../integrations/IntegrationsPageTitle.tsx | 2 +- .../[environmentId]/integrations/page.tsx | 7 +++++++ .../[environmentId]/integrations/zapier/page.tsx | 15 +++++++++++++++ apps/web/images/zapier-small.png | Bin 0 -> 4650 bytes 4 files changed, 23 insertions(+), 1 deletion(-) create mode 100644 apps/web/app/environments/[environmentId]/integrations/zapier/page.tsx create mode 100644 apps/web/images/zapier-small.png diff --git a/apps/web/app/environments/[environmentId]/integrations/IntegrationsPageTitle.tsx b/apps/web/app/environments/[environmentId]/integrations/IntegrationsPageTitle.tsx index 569d2b1f45..f5ff142b94 100644 --- a/apps/web/app/environments/[environmentId]/integrations/IntegrationsPageTitle.tsx +++ b/apps/web/app/environments/[environmentId]/integrations/IntegrationsPageTitle.tsx @@ -17,7 +17,7 @@ const IntegrationPageTitle: React.FC = ({ title, icon
{icon &&
{icon}
} -

{title}

+

{title}

{/*
diff --git a/apps/web/app/environments/[environmentId]/integrations/page.tsx b/apps/web/app/environments/[environmentId]/integrations/page.tsx index 9df46ae27a..1926faac63 100644 --- a/apps/web/app/environments/[environmentId]/integrations/page.tsx +++ b/apps/web/app/environments/[environmentId]/integrations/page.tsx @@ -1,6 +1,7 @@ import { Card } from "@formbricks/ui"; import Image from "next/image"; import JsLogo from "@/images/jslogo.png"; +import ZapierLogo from "@/images/zapier-small.png"; export default function IntegrationsPage({ params }) { return ( @@ -14,6 +15,12 @@ export default function IntegrationsPage({ params }) { description="Integrate Formbricks into your Webapp" icon={Javascript Logo} /> + } + />
); diff --git a/apps/web/app/environments/[environmentId]/integrations/zapier/page.tsx b/apps/web/app/environments/[environmentId]/integrations/zapier/page.tsx new file mode 100644 index 0000000000..c5a8efc37b --- /dev/null +++ b/apps/web/app/environments/[environmentId]/integrations/zapier/page.tsx @@ -0,0 +1,15 @@ +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/apps/web/images/zapier-small.png b/apps/web/images/zapier-small.png new file mode 100644 index 0000000000000000000000000000000000000000..2dfda5f153a69d6642c6e8994cc098b3701916a9 GIT binary patch literal 4650 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 DFC;J4 literal 0 HcmV?d00001 From b1f7e03995793f18ae76f7af499e6e83c5909d24 Mon Sep 17 00:00:00 2001 From: Johannes Date: Tue, 11 Jul 2023 16:46:26 +0200 Subject: [PATCH 4/4] 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 && ( + + )} +
+
+);