From ed7b2d941e479290918993a4a8aea738f4b50178 Mon Sep 17 00:00:00 2001
From: Vidyoot Senthil <vidyoots@gmail.com>
Date: Tue, 17 Dec 2024 16:31:47 -0600
Subject: [PATCH 1/4] feature: add video link field to public page settings +
 ts sdk

---
 clients/ts-sdk/src/types.gen.ts               |  1 +
 .../src/pages/dataset/PublicPageSettings.tsx  | 17 +++++++
 server/src/data/models.rs                     |  3 ++
 server/src/handlers/page_handler.rs           |  2 +
 server/src/public/page.html                   | 48 +++++++++++++++++--
 server/static/output.css                      | 19 ++++++++
 6 files changed, 87 insertions(+), 3 deletions(-)

diff --git a/clients/ts-sdk/src/types.gen.ts b/clients/ts-sdk/src/types.gen.ts
index 2368d87d9..57e0e7dc7 100644
--- a/clients/ts-sdk/src/types.gen.ts
+++ b/clients/ts-sdk/src/types.gen.ts
@@ -2102,6 +2102,7 @@ export type PublicPageParameters = {
     useGroupSearch?: (boolean) | null;
     usePagefind?: (boolean) | null;
     zIndex?: (number) | null;
+    videoLink?: (string) | null;
 };
 
 export type PublicPageSearchOptions = {
diff --git a/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx b/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx
index 92d4630f4..b1486566e 100644
--- a/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx
+++ b/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx
@@ -663,6 +663,23 @@ const PublicPageControls = () => {
               options={Object.keys(HeroPatterns)}
             />
           </div>
+          <div class="grow">
+            <div class="flex items-center gap-1">
+              <label class="block">Video Link</label>
+              <Tooltip
+                tooltipText="Text shown in the search box before user input"
+                body={<FaRegularCircleQuestion class="h-3 w-3 text-black" />}
+              />
+            </div>
+            <input
+              placeholder="Insert video link..."
+              value={extraParams.videoLink || ""}
+              onInput={(e) => {
+                setExtraParams("videoLink", e.currentTarget.value);
+              }}
+              class="block w-full rounded border border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
+            />
+          </div>
         </div>
         <Show when={extraParams["heroPattern"]?.heroPatternName !== "Blank"}>
           <div class="flex flex-row items-center justify-start gap-4 pt-4">
diff --git a/server/src/data/models.rs b/server/src/data/models.rs
index df9dfd325..e6818fb19 100644
--- a/server/src/data/models.rs
+++ b/server/src/data/models.rs
@@ -3257,6 +3257,9 @@ impl DatasetConfigurationDTO {
                     use_pagefind: page_parameters_self
                         .use_pagefind
                         .or(page_parameters_curr.use_pagefind),
+                    video_link: page_parameters_self
+                        .video_link
+                        .or(page_parameters_curr.video_link),
                 }),
             },
             DISABLE_ANALYTICS: self
diff --git a/server/src/handlers/page_handler.rs b/server/src/handlers/page_handler.rs
index 0f6e7c423..1ca00e6ad 100644
--- a/server/src/handlers/page_handler.rs
+++ b/server/src/handlers/page_handler.rs
@@ -256,6 +256,8 @@ pub struct PublicPageParameters {
     pub hide_drawn_text: Option<bool>,
     #[serde(skip_serializing_if = "Option::is_none")]
     pub use_pagefind: Option<bool>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub video_link: Option<String>,
 }
 
 #[utoipa::path(
diff --git a/server/src/public/page.html b/server/src/public/page.html
index 2e02c7e86..7f9653fa7 100644
--- a/server/src/public/page.html
+++ b/server/src/public/page.html
@@ -372,6 +372,48 @@
           brackets: ["left"],
         });
       }
