fix widget script staging url

2024-06-04 12:09:22 +03:00 · 2024-06-04 12:09:22 +03:00 · 19e7dab62c
commit 19e7dab62c
parent e7a09457ca
8 changed files with 183 additions and 317 deletions
--- a/package.json
+++ b/package.json
@ -108,6 +108,7 @@
    "endOfLine": "auto",
    "bracketSpacing": true,
    "arrowParens": "always",
-    "jsxSingleQuote": false
+    "jsxSingleQuote": false,
+    "singleAttributePerLine": false
  }
 }
--- a/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetSetup.tsx
+++ b/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetSetup.tsx
@ -24,6 +24,7 @@ import { ReactNode, useState } from "react";
 import fixedButtonWidgetPreview from "../../../../../assets/banner-widget-preview.png";
 import WidgetScript from "../../WidgetScript";
 import { createBannerWidgetScriptText } from "../../createWidgetScriptText";
+import { useWidgetUrl } from "../../useWidgetUrl";
 import BannerWidgetPreviewIcon from "./BannerWidgetPreviewIcon";

 interface Props {
@ -35,6 +36,7 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
  const theme = useTheme();
  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1065));
  const quiz = useCurrentQuiz();
+  const widgetUrl = useWidgetUrl();
  const [widgetWidth, setWidgetWidth] = useState<string>("");
  const [widgetHeight, setWidgetHeight] = useState<string>("");
  const [isAutoopenQuizSettingsOpen, setIsAutoopenQuizSettingsOpen] = useState<boolean>(false);
@ -58,31 +60,34 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
  if (!quiz) return null;

  if (step === 3) {
-    const scriptText = createBannerWidgetScriptText({
-      quizId: quiz.qid,
-      position,
-      hideOnMobile: hideOnMobile || undefined,
-      rounded: bannerFullWidth ? undefined : rounded || undefined,
-      withShadow: withShadow || undefined,
-      buttonFlash: buttonFlash || undefined,
-      buttonBackgroundColor,
-      buttonTextColor,
-      autoShowQuizTime: autoShowQuiz ? autoShowQuizTime : undefined,
-      openOnLeaveAttempt: openOnLeaveAttempt || undefined,
-      bannerFullWidth: bannerFullWidth || undefined,
-      autoShowWidgetTime,
-      appealText: appealText || undefined,
-      quizHeaderText: quizHeaderText || undefined,
-      pulsation: pulsation || undefined,
-      fullScreen: fullScreen || undefined,
-      dialogDimensions:
-        !fullScreen && (widgetWidth || widgetHeight)
-          ? {
-              width: widgetWidth ? `${widgetWidth}px` : "100%",
-              height: widgetHeight ? `${widgetHeight}px` : "100%",
-            }
-          : undefined,
-    });
+    const scriptText = createBannerWidgetScriptText(
+      {
+        quizId: quiz.qid,
+        position,
+        hideOnMobile: hideOnMobile || undefined,
+        rounded: bannerFullWidth ? undefined : rounded || undefined,
+        withShadow: withShadow || undefined,
+        buttonFlash: buttonFlash || undefined,
+        buttonBackgroundColor,
+        buttonTextColor,
+        autoShowQuizTime: autoShowQuiz ? autoShowQuizTime : undefined,
+        openOnLeaveAttempt: openOnLeaveAttempt || undefined,
+        bannerFullWidth: bannerFullWidth || undefined,
+        autoShowWidgetTime,
+        appealText: appealText || undefined,
+        quizHeaderText: quizHeaderText || undefined,
+        pulsation: pulsation || undefined,
+        fullScreen: fullScreen || undefined,
+        dialogDimensions:
+          !fullScreen && (widgetWidth || widgetHeight)
+            ? {
+                width: widgetWidth ? `${widgetWidth}px` : "100%",
+                height: widgetHeight ? `${widgetHeight}px` : "100%",
+              }
+            : undefined,
+      },
+      widgetUrl
+    );

    return <WidgetScript scriptText={scriptText} helperText="Установите код внутрь тэга head" />;
  }
--- a/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/ButtonWidgetSetup.tsx
+++ b/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/ButtonWidgetSetup.tsx
@ -1,7 +1,4 @@
-import {
-  ButtonWidgetFixedParams,
-  ButtonWidgetParams,
-} from "@frontend/squzanswerer";
+import { ButtonWidgetFixedParams, ButtonWidgetParams } from "@frontend/squzanswerer";
 import {
  Box,
  Button,
@ -28,6 +25,7 @@ import Dots from "../../../../assets/dots.png";
 import fixedButtonWidgetPreview from "../../../../assets/fixed-button-widget-preview.png";
 import WidgetScript from "../WidgetScript";
 import { createButtonWidgetScriptText } from "../createWidgetScriptText";
+import { useWidgetUrl } from "../useWidgetUrl";

 interface Props {
  step: 2 | 3;
@ -38,25 +36,21 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
  const theme = useTheme();
  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1065));
  const quiz = useCurrentQuiz();
