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 | 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 = () => { +
} />
@@ -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" />
+
+
+ + } + /> +
+ { + 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" + /> +
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, #[serde(skip_serializing_if = "Option::is_none")] pub video_link: Option, + #[serde(skip_serializing_if = "Option::is_none")] + pub video_position: Option, } #[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 %}
{% 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" %}
- {% if logged_in %} - Back To Dashboard - {% endif %}
+ {% endif %} @@ -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 }} + {% if params.videoLink and params.videoPosition == "product" %} +
+ +
+ {% else %}
{{ params.singleProductOptions.productDescriptionHtml|safe }}
+ {% endif %}