+    const openTrieveRect = openTrieveModalElement.getBoundingClientRect();
+    let endOpenX = openTrieveRect.right + 138;
+    let endOpenY = openTrieveRect.bottom + 45;
+    if (endOpenX > window.innerWidth) {
+      endOpenX = window.innerWidth - 125;
+      endOpenY += 15;
+    }
+    const startOpenX = openTrieveRect.right + 60;
+    const startOpenY = openTrieveRect.bottom - 15;
+
+    rc.path(
+      `M ${startOpenX} ${startOpenY}
+         Q ${startOpenX + 85} ${endOpenY - 85} ${endOpenX} ${endOpenY}`,
+      {
+        stroke: window.paramsData.brandColor || "black",
+        strokeWidth: 2,
+        roughness: 3,
+        bowing: 3,
+      },
+    );
+
+    const arrowSize = 10;
+    rc.line(
+      startOpenX - 5,
+      startOpenY,
+      startOpenX + arrowSize,
+      startOpenY + arrowSize,
+      {
+        stroke: window.paramsData.brandColor || "black",
+        strokeWidth: 2,
+      },
+    );
+    rc.line(
+      startOpenX - 5,
+      startOpenY,
+      startOpenX + arrowSize,
+      startOpenY - arrowSize,
+      {
+        stroke: window.paramsData.brandColor || "black",
+        strokeWidth: 2,
+      },
+    );
 
       const circleSearchAnimation = annotate(openTrieveModalElement, {
         type: "circle",
@@ -414,7 +456,7 @@
           strokeWidth: 2,
           roughness: 3,
           bowing: 3,
-        }
+        },
       );
 
       const arrowSize = 10;
@@ -426,7 +468,7 @@
         {
           stroke: window.paramsData.brandColor || "black",
           strokeWidth: 2,
-        }
+        },
       );
       rc.line(
         startOpenX - 5,
@@ -436,7 +478,7 @@
         {
           stroke: window.paramsData.brandColor || "black",
           strokeWidth: 2,
-        }
+        },
       );
 
       let endRecX = 0;
diff --git a/server/static/output.css b/server/static/output.css
index f2b52896a..a2e625659 100644
--- a/server/static/output.css
+++ b/server/static/output.css
@@ -612,6 +612,10 @@ video {
   margin-top: 2rem;
 }
 
+.mt-0\.5 {
+  margin-top: 0.125rem;
+}
+
 .line-clamp-1 {
   overflow: hidden;
   display: -webkit-box;
@@ -796,6 +800,11 @@ video {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -904,6 +913,16 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }

From 77b0dffc03feef921799b2e6ff7d431860d3b7ff Mon Sep 17 00:00:00 2001
From: Vidyoot Senthil <vidyoots@gmail.com>
Date: Wed, 18 Dec 2024 14:44:28 -0600
Subject: [PATCH 2/4] feature: add video embed to public page template

---
 server/src/public/page.html | 54 ++++++++++++++++++++++++++++++++++---
 1 file changed, 51 insertions(+), 3 deletions(-)

diff --git a/server/src/public/page.html b/server/src/public/page.html
index 7f9653fa7..f695b95f6 100644
--- a/server/src/public/page.html
+++ b/server/src/public/page.html
@@ -200,9 +200,6 @@
         color: black;
         padding: 0.3rem;
         font-size: 0.8rem;
-        position: fixed;
-        bottom: 0.5rem;
-        left: 0.5rem;
         text-decoration: none;
         z-index: 20;
       }
@@ -306,6 +303,41 @@
           background-color:  color-mix(in srgb, var(--brand-color), black 20%);
         }
       }
+
+      .video-wrapper {
+        position: fixed;
+        bottom: 20px;
+        left: 20px;
+        width: 100%;
+        max-width: 18.5rem;
+        height: 14.5rem;
+        margin: 0;
+        padding: 0;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 0.5rem;
+      }
+
+      .video-wrapper iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+        object-fit: cover;
+      }
+
+      @media (max-width: 640px) {
+        .video-wrapper {
+          position: relative;
+          bottom: 0;
+          left: 0;
+          margin: 0 auto;
+          max-width: calc(100vw - 4rem);
+          height: 20rem;
+        }
+      }
     </style>
 
     <script type="module">