+  const widgetUrl = useWidgetUrl();
  const [widgetWidth, setWidgetWidth] = useState<string>("");
  const [widgetHeight, setWidgetHeight] = useState<string>("");
-  const [isAutoopenQuizSettingsOpen, setIsAutoopenQuizSettingsOpen] =
-    useState<boolean>(false);
+  const [isAutoopenQuizSettingsOpen, setIsAutoopenQuizSettingsOpen] = useState<boolean>(false);
  const [hideOnMobile, setHideOnMobile] = useState<boolean>(false);
  const [rounded, setRounded] = useState<boolean>(false);
  const [withShadow, setWithShadow] = useState<boolean>(false);
  const [buttonFlash, setButtonFlash] = useState<boolean>(false);
  const [buttonText, setButtonText] = useState<string>("");
-  const [buttonBackgroundColor, setButtonBackgroundColor] = useState<string>(
-    theme.palette.brightPurple.main,
-  );
+  const [buttonBackgroundColor, setButtonBackgroundColor] = useState<string>(theme.palette.brightPurple.main);
  const [buttonTextColor, setButtonTextColor] = useState<string>("#FFFFFF");
  const [autoShowQuiz, setAutoShowQuiz] = useState<boolean>(false);
  const [autoShowQuizTime, setAutoShowQuizTime] = useState<number>(10);
  const [openOnLeaveAttempt, setOpenOnLeaveAttempt] = useState<boolean>(false);
-  const [fixedSide, setFixedSide] = useState<
-    null | ButtonWidgetFixedParams["fixedSide"]
-  >(null);
+  const [fixedSide, setFixedSide] = useState<null | ButtonWidgetFixedParams["fixedSide"]>(null);
  const [fullScreen, setFullScreen] = useState<boolean>(false);

  if (!quiz) return null;
@ -96,7 +90,7 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
      };
    }

-    const scriptText = createButtonWidgetScriptText(params);
+    const scriptText = createButtonWidgetScriptText(params, widgetUrl);

    return (
      <WidgetScript
@ -216,9 +210,7 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
        <Collapse in={!fullScreen}>
          <Box sx={{ display: "flex", gap: "40px" }}>
            <Box sx={{ display: "flex", flexDirection: "column", gap: "20px" }}>
-              <Typography sx={{ color: theme.palette.grey2.main }}>
-                Ширина (px)
-              </Typography>
+              <Typography sx={{ color: theme.palette.grey2.main }}>Ширина (px)</Typography>
              <PenaTextField
                type="number"
                value={widgetWidth}
@ -228,9 +220,7 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
              />
            </Box>
            <Box sx={{ display: "flex", flexDirection: "column", gap: "20px" }}>
-              <Typography sx={{ color: theme.palette.grey2.main }}>
-                Высота (px)
-              </Typography>
+              <Typography sx={{ color: theme.palette.grey2.main }}>Высота (px)</Typography>
              <PenaTextField
                type="number"
                value={widgetHeight}
@ -259,36 +249,18 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
              alignItems: "center",
            }}
          >
-            <Typography sx={{ color: theme.palette.grey2.main }}>
-              Цвет кнопки
-            </Typography>
-            <CircleColorPicker
-              color={buttonBackgroundColor}
-              onChange={(color) => setButtonBackgroundColor(color)}
-            />
-            <Typography sx={{ color: theme.palette.grey2.main }}>
-              Цвет текста кнопки
-            </Typography>
-            <CircleColorPicker
-              color={buttonTextColor}
-              onChange={(color) => setButtonTextColor(color)}
-            />
+            <Typography sx={{ color: theme.palette.grey2.main }}>Цвет кнопки</Typography>
+            <CircleColorPicker color={buttonBackgroundColor} onChange={(color) => setButtonBackgroundColor(color)} />
+            <Typography sx={{ color: theme.palette.grey2.main }}>Цвет текста кнопки</Typography>
+            <CircleColorPicker color={buttonTextColor} onChange={(color) => setButtonTextColor(color)} />
          </Box>
          <CustomCheckbox
            label="Отключить на мобильных устройствах"
            checked={hideOnMobile}
            handleChange={(e) => setHideOnMobile(e.target.checked)}
          />
-          <CustomCheckbox
-            label="Закругленная"
-            checked={rounded}
-            handleChange={(e) => setRounded(e.target.checked)}
-          />
-          <CustomCheckbox
-            label="С тенью"
-            checked={withShadow}
-            handleChange={(e) => setWithShadow(e.target.checked)}
-          />
+          <CustomCheckbox label="Закругленная" checked={rounded} handleChange={(e) => setRounded(e.target.checked)} />
+          <CustomCheckbox label="С тенью" checked={withShadow} handleChange={(e) => setWithShadow(e.target.checked)} />
          <CustomCheckbox
            label="С бликом"
            checked={buttonFlash}
