diff --git a/package.json b/package.json
index e3b42b47..8cd4aeec 100755
--- a/package.json
+++ b/package.json
@@ -108,6 +108,7 @@
     "endOfLine": "auto",
     "bracketSpacing": true,
     "arrowParens": "always",
-    "jsxSingleQuote": false
+    "jsxSingleQuote": false,
+    "singleAttributePerLine": false
   }
 }
diff --git a/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetSetup.tsx b/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetSetup.tsx
index 6e790cf1..ca5dcad7 100644
--- 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" />;
   }
diff --git a/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/ButtonWidgetSetup.tsx b/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/ButtonWidgetSetup.tsx
index 30c80bab..dbf76127 100644
--- 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>
diff --git a/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/ContainerWidgetSetup.tsx b/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/ContainerWidgetSetup.tsx
index 7ef31b4b..a9553668 100644
--- 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>
diff --git a/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/PopupWidgetSetup.tsx b/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/PopupWidgetSetup.tsx
index dac7a5cc..6a4f3009 100644
--- 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="Открывать квиз при попытке уйти с сайта"
diff --git a/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/SideWidgetSetup/SideWidgetSetup.tsx b/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/SideWidgetSetup/SideWidgetSetup.tsx
index 81a1d374..8e2d2fb9 100644
--- 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={{
diff --git a/src/pages/InstallQuiz/QuizInstallationCard/createWidgetScriptText.ts b/src/pages/InstallQuiz/QuizInstallationCard/createWidgetScriptText.ts
index 6e69a4a0..923f8683 100644
--- 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>`;
diff --git a/src/pages/InstallQuiz/QuizInstallationCard/useWidgetUrl.ts b/src/pages/InstallQuiz/QuizInstallationCard/useWidgetUrl.ts
new file mode 100644
index 00000000..b1a6027f
--- /dev/null
+++ 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`;
+}