feat(dashboard): replace Chatwoot widget with HubSpot widget in dashboard layout

- Updated the dashboard layout to use the HubSpotWidget instead of ChatwootWidget.
- Added a new HubSpotWidget component that loads the HubSpot script asynchronously.

Author: Siumauricio

apps/dokploy/components/layouts/dashboard-layout.tsx

@@ -1,6 +1,6 @@
 import { api } from "@/utils/api";
 import { ImpersonationBar } from "../dashboard/impersonation/impersonation-bar";
-import { ChatwootWidget } from "../shared/ChatwootWidget";
+import { HubSpotWidget } from "../shared/HubSpotWidget";
 import Page from "./side";
 
 interface Props {
@@ -25,7 +25,9 @@ export const DashboardLayout = ({ children }: Props) => {
 		<>
 			<Page>{children}</Page>
 			{isCloud === true && isUserSubscribed === true && (
-				<ChatwootWidget websiteToken="USCpQRKzHvFMssf3p6Eacae5" />
+				<>
+					<HubSpotWidget />
+				</>
 			)}
 
 			{haveRootAccess === true && <ImpersonationBar />}

apps/dokploy/components/shared/HubSpotWidget.tsx

@@ -0,0 +1,14 @@
+import Script from "next/script";
+
+export const HubSpotWidget = () => {
+	return (
+		<Script
+			id="hs-script-loader"
+			type="text/javascript"
+			src="//js-eu1.hs-scripts.com/147033433.js"
+			strategy="lazyOnload"
+			async
+			defer
+		/>
+	);
+};

apps/dokploy/styles/globals.css

@@ -247,3 +247,18 @@
 .cm-lineWrapping {
 	@apply font-mono;
 }
+
+/* HubSpot Widget - Force light color-scheme to prevent white background */
+#hubspot-messages-iframe-container,
+#hubspot-messages-iframe-container * {
+	background-color: transparent !important;
+	color-scheme: light !important;
+}
+
+#hubspot-messages-iframe-container .hs-shadow-container {
+	display: none !important;
+}
+
+#hubspot-conversations-iframe {
+	color-scheme: light !important;
+}