@ -309,16 +281,12 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
                }}
                value={fixedSide}
                onChange={(e) => {
-                  setFixedSide(
-                    e.target.value as ButtonWidgetFixedParams["fixedSide"],
-                  );
+                  setFixedSide(e.target.value as ButtonWidgetFixedParams["fixedSide"]);
                }}
              >
                <FormControlLabel
                  value="left"
-                  control={
-                    <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
-                  }
+                  control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
                  label="Слева"
                  sx={{
                    color: theme.palette.grey2.main,
@ -326,9 +294,7 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
                />
                <FormControlLabel
                  value="right"
-                  control={
-                    <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
-                  }
+                  control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
                  label="Справа"
                  sx={{
                    color: theme.palette.grey2.main,
@ -337,9 +303,7 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
              </RadioGroup>
            </FormControl>
          )}
-          <Typography sx={{ color: theme.palette.grey2.main }}>
-            Текст кнопки
-          </Typography>
+          <Typography sx={{ color: theme.palette.grey2.main }}>Текст кнопки</Typography>
          <PenaTextField
            value={buttonText}
            onChange={(e) => setButtonText(e.target.value)}
@ -399,22 +363,16 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
                      alignItems: "center",
                    }}
                  >
-                    <Typography sx={{ color: theme.palette.grey2.main }}>
-                      Показывать через
-                    </Typography>
+                    <Typography sx={{ color: theme.palette.grey2.main }}>Показывать через</Typography>
                    <PenaTextField
                      type="number"
                      value={autoShowQuizTime}
-                      onChange={(e) =>
-                        setAutoShowQuizTime(parseInt(e.target.value))
-                      }
+                      onChange={(e) => setAutoShowQuizTime(parseInt(e.target.value))}
                      FormControlSx={{
                        width: "90px",
                      }}
                    />
-                    <Typography sx={{ color: theme.palette.grey2.main }}>
-                      секунд
-                    </Typography>
+                    <Typography sx={{ color: theme.palette.grey2.main }}>секунд</Typography>
                  </Box>
                </Box>
              </Collapse>