@@ -328,6 +360,22 @@
         <div class="mt-24 sm:mt-6"></div>
         {% endif %} {% if tabs|length > 0 %} {% include "tabs.html" %} {% else
         %} {% include "search-component-code.html" %} {% endif %}
+        <div class="video-wrapper">
+          {% if logged_in %}
+          <a
+            class="dev-back-button"
+            href="{{dashboard_url}}/dataset/{{params.datasetId}}/public-page"
+            >Back To Dashboard</a
+          >
+          {% endif %}
+          <iframe
+            src="{{params.videoLink}}"
+            frameborder="0"
+            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+          >
+          </iframe>
+        </div>
       </div>
     </main>
   </body>

From 6c1a0b17333b77d109454263f365bf3853c69fc2 Mon Sep 17 00:00:00 2001
From: Vidyoot Senthil <vidyoots@gmail.com>
Date: Wed, 18 Dec 2024 14:52:16 -0600
Subject: [PATCH 3/4] cleanup: fix ordering on public page + tooltip

---
 .../src/pages/dataset/PublicPageSettings.tsx  | 132 +++++++++---------
 server/static/output.css                      |  19 ---
 2 files changed, 68 insertions(+), 83 deletions(-)

diff --git a/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx b/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx
index b1486566e..0ad6fc9d2 100644
--- a/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx
+++ b/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx
@@ -663,11 +663,78 @@ const PublicPageControls = () => {
               options={Object.keys(HeroPatterns)}
             />
           </div>
+          <Show when={extraParams["heroPattern"]?.heroPatternName !== "Blank"}>
+            <div class="flex flex-row items-center justify-start gap-4 pt-4">
+              <div class="">
+                <label class="block" for="">
+                  Foreground Color
+                </label>
+                <input
+                  placeholder="#FFFFFF"
+                  value={extraParams.heroPattern?.foregroundColor || "#FFFFFF"}
+                  onInput={(e) => {
+                    setExtraParams(
+                      "heroPattern",
+                      "foregroundColor",
+                      e.currentTarget.value,
+                    );
+                  }}
+                  class="block w-full rounded border border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
+                />
+              </div>
+              <div class="">
+                <Show
+                  when={
+                    extraParams.heroPattern?.heroPatternName !== "Blank" &&
+                    extraParams.heroPattern?.heroPatternName !== "Solid"
+                  }
+                >
+                  <label class="block" for="">
+                    Background Color
+                  </label>
+                  <input
+                    placeholder="#FFFFFF"
+                    value={
+                      extraParams.heroPattern?.backgroundColor || "#FFFFFF"
+                    }
+                    onChange={(e) => {
+                      setExtraParams(
+                        "heroPattern",
+                        "backgroundColor",
+                        e.currentTarget.value,
+                      );
+                    }}
+                    class="block w-full rounded border border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
+                  />
+                </Show>
+              </div>
+              <div class="">
+                <label class="block" for="">
+                  Foreground Opacity
+                </label>
+                <input
+                  type="range"
+                  min="0"
+                  max="100"
+                  onChange={(e) => {
+                    setExtraParams(
+                      "heroPattern",
+                      "foregroundOpacity",
+                      parseInt(e.currentTarget.value) / 100,
+                    );
+                  }}
+                  value={
+                    (extraParams.heroPattern?.foregroundOpacity || 0.5) * 100
+                  }
+                />
+              </div>
+            </div>
+          </Show>
           <div class="grow">
             <div class="flex items-center gap-1">
               <label class="block">Video Link</label>
               <Tooltip
-                tooltipText="Text shown in the search box before user input"
+                tooltipText="Video that will be displayed on the public page."
                 body={<FaRegularCircleQuestion class="h-3 w-3 text-black" />}
               />
             </div>
@@ -681,69 +748,6 @@ const PublicPageControls = () => {
             />
           </div>
         </div>
-        <Show when={extraParams["heroPattern"]?.heroPatternName !== "Blank"}>
-          <div class="flex flex-row items-center justify-start gap-4 pt-4">
-            <div class="">
-              <label class="block" for="">
-                Foreground Color
-              </label>
-              <input
-                placeholder="#FFFFFF"
-                value={extraParams.heroPattern?.foregroundColor || "#FFFFFF"}
-                onInput={(e) => {
-                  setExtraParams(
-                    "heroPattern",
-                    "foregroundColor",
-                    e.currentTarget.value,
-                  );
-                }}
-                class="block w-full rounded border border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
-              />
-            </div>
-            <div class="">
-              <Show
-                when={
-                  extraParams.heroPattern?.heroPatternName !== "Blank" &&
-                  extraParams.heroPattern?.heroPatternName !== "Solid"
-                }
-              >
-                <label class="block" for="">
-                  Background Color
-                </label>
-                <input
-                  placeholder="#FFFFFF"
-                  value={extraParams.heroPattern?.backgroundColor || "#FFFFFF"}
-                  onChange={(e) => {
-                    setExtraParams(
-                      "heroPattern",
-                      "backgroundColor",
-                      e.currentTarget.value,
-                    );
-                  }}
-                  class="block w-full rounded border border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
-                />
-              </Show>
-            </div>
-            <div class="">
-              <label class="block" for="">
-                Foreground Opacity 0-1
-              </label>
-              <input
-                type="number"
-                placeholder="1000"
-                value={extraParams.heroPattern?.foregroundOpacity || 0.5}
-                onInput={(e) => {
-                  setExtraParams(
-                    "heroPattern",
-                    "foregroundOpacity",
-                    parseFloat(e.currentTarget.value),
-                  );
-                }}
-                class="block w-full rounded border border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
-              />
-            </div>
-          </div>
-        </Show>
         <details class="pt-4">
           <summary class="cursor-pointer text-sm font-medium">
             Advanced Settings
diff --git a/server/static/output.css b/server/static/output.css
index a2e625659..f2b52896a 100644
--- a/server/static/output.css
+++ b/server/static/output.css
@@ -612,10 +612,6 @@ video {
   margin-top: 2rem;
 }
 
-.mt-0\.5 {
-  margin-top: 0.125rem;
-}
-
 .line-clamp-1 {
   overflow: hidden;
   display: -webkit-box;
@@ -800,11 +796,6 @@ video {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -913,16 +904,6 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-black {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
-}
-
-.text-gray-900 {
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
-}
-
 .underline {
   text-decoration-line: underline;
 }

From ae1786455d52321b82b4e548b48424cf3a1fd2c4 Mon Sep 17 00:00:00 2001
From: Nick K <nick.k@trieve.ai>
Date: Fri, 20 Dec 2024 21:58:31 -0800
Subject: [PATCH 4/4] cleanup: allow for video link to be placed as a floating
 element or in product description

---
 clients/search-component/package.json         |  2 +-
 .../src/TrieveModal/index.css                 |  4 +-
 clients/ts-sdk/openapi.json                   | 20 ++++++
 clients/ts-sdk/src/types.gen.ts               |  5 +-
 .../src/hooks/usePublicPageSettings.tsx       |  2 +-
 .../src/pages/dataset/PublicPageSettings.tsx  | 20 +++++-
 server/src/data/models.rs                     |  3 +
 server/src/handlers/page_handler.rs           |  2 +
 server/src/public/page.html                   | 68 ++++---------------
 server/src/public/product.html                | 12 ++++
 10 files changed, 78 insertions(+), 60 deletions(-)

diff --git a/clients/search-component/package.json b/clients/search-component/package.json
index 9f602e7cf..b4d5f7e9a 100644
--- a/clients/search-component/package.json
+++ b/clients/search-component/package.json
@@ -19,7 +19,7 @@
       "import": "./dist/vanilla/index.js"
     }
   },
-  "version": "0.2.44",
+  "version": "0.2.45",
   "license": "MIT",
   "homepage": "https://github.com/devflowinc/trieve/tree/main/clients/search-component",
   "scripts": {
diff --git a/clients/search-component/src/TrieveModal/index.css b/clients/search-component/src/TrieveModal/index.css
index 29a357a88..ffe0fdae3 100644
--- a/clients/search-component/src/TrieveModal/index.css
+++ b/clients/search-component/src/TrieveModal/index.css
@@ -1288,7 +1288,9 @@ body {
   }
 
   .floating-input-container {
-    @apply z-[999] fixed bottom-5 flex flex-row items-center justify-start gap-2 w-2/4 p-1 pr-5 h-[55px] rounded-full cursor-pointer transition-colors duration-300 ease-in-out bg-white border-2;
+    @apply z-[999] fixed bottom-5 flex flex-row items-center justify-start gap-2 w-1/2 p-1 pr-5 h-[55px] rounded-full cursor-pointer transition-colors duration-300 ease-in-out bg-white border-2;
+
+    left: 25%;
 
     &:hover {
       border-color: var(--tv-prop-brand-color);
diff --git a/clients/ts-sdk/openapi.json b/clients/ts-sdk/openapi.json
index 47ad79979..7d997b41b 100644
--- a/clients/ts-sdk/openapi.json
+++ b/clients/ts-sdk/openapi.json
@@ -12471,6 +12471,10 @@
             "type": "string",
             "nullable": true
           },
+          "floatingSearchIconPosition": {
+            "type": "string",
+            "nullable": true
+          },
           "forBrandName": {
             "type": "string",
             "nullable": true
@@ -12531,6 +12535,14 @@
             "type": "boolean",
             "nullable": true
           },
+          "showFloatingInput": {
+            "type": "boolean",
+            "nullable": true
+          },
+          "showFloatingSearchIcon": {
+            "type": "boolean",
+            "nullable": true
+          },
           "singleProductOptions": {
             "allOf": [
               {
@@ -12577,6 +12589,14 @@
             "type": "boolean",
             "nullable": true
           },
+          "videoLink": {
+            "type": "string",
+            "nullable": true
+          },
+          "videoPosition": {
+            "type": "string",
+            "nullable": true
+          },
           "zIndex": {
             "type": "integer",
             "format": "int32",
diff --git a/clients/ts-sdk/src/types.gen.ts b/clients/ts-sdk/src/types.gen.ts
index 57e0e7dc7..63249b8d5 100644
--- a/clients/ts-sdk/src/types.gen.ts
+++ b/clients/ts-sdk/src/types.gen.ts
@@ -2091,8 +2091,8 @@ export type PublicPageParameters = {
     responsive?: (boolean) | null;
     searchOptions?: ((PublicPageSearchOptions) | null);
     showFloatingButton?: (boolean) | null;
-    showFloatingSearchIcon?: (boolean) | null;
     showFloatingInput?: (boolean) | null;
+    showFloatingSearchIcon?: (boolean) | null;
     singleProductOptions?: ((SingleProductOptions) | null);
     suggestedQueries?: (boolean) | null;
     tabMessages?: Array<PublicPageTabMessage> | null;
@@ -2101,8 +2101,9 @@ export type PublicPageParameters = {
     type?: (string) | null;
     useGroupSearch?: (boolean) | null;
     usePagefind?: (boolean) | null;
-    zIndex?: (number) | null;
     videoLink?: (string) | null;
+    videoPosition?: (string) | null;
+    zIndex?: (number) | null;
 };
 
 export type PublicPageSearchOptions = {
diff --git a/frontends/dashboard/src/hooks/usePublicPageSettings.tsx b/frontends/dashboard/src/hooks/usePublicPageSettings.tsx
index 9772c57bc..957c5f114 100644
--- a/frontends/dashboard/src/hooks/usePublicPageSettings.tsx
+++ b/frontends/dashboard/src/hooks/usePublicPageSettings.tsx
@@ -209,7 +209,7 @@ export const { use: usePublicPage, provider: PublicPageProvider } =
 
     const apiHost = import.meta.env.VITE_API_HOST as unknown as string;
     const publicUrl = createMemo(() => {
-      return `${apiHost.slice(0, -4)}/demos/${
+      return `${apiHost.replace("/api.", "/demos.").slice(0, -4)}/demos/${
         dataset()?.dataset.tracking_id ?? datasetId()
       }`;
     });
diff --git a/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx b/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx
index 0ad6fc9d2..dc0ed4486 100644
--- a/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx
+++ b/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx
@@ -730,11 +730,12 @@ const PublicPageControls = () => {
               </div>
             </div>
           </Show>
+          <div class="grow" />
           <div class="grow">
             <div class="flex items-center gap-1">
               <label class="block">Video Link</label>
               <Tooltip
-                tooltipText="Video that will be displayed on the public page."
+                tooltipText="Video that will be displayed on the public page. Needs to be the embed link."
                 body={<FaRegularCircleQuestion class="h-3 w-3 text-black" />}
               />
             </div>
@@ -747,6 +748,23 @@ const PublicPageControls = () => {
               class="block w-full rounded border border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
             />
           </div>
+          <div class="grow">
+            <div class="flex items-center gap-1">
+              <label class="block">Video Position</label>
+              <Tooltip
+                tooltipText="Position of the video on the page. Either floating or centered."
+                body={<FaRegularCircleQuestion class="h-3 w-3 text-black" />}
+              />
+            </div>
+            <input
+              placeholder="floating | product"
+              value={extraParams.videoPosition || ""}
+              onInput={(e) => {
+                setExtraParams("videoPosition", e.currentTarget.value);
+              }}
+              class="block w-full rounded border border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
+            />
+          </div>
         </div>
         <details class="pt-4">
           <summary class="cursor-pointer text-sm font-medium">
diff --git a/server/src/data/models.rs b/server/src/data/models.rs
index e6818fb19..7ca214452 100644
--- a/server/src/data/models.rs
+++ b/server/src/data/models.rs
@@ -3260,6 +3260,9 @@ impl DatasetConfigurationDTO {
                     video_link: page_parameters_self
                         .video_link
                         .or(page_parameters_curr.video_link),
+                    video_position: page_parameters_self
+                        .video_position
+                        .or(page_parameters_curr.video_position),
                 }),
             },
             DISABLE_ANALYTICS: self
diff --git a/server/src/handlers/page_handler.rs b/server/src/handlers/page_handler.rs
index 1ca00e6ad..e44c03b54 100644
--- a/server/src/handlers/page_handler.rs
+++ b/server/src/handlers/page_handler.rs
@@ -258,6 +258,8 @@ pub struct PublicPageParameters {
     pub use_pagefind: Option<bool>,
     #[serde(skip_serializing_if = "Option::is_none")]
     pub video_link: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub video_position: Option<String>,
 }
 
 #[utoipa::path(
diff --git a/server/src/public/page.html b/server/src/public/page.html
index f695b95f6..29143b9a2 100644
--- a/server/src/public/page.html
+++ b/server/src/public/page.html
@@ -304,6 +304,13 @@
         }
       }
 
+      .product-video-wrapper {
+        position: relative;
+        margin-top: 0.75rem;
+        margin-bottom: 0.75rem;
+        z-index: 15;
+      }
+
       .video-wrapper {
         position: fixed;
         bottom: 20px;
@@ -313,7 +320,7 @@
         height: 14.5rem;
         margin: 0;
         padding: 0;
-
+        z-index: 20;
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -359,15 +366,9 @@
         {% else %}
         <div class="mt-24 sm:mt-6"></div>
         {% endif %} {% if tabs|length > 0 %} {% include "tabs.html" %} {% else
-        %} {% include "search-component-code.html" %} {% endif %}
+        %} {% include "search-component-code.html" %} {% endif %} {% if
+        params.videoLink and params.videoPosition == "floating" %}
         <div class="video-wrapper">
-          {% if logged_in %}
-          <a
-            class="dev-back-button"
-            href="{{dashboard_url}}/dataset/{{params.datasetId}}/public-page"
-            >Back To Dashboard</a
-          >
-          {% endif %}
           <iframe
             src="{{params.videoLink}}"
             frameborder="0"
@@ -376,6 +377,7 @@
           >
           </iframe>
         </div>
+        {% endif %}
       </div>
     </main>
   </body>
@@ -420,48 +422,6 @@
           brackets: ["left"],
         });
       }
-    const openTrieveRect = openTrieveModalElement.getBoundingClientRect();
-    let endOpenX = openTrieveRect.right + 138;
-    let endOpenY = openTrieveRect.bottom + 45;
-    if (endOpenX > window.innerWidth) {
-      endOpenX = window.innerWidth - 125;
-      endOpenY += 15;
-    }
-    const startOpenX = openTrieveRect.right + 60;
-    const startOpenY = openTrieveRect.bottom - 15;
-
-    rc.path(
-      `M ${startOpenX} ${startOpenY}
-         Q ${startOpenX + 85} ${endOpenY - 85} ${endOpenX} ${endOpenY}`,
-      {
-        stroke: window.paramsData.brandColor || "black",
-        strokeWidth: 2,
-        roughness: 3,
-        bowing: 3,
-      },
-    );
-
-    const arrowSize = 10;
-    rc.line(
-      startOpenX - 5,
-      startOpenY,
-      startOpenX + arrowSize,
-      startOpenY + arrowSize,
-      {
-        stroke: window.paramsData.brandColor || "black",
-        strokeWidth: 2,
-      },
-    );
-    rc.line(
-      startOpenX - 5,
-      startOpenY,
-      startOpenX + arrowSize,
-      startOpenY - arrowSize,
-      {
-        stroke: window.paramsData.brandColor || "black",
-        strokeWidth: 2,
-      },
-    );
 
       const circleSearchAnimation = annotate(openTrieveModalElement, {
         type: "circle",
@@ -504,7 +464,7 @@
           strokeWidth: 2,
           roughness: 3,
           bowing: 3,
-        },
+        }
       );
 
       const arrowSize = 10;
@@ -516,7 +476,7 @@
         {
           stroke: window.paramsData.brandColor || "black",
           strokeWidth: 2,
-        },
+        }
       );
       rc.line(
         startOpenX - 5,
@@ -526,7 +486,7 @@
         {
           stroke: window.paramsData.brandColor || "black",
           strokeWidth: 2,
-        },
+        }
       );
 
       let endRecX = 0;
diff --git a/server/src/public/product.html b/server/src/public/product.html
index c9a7f5447..f1efb8f2e 100644
--- a/server/src/public/product.html
+++ b/server/src/public/product.html
@@ -19,9 +19,21 @@
           {{ params.singleProductOptions.productName }}
         </h1>
 
+        {% if params.videoLink and params.videoPosition == "product" %}
+        <div class="product-video-wrapper">
+          <iframe
+            src="{{params.videoLink}}"
+            frameborder="0"
+            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+          >
+          </iframe>
+        </div>
+        {% else %}
         <div class="mt-2 text-gray-500 paragraph-text">
           {{ params.singleProductOptions.productDescriptionHtml|safe }}
         </div>
+        {% endif %}
 
         <div class="mt-4">
           <button