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";