--- a/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/ContainerWidgetSetup.tsx
+++ b/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/ContainerWidgetSetup.tsx
@ -1,12 +1,4 @@
-import {
-  Box,
-  Button,
-  Collapse,
-  Divider,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
+import { Box, Button, Collapse, Divider, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import CircleColorPicker from "@ui_kit/CircleColorPicker";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
@ -16,6 +8,7 @@ import { ReactNode, useState } from "react";
 import Dots from "../../../../assets/dots.png";
 import WidgetScript from "../WidgetScript";
 import { createContainerWidgetScriptText } from "../createWidgetScriptText";
+import { useWidgetUrl } from "../useWidgetUrl";

 interface Props {
  step: 2 | 3;
@ -26,8 +19,8 @@ export default function ContainerWidgetSetup({ step, nextButton }: Props) {
  const theme = useTheme();
  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1065));
  const quiz = useCurrentQuiz();
-  const [isAutoopenQuizSettingsOpen, setIsAutoopenQuizSettingsOpen] =
-    useState<boolean>(false);
+  const widgetUrl = useWidgetUrl();
+  const [isAutoopenQuizSettingsOpen, setIsAutoopenQuizSettingsOpen] = useState<boolean>(false);
  const [widgetWidth, setWidgetWidth] = useState<string>("");
  const [widgetHeight, setWidgetHeight] = useState<string>("");
  const [hideOnMobile, setHideOnMobile] = useState<boolean>(false);
@ -36,9 +29,7 @@ export default function ContainerWidgetSetup({ step, nextButton }: Props) {
  const [withShadow, setWithShadow] = useState<boolean>(false);
  const [buttonFlash, setButtonFlash] = useState<boolean>(false);
  const [buttonText, setButtonText] = useState<string>("");
-  const [buttonBackgroundColor, setButtonBackgroundColor] = useState<string>(
-    theme.palette.brightPurple.main,
-  );
+  const [buttonBackgroundColor, setButtonBackgroundColor] = useState<string>(theme.palette.brightPurple.main);
  const [buttonTextColor, setButtonTextColor] = useState<string>("#FFFFFF");
  const [autoShowQuiz, setAutoShowQuiz] = useState<boolean>(false);
  const [autoShowQuizTime, setAutoShowQuizTime] = useState<number>(10);
@ -47,34 +38,32 @@ export default function ContainerWidgetSetup({ step, nextButton }: Props) {
  if (!quiz) return null;

  if (step === 3) {
-    const scriptText = createContainerWidgetScriptText({
-      quizId: quiz.qid,
-      selector: `#pena-quiz-container-${nanoid(6)}`,
-      dimensions:
-        widgetWidth || widgetHeight
-          ? {
-              width: widgetWidth ? `${widgetWidth}px` : "100%",
-              height: widgetHeight ? `${widgetHeight}px` : "100%",
-            }
-          : undefined,
-      hideOnMobile: hideOnMobile || undefined,
-      showButtonOnMobile: showButtonOnMobile || undefined,
-      rounded: rounded || undefined,
-      withShadow: withShadow || undefined,
-      buttonFlash: buttonFlash || undefined,
-      buttonText: buttonText || undefined,
-      buttonBackgroundColor,
-      buttonTextColor,
-      autoShowQuizTime: autoShowQuiz ? autoShowQuizTime : undefined,
-      openOnLeaveAttempt: openOnLeaveAttempt || undefined,
-    });
-
-    return (
-      <WidgetScript
-        scriptText={scriptText}
-        helperText="Установите код в место, в котором должен быть квиз"
-      />
+    const scriptText = createContainerWidgetScriptText(
+      {
+        quizId: quiz.qid,
+        selector: `#pena-quiz-container-${nanoid(6)}`,
+        dimensions:
+          widgetWidth || widgetHeight
+            ? {
+                width: widgetWidth ? `${widgetWidth}px` : "100%",
+                height: widgetHeight ? `${widgetHeight}px` : "100%",
+              }
+            : undefined,
+        hideOnMobile: hideOnMobile || undefined,
+        showButtonOnMobile: showButtonOnMobile || undefined,
+        rounded: rounded || undefined,
+        withShadow: withShadow || undefined,
+        buttonFlash: buttonFlash || undefined,
+        buttonText: buttonText || undefined,
+        buttonBackgroundColor,
+        buttonTextColor,
+        autoShowQuizTime: autoShowQuiz ? autoShowQuizTime : undefined,
+        openOnLeaveAttempt: openOnLeaveAttempt || undefined,
+      },
+      widgetUrl
    );
+
+    return <WidgetScript scriptText={scriptText} helperText="Установите код в место, в котором должен быть квиз" />;
  }

  return (
@ -139,15 +128,11 @@ export default function ContainerWidgetSetup({ step, nextButton }: Props) {
                maxWidth: "365px",
              }}
            >
-              Quiz будет открыть прямо в том месте, где вы установите код на
-              сайте
+              Quiz будет открыть прямо в том месте, где вы установите код на сайте
            </Typography>
          </Box>
-          <Typography
-            sx={{ maxWidth: "414px", fontSize: "14px", alignSelf: "start" }}
-          >
-            В мобильной версии будет показана кнопка, открывающая quiz в
-            модальном окне
+          <Typography sx={{ maxWidth: "414px", fontSize: "14px", alignSelf: "start" }}>
+            В мобильной версии будет показана кнопка, открывающая quiz в модальном окне
          </Typography>
        </Box>
      </Box>
@ -164,9 +149,7 @@ export default function ContainerWidgetSetup({ step, nextButton }: Props) {
        </Typography>
        <Box sx={{ display: "flex", gap: "40px" }}>
          <Box sx={{ display: "flex", flexDirection: "column", gap: "20px" }}>
-            <Typography sx={{ color: theme.palette.grey2.main }}>
-              Ширина (px)
-            </Typography>
+            <Typography sx={{ color: theme.palette.grey2.main }}>Ширина (px)</Typography>
            <PenaTextField
              type="number"
              value={widgetWidth}
@ -176,9 +159,7 @@ export default function ContainerWidgetSetup({ step, nextButton }: Props) {
            />
          </Box>
          <Box sx={{ display: "flex", flexDirection: "column", gap: "20px" }}>
-            <Typography sx={{ color: theme.palette.grey2.main }}>
-              Высота (px)
-            </Typography>
+            <Typography sx={{ color: theme.palette.grey2.main }}>Высота (px)</Typography>
            <PenaTextField
              type="number"
              value={widgetHeight}
@ -205,36 +186,18 @@ export default function ContainerWidgetSetup({ step, nextButton }: Props) {
              gap: "40px",
            }}
          >
-            <Typography sx={{ color: theme.palette.grey2.main }}>
-              Цвет кнопки
-            </Typography>
-            <CircleColorPicker
-              color={buttonBackgroundColor}
-              onChange={(color) => setButtonBackgroundColor(color)}
-            />
-            <Typography sx={{ color: theme.palette.grey2.main }}>
-              Цвет текста кнопки
-            </Typography>
-            <CircleColorPicker
-              color={buttonTextColor}
-              onChange={(color) => setButtonTextColor(color)}
-            />
+            <Typography sx={{ color: theme.palette.grey2.main }}>Цвет кнопки</Typography>
+            <CircleColorPicker color={buttonBackgroundColor} onChange={(color) => setButtonBackgroundColor(color)} />
+            <Typography sx={{ color: theme.palette.grey2.main }}>Цвет текста кнопки</Typography>
+            <CircleColorPicker color={buttonTextColor} onChange={(color) => setButtonTextColor(color)} />
          </Box>
          <CustomCheckbox
            label="Отключить на мобильных устройствах"
            checked={hideOnMobile}
            handleChange={(e) => setHideOnMobile(e.target.checked)}
          />
-          <CustomCheckbox
-            label="Закругленная"
-            checked={rounded}
-            handleChange={(e) => setRounded(e.target.checked)}
-          />
-          <CustomCheckbox
-            label="С тенью"
-            checked={withShadow}
-            handleChange={(e) => setWithShadow(e.target.checked)}
-          />
+          <CustomCheckbox label="Закругленная" checked={rounded} handleChange={(e) => setRounded(e.target.checked)} />
+          <CustomCheckbox label="С тенью" checked={withShadow} handleChange={(e) => setWithShadow(e.target.checked)} />
          <CustomCheckbox
            label="С бликом"
            checked={buttonFlash}
@ -245,9 +208,7 @@ export default function ContainerWidgetSetup({ step, nextButton }: Props) {
            checked={showButtonOnMobile}
            handleChange={(e) => setShowButtonOnMobile(e.target.checked)}
          />
-          <Typography sx={{ color: theme.palette.grey2.main }}>
-            Текст кнопки
-          </Typography>
+          <Typography sx={{ color: theme.palette.grey2.main }}>Текст кнопки</Typography>
          <PenaTextField
            value={buttonText}
            onChange={(e) => setButtonText(e.target.value)}
@ -307,22 +268,16 @@ export default function ContainerWidgetSetup({ step, nextButton }: Props) {
                      alignItems: "center",
                    }}
                  >
-                    <Typography sx={{ color: theme.palette.grey2.main }}>
-                      Показывать через
-                    </Typography>
+                    <Typography sx={{ color: theme.palette.grey2.main }}>Показывать через</Typography>
                    <PenaTextField
                      type="number"
                      value={autoShowQuizTime}
-                      onChange={(e) =>
-                        setAutoShowQuizTime(parseInt(e.target.value))
-                      }
+                      onChange={(e) => setAutoShowQuizTime(parseInt(e.target.value))}
                      FormControlSx={{
                        width: "90px",
                      }}
                    />
-                    <Typography sx={{ color: theme.palette.grey2.main }}>
-                      секунд
-                    </Typography>
+                    <Typography sx={{ color: theme.palette.grey2.main }}>секунд</Typography>
                  </Box>
                </Box>
              </Collapse>
--- a/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/PopupWidgetSetup.tsx
+++ b/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/PopupWidgetSetup.tsx
@ -1,10 +1,4 @@
-import {
-  Box,
-  Collapse,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
+import { Box, Collapse, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import PenaTextField from "@ui_kit/PenaTextField";
@ -12,6 +6,7 @@ import { ReactNode, useState } from "react";
 import Dots from "../../../../assets/dots.png";
 import WidgetScript from "../WidgetScript";
 import { createPopupWidgetScriptText } from "../createWidgetScriptText";
+import { useWidgetUrl } from "../useWidgetUrl";

 interface Props {
  step: 2 | 3;
@ -22,6 +17,7 @@ export default function PopupWidgetSetup({ step, nextButton }: Props) {
  const theme = useTheme();
  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1065));
  const quiz = useCurrentQuiz();
+  const widgetUrl = useWidgetUrl();
  const [widgetWidth, setWidgetWidth] = useState<string>("");
  const [widgetHeight, setWidgetHeight] = useState<string>("");
  const [hideOnMobile, setHideOnMobile] = useState<boolean>(false);
@ -32,27 +28,25 @@ export default function PopupWidgetSetup({ step, nextButton }: Props) {
  if (!quiz) return null;

  if (step === 3) {
-    const scriptText = createPopupWidgetScriptText({
-      quizId: quiz.qid,
-      hideOnMobile: hideOnMobile || undefined,
-      autoShowQuizTime: autoShowQuizTime,
-      openOnLeaveAttempt: openOnLeaveAttempt || undefined,
-      fullScreen: fullScreen || undefined,
-      dialogDimensions:
-        !fullScreen && (widgetWidth || widgetHeight)
-          ? {
-              width: widgetWidth ? `${widgetWidth}px` : "100%",
-              height: widgetHeight ? `${widgetHeight}px` : "100%",
-            }
-          : undefined,
-    });
-
-    return (
-      <WidgetScript
-        scriptText={scriptText}
-        helperText="Установите код внутрь тэга head"
-      />
+    const scriptText = createPopupWidgetScriptText(
+      {
+        quizId: quiz.qid,
+        hideOnMobile: hideOnMobile || undefined,
+        autoShowQuizTime: autoShowQuizTime,
+        openOnLeaveAttempt: openOnLeaveAttempt || undefined,
+        fullScreen: fullScreen || undefined,
+        dialogDimensions:
+          !fullScreen && (widgetWidth || widgetHeight)
+            ? {
+                width: widgetWidth ? `${widgetWidth}px` : "100%",
+                height: widgetHeight ? `${widgetHeight}px` : "100%",
+              }
+            : undefined,
+      },
+      widgetUrl
    );
+
+    return <WidgetScript scriptText={scriptText} helperText="Установите код внутрь тэга head" />;
  }

  return (
@ -147,9 +141,7 @@ export default function PopupWidgetSetup({ step, nextButton }: Props) {
                gap: "20px",
              }}
            >
-              <Typography sx={{ color: theme.palette.grey2.main }}>
-                Ширина окна (px)
-              </Typography>
+              <Typography sx={{ color: theme.palette.grey2.main }}>Ширина окна (px)</Typography>
              <PenaTextField
                type="number"
                value={widgetWidth}
@ -165,9 +157,7 @@ export default function PopupWidgetSetup({ step, nextButton }: Props) {
                gap: "20px",
              }}
            >
-              <Typography sx={{ color: theme.palette.grey2.main }}>
-                Высота окна (px)
-              </Typography>
+              <Typography sx={{ color: theme.palette.grey2.main }}>Высота окна (px)</Typography>
              <PenaTextField
                type="number"
                value={widgetHeight}
@ -185,9 +175,7 @@ export default function PopupWidgetSetup({ step, nextButton }: Props) {
            alignItems: "center",
          }}
        >
-          <Typography sx={{ color: theme.palette.grey2.main }}>
-            Показывать через
-          </Typography>
+          <Typography sx={{ color: theme.palette.grey2.main }}>Показывать через</Typography>
          <PenaTextField
            type="number"
            value={autoShowQuizTime}
@ -196,9 +184,7 @@ export default function PopupWidgetSetup({ step, nextButton }: Props) {
              width: "90px",
            }}
          />
-          <Typography sx={{ color: theme.palette.grey2.main }}>
-            секунд
-          </Typography>
+          <Typography sx={{ color: theme.palette.grey2.main }}>секунд</Typography>
        </Box>
        <CustomCheckbox
          label="Открывать квиз при попытке уйти с сайта"
--- a/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/SideWidgetSetup/SideWidgetSetup.tsx
+++ b/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/SideWidgetSetup/SideWidgetSetup.tsx
@ -1,11 +1,5 @@
 import { SideWidgetParams } from "@frontend/squzanswerer";
-import {
-  Box,
-  Collapse,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
+import { Box, Collapse, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import CircleColorPicker from "@ui_kit/CircleColorPicker";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
@ -15,6 +9,7 @@ import sideWidgetPreviewLeft from "../../../../../assets/side-widget-preview-lef
 import sideWidgetPreviewRight from "../../../../../assets/side-widget-preview-right.png";
 import WidgetScript from "../../WidgetScript";
 import { createSideWidgetScriptText } from "../../createWidgetScriptText";
+import { useWidgetUrl } from "../../useWidgetUrl";
 import SideWidgetPositionButton from "./SideWidgetPositionButton";

 interface Props {
@ -26,49 +21,45 @@ export default function SideWidgetSetup({ step, nextButton }: Props) {
  const theme = useTheme();
  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1065));
  const quiz = useCurrentQuiz();
+  const widgetUrl = useWidgetUrl();
  const [widgetWidth, setWidgetWidth] = useState<string>("");
  const [widgetHeight, setWidgetHeight] = useState<string>("");
  const [hideOnMobile, setHideOnMobile] = useState<boolean>(false);
  const [autoShowQuiz, setAutoShowQuiz] = useState<boolean>(false);
  const [autoShowQuizTime, setAutoShowQuizTime] = useState<number>(10);
  const [autoShowWidgetTime, setAutoShowWidgetTime] = useState<number>(10);
-  const [position, setPosition] =
-    useState<SideWidgetParams["position"]>("left");
+  const [position, setPosition] = useState<SideWidgetParams["position"]>("left");
  const [fullScreen, setFullScreen] = useState<boolean>(false);
  const [buttonFlash, setButtonFlash] = useState<boolean>(false);
-  const [buttonBackgroundColor, setButtonBackgroundColor] = useState<string>(
-    theme.palette.brightPurple.main,
-  );
+  const [buttonBackgroundColor, setButtonBackgroundColor] = useState<string>(theme.palette.brightPurple.main);
  const [buttonTextColor, setButtonTextColor] = useState<string>("#FFFFFF");

  if (!quiz) return null;

  if (step === 3) {
-    const scriptText = createSideWidgetScriptText({
-      quizId: quiz.qid,
-      position: position,
-      hideOnMobile: hideOnMobile || undefined,
-      autoShowQuizTime: autoShowQuiz ? autoShowQuizTime : undefined,
-      autoShowWidgetTime: autoShowWidgetTime || undefined,
-      fullScreen: fullScreen || undefined,
-      buttonFlash: buttonFlash || undefined,
-      buttonTextColor,
-      buttonBackgroundColor,
-      dialogDimensions:
-        !fullScreen && (widgetWidth || widgetHeight)
-          ? {
-              width: widgetWidth ? `${widgetWidth}px` : "100%",
-              height: widgetHeight ? `${widgetHeight}px` : "100%",
-            }
-          : undefined,
-    });
-
-    return (
-      <WidgetScript
-        scriptText={scriptText}
-        helperText="Установите код внутрь тэга head"
-      />
+    const scriptText = createSideWidgetScriptText(
+      {
+        quizId: quiz.qid,
+        position: position,
+        hideOnMobile: hideOnMobile || undefined,
+        autoShowQuizTime: autoShowQuiz ? autoShowQuizTime : undefined,
+        autoShowWidgetTime: autoShowWidgetTime || undefined,
+        fullScreen: fullScreen || undefined,
+        buttonFlash: buttonFlash || undefined,
+        buttonTextColor,
+        buttonBackgroundColor,
+        dialogDimensions:
+          !fullScreen && (widgetWidth || widgetHeight)
+            ? {
+                width: widgetWidth ? `${widgetWidth}px` : "100%",
+                height: widgetHeight ? `${widgetHeight}px` : "100%",
+              }
+            : undefined,
+      },
+      widgetUrl
    );
+
+    return <WidgetScript scriptText={scriptText} helperText="Установите код внутрь тэга head" />;
  }

  return (
@ -92,11 +83,7 @@ export default function SideWidgetSetup({ step, nextButton }: Props) {
          }}
        >
          <img
-            src={
-              position === "left"
-                ? sideWidgetPreviewLeft
-                : sideWidgetPreviewRight
-            }
+            src={position === "left" ? sideWidgetPreviewLeft : sideWidgetPreviewRight}
            style={{
              display: "block",
              width: "100%",
@ -133,9 +120,7 @@ export default function SideWidgetSetup({ step, nextButton }: Props) {
              position="left"
              onClick={() => setPosition("left")}
            />
-            <Typography color={theme.palette.grey2.main}>
-              Слева снизу
-            </Typography>
+            <Typography color={theme.palette.grey2.main}>Слева снизу</Typography>
          </Box>
          <Box
            sx={{
@ -150,9 +135,7 @@ export default function SideWidgetSetup({ step, nextButton }: Props) {
              position="right"
              onClick={() => setPosition("right")}
            />
-            <Typography color={theme.palette.grey2.main}>
-              Справа снизу
-            </Typography>
+            <Typography color={theme.palette.grey2.main}>Справа снизу</Typography>
          </Box>
        </Box>
        <CustomCheckbox
@ -174,9 +157,7 @@ export default function SideWidgetSetup({ step, nextButton }: Props) {
                gap: "20px",
              }}
            >
-              <Typography sx={{ color: theme.palette.grey2.main }}>
-                Ширина окна (px)
-              </Typography>
+              <Typography sx={{ color: theme.palette.grey2.main }}>Ширина окна (px)</Typography>
              <PenaTextField
                type="number"
                value={widgetWidth}
@ -192,9 +173,7 @@ export default function SideWidgetSetup({ step, nextButton }: Props) {
                gap: "20px",
              }}
            >
-              <Typography sx={{ color: theme.palette.grey2.main }}>
-                Высота окна (px)
-              </Typography>
+              <Typography sx={{ color: theme.palette.grey2.main }}>Высота окна (px)</Typography>
              <PenaTextField
                type="number"
                value={widgetHeight}
@ -212,20 +191,10 @@ export default function SideWidgetSetup({ step, nextButton }: Props) {
            alignItems: "center",
          }}
        >
-          <Typography sx={{ color: theme.palette.grey2.main }}>
-            Цвет кнопки
-          </Typography>
-          <CircleColorPicker
-            color={buttonBackgroundColor}
-            onChange={(color) => setButtonBackgroundColor(color)}
-          />
-          <Typography sx={{ color: theme.palette.grey2.main }}>
-            Цвет текста кнопки
-          </Typography>
-          <CircleColorPicker
-            color={buttonTextColor}
-            onChange={(color) => setButtonTextColor(color)}
-          />
+          <Typography sx={{ color: theme.palette.grey2.main }}>Цвет кнопки</Typography>
+          <CircleColorPicker color={buttonBackgroundColor} onChange={(color) => setButtonBackgroundColor(color)} />
+          <Typography sx={{ color: theme.palette.grey2.main }}>Цвет текста кнопки</Typography>
+          <CircleColorPicker color={buttonTextColor} onChange={(color) => setButtonTextColor(color)} />
        </Box>
        <Box
          sx={{
@ -234,9 +203,7 @@ export default function SideWidgetSetup({ step, nextButton }: Props) {
            alignItems: "center",
          }}
        >
-          <Typography sx={{ color: theme.palette.grey2.main }}>
-            Показывать кнопку через
-          </Typography>
+          <Typography sx={{ color: theme.palette.grey2.main }}>Показывать кнопку через</Typography>
          <PenaTextField
            type="number"
            value={autoShowWidgetTime}
@ -245,15 +212,9 @@ export default function SideWidgetSetup({ step, nextButton }: Props) {
              width: "90px",
            }}
          />
-          <Typography sx={{ color: theme.palette.grey2.main }}>
-            секунд
-          </Typography>
+          <Typography sx={{ color: theme.palette.grey2.main }}>секунд</Typography>
        </Box>
-        <CustomCheckbox
-          label="С бликом"
-          checked={buttonFlash}
-          handleChange={(e) => setButtonFlash(e.target.checked)}
-        />
+        <CustomCheckbox label="С бликом" checked={buttonFlash} handleChange={(e) => setButtonFlash(e.target.checked)} />
        <Box>
          <CustomCheckbox
            label="Автооткрытие виджета при входе на сайт"
@ -269,9 +230,7 @@ export default function SideWidgetSetup({ step, nextButton }: Props) {
                mt: "14px",
              }}
            >
-              <Typography sx={{ color: theme.palette.grey2.main }}>
-                Показывать через
-              </Typography>
+              <Typography sx={{ color: theme.palette.grey2.main }}>Показывать через</Typography>
              <PenaTextField
                type="number"
                value={autoShowQuizTime}
@ -280,9 +239,7 @@ export default function SideWidgetSetup({ step, nextButton }: Props) {
                  width: "90px",
                }}
              />
-              <Typography sx={{ color: theme.palette.grey2.main }}>
-                секунд
-              </Typography>
+              <Typography sx={{ color: theme.palette.grey2.main }}>секунд</Typography>
            </Box>
            <Typography
              sx={{
--- a/src/pages/InstallQuiz/QuizInstallationCard/createWidgetScriptText.ts
+++ b/src/pages/InstallQuiz/QuizInstallationCard/createWidgetScriptText.ts
@ -8,47 +8,44 @@ import {
  WidgetType,
 } from "@frontend/squzanswerer";

-export function createContainerWidgetScriptText(params: ContainerWidgetParams) {
+export function createContainerWidgetScriptText(params: ContainerWidgetParams, widgetUrl: string) {
  return `<div id="${params.selector.slice(1)}"></div>
 <script type="module">
-import { ContainerWidget } from "https://hbpn.link/export/pub.js";
+import { ContainerWidget } from "${widgetUrl}";

 new ContainerWidget(${JSON.stringify(params, null, 4)});
 </script>`;
 }

-export function createButtonWidgetScriptText(
-  params: ButtonWidgetParams | ButtonWidgetFixedParams,
-) {
-  const widgetClassName =
-    "fixedSide" in params ? "ButtonWidgetFixed" : "ButtonWidget";
+export function createButtonWidgetScriptText(params: ButtonWidgetParams | ButtonWidgetFixedParams, widgetUrl: string) {
+  const widgetClassName = "fixedSide" in params ? "ButtonWidgetFixed" : "ButtonWidget";

  return `${"selector" in params ? `<div id="${params.selector.slice(1)}"></div>\n` : ""}<script type="module">
-import { ${widgetClassName} } from "https://hbpn.link/export/pub.js";
+import { ${widgetClassName} } from "${widgetUrl}";

 new ${widgetClassName}(${JSON.stringify(params, null, 4)});
 </script>`;
 }

-export function createPopupWidgetScriptText(params: PopupWidgetParams) {
+export function createPopupWidgetScriptText(params: PopupWidgetParams, widgetUrl: string) {
  return `<script type="module">
-import { PopupWidget } from "https://hbpn.link/export/pub.js";
+import { PopupWidget } from "${widgetUrl}";

 new PopupWidget(${JSON.stringify(params, null, 4)});
 </script>`;
 }

-export function createSideWidgetScriptText(params: SideWidgetParams) {
+export function createSideWidgetScriptText(params: SideWidgetParams, widgetUrl: string) {
  return `<script type="module">
-import { SideWidget } from "https://hbpn.link/export/pub.js";
+import { SideWidget } from "${widgetUrl}";

 new SideWidget(${JSON.stringify(params, null, 4)});
 </script>`;
 }

-export function createBannerWidgetScriptText(params: BannerWidgetParams) {
+export function createBannerWidgetScriptText(params: BannerWidgetParams, widgetUrl: string) {
  return `<script type="module">
-import { BannerWidget } from "https://hbpn.link/export/pub.js";
+import { BannerWidget } from "${widgetUrl}";

 new BannerWidget(${JSON.stringify(params, null, 4)});
 </script>`;
--- a/src/pages/InstallQuiz/QuizInstallationCard/useWidgetUrl.ts
+++ b/src/pages/InstallQuiz/QuizInstallationCard/useWidgetUrl.ts
@ -0,0 +1,7 @@
+import { useDomainDefine } from "@/utils/hooks/useDomainDefine";
+
+export function useWidgetUrl() {
+  const { isTestServer } = useDomainDefine();
+
+  return `https://${isTestServer ? "s." : ""}hbpn.link/export/pub.js`;
+}