From 010784c2b2285dccf48549e155ba9954da3f7c20 Mon Sep 17 00:00:00 2001
From: victorvhs017 <115753265+victorvhs017@users.noreply.github.com>
Date: Mon, 24 Mar 2025 09:12:37 -0300
Subject: [PATCH] chore: added new script with onload (#4987)

Co-authored-by: pandeymangg <anshuman.pandey9999@gmail.com>
---
 .../components/OnboardingSetupInstructions.tsx    |  4 ++--
 .../(setup)/components/setup-instructions.tsx     |  2 +-
 apps/web/playwright/js.spec.ts                    | 15 ++++++++-------
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/components/OnboardingSetupInstructions.tsx b/apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/components/OnboardingSetupInstructions.tsx
index 33822ca1c9..7ceb44322a 100644
--- a/apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/components/OnboardingSetupInstructions.tsx
+++ b/apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/components/OnboardingSetupInstructions.tsx
@@ -36,7 +36,7 @@ export const OnboardingSetupInstructions = ({
   !function(){
       var appUrl = "${webAppUrl}";
       var environmentId = "${environmentId}";
-      var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=appUrl+"/js/formbricks.umd.cjs";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.setup({environmentId: environmentId, appUrl: appUrl})},500)}();
+      var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=appUrl+"/js/formbricks.umd.cjs",t.onload=function(){window.formbricks?window.formbricks.setup({environmentId:environmentId,appUrl:appUrl}):console.error("Formbricks library failed to load properly. The formbricks object is not available.");};var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}();
   </script>
   <!-- END Formbricks Surveys -->
   `;
@@ -46,7 +46,7 @@ export const OnboardingSetupInstructions = ({
   !function(){
     var appUrl = "${webAppUrl}";
     var environmentId = "${environmentId}";
-      var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=appUrl+"/js/formbricks.umd.cjs";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.setup({environmentId: environmentId, appUrl: appUrl })},500)}();
+    var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=appUrl+"/js/formbricks.umd.cjs",t.onload=function(){window.formbricks?window.formbricks.setup({environmentId:environmentId,appUrl:appUrl}):console.error("Formbricks library failed to load properly. The formbricks object is not available.");};var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}();
   </script>
   <!-- END Formbricks Surveys -->
   `;
diff --git a/apps/web/modules/projects/settings/(setup)/components/setup-instructions.tsx b/apps/web/modules/projects/settings/(setup)/components/setup-instructions.tsx
index 1f25876959..7035729423 100644
--- a/apps/web/modules/projects/settings/(setup)/components/setup-instructions.tsx
+++ b/apps/web/modules/projects/settings/(setup)/components/setup-instructions.tsx
@@ -129,7 +129,7 @@ if (typeof window !== "undefined") {
             </p>
             <CodeBlock language="js">{`<!-- START Formbricks Surveys -->
 <script type="text/javascript">
-!function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="${webAppUrl}/js/formbricks.umd.cjs";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.setup({environmentId: "${environmentId}", appUrl: "${window.location.protocol}//${window.location.host}"})},500)}();
+!function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="${webAppUrl}/js/formbricks.umd.cjs",t.onload=function(){window.formbricks?window.formbricks.setup({environmentId:"${environmentId}",appUrl:"${window.location.protocol}//${window.location.host}"}):console.error("Formbricks library failed to load properly. The formbricks object is not available.");};var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}();
 </script>
 <!-- END Formbricks Surveys -->`}</CodeBlock>
             <h4>Step 2: Debug mode</h4>
diff --git a/apps/web/playwright/js.spec.ts b/apps/web/playwright/js.spec.ts
index d3a05ca059..8c3979a890 100644
--- a/apps/web/playwright/js.spec.ts
+++ b/apps/web/playwright/js.spec.ts
@@ -8,13 +8,14 @@ const HTML_TEMPLATE = `<head>
       var t = document.createElement("script");
       (t.type = "text/javascript"), (t.async = !0), (t.src = "http://localhost:3000/js/formbricks.umd.cjs");
       var e = document.getElementsByTagName("script")[0];
-      e.parentNode.insertBefore(t, e),
-        setTimeout(function () {
-          formbricks.setup({
-            environmentId: "ENVIRONMENT_ID",
-            appUrl: "http://localhost:3000",
-          });
-        }, 500);
+      t.onload = function(){
+        if (window.formbricks) {
+          window.formbricks.setup({environmentId: "ENVIRONMENT_ID", appUrl: "http://localhost:3000"});
+        } else {
+          console.error("Formbricks library failed to load properly. The formbricks object is not available.");
+        }
+      };
+      e.parentNode.insertBefore(t, e);
     })();
   </script>
 </head>