diff --git a/packages/ui/Survey/index.tsx b/packages/ui/Survey/index.tsx index 61d7e01bfc..414ed27a52 100644 --- a/packages/ui/Survey/index.tsx +++ b/packages/ui/Survey/index.tsx @@ -1,24 +1,30 @@ import { useEffect, useMemo } from "react"; -import { renderSurveyInline, renderSurveyModal } from "@formbricks/surveys"; import { SurveyInlineProps, SurveyModalProps } from "@formbricks/types/formbricksSurveys"; +import { loadSurveyScript } from "./lib/loadScript"; + const createContainerId = () => `formbricks-survey-container`; +declare global { + interface Window { + formbricksSurveys: { + renderSurveyInline: (props: SurveyInlineProps) => void; + renderSurveyModal: (props: SurveyModalProps) => void; + }; + } +} export const SurveyInline = (props: Omit) => { const containerId = useMemo(() => createContainerId(), []); useEffect(() => { - renderSurveyInline({ - ...props, - containerId, - }); + if (typeof window !== "undefined") { + const renderInline = () => window.formbricksSurveys.renderSurveyInline({ ...props, containerId }); + if (!window.formbricksSurveys) { + loadSurveyScript().then(renderInline); + } else { + renderInline(); + } + } }, [containerId, props]); return
; }; - -export const SurveyModal = (props: SurveyModalProps) => { - useEffect(() => { - renderSurveyModal(props); - }, [props]); - return
; -}; diff --git a/packages/ui/Survey/lib/loadScript.ts b/packages/ui/Survey/lib/loadScript.ts new file mode 100644 index 0000000000..196978a185 --- /dev/null +++ b/packages/ui/Survey/lib/loadScript.ts @@ -0,0 +1,10 @@ +export const loadSurveyScript: () => Promise = async () => { + try { + const scriptContent = await (await fetch("/api/packages/surveys")).text(); + document.head.appendChild( + Object.assign(document.createElement("script"), { textContent: scriptContent }) + ); + } catch (error) { + console.error("Failed to load the surveys package:", error); + } +};