diff --git a/apps/scandic-web/components/Blocks/DynamicContent/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/index.tsx
index 456c29133..c70ebf0c7 100644
--- a/apps/scandic-web/components/Blocks/DynamicContent/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/index.tsx
@@ -22,6 +22,7 @@ import SignupFormWrapper from "@/components/Blocks/DynamicContent/SignupFormWrap
import NextStay from "@/components/Blocks/DynamicContent/Stays/NextStay"
import PreviousStays from "@/components/Blocks/DynamicContent/Stays/Previous"
import UpcomingStays from "@/components/Blocks/DynamicContent/Stays/Upcoming"
+import { SJWidget } from "@/components/SJWidget"
import JobylonFeed from "./JobylonFeed"
@@ -84,6 +85,8 @@ function DynamicContentBlocks(props: DynamicContentProps) {
preamble={dynamic_content.subtitle}
/>
)
+ case DynamicContentEnum.Blocks.components.sj_widget:
+ return
default:
return null
}
diff --git a/apps/scandic-web/components/SJWidget/index.tsx b/apps/scandic-web/components/SJWidget/index.tsx
new file mode 100644
index 000000000..da0806ce9
--- /dev/null
+++ b/apps/scandic-web/components/SJWidget/index.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import Script from "next/script"
+import { useEffect, useRef, useState } from "react"
+
+import useLang from "@/hooks/useLang"
+
+const SJSupportedLangs = ["en", "sv"] as const
+
+export function SJWidget() {
+ const lang = useLang()
+ const [scriptInitialized, setScriptInitialized] = useState(
+ !!window.SJ?.widget?.init
+ )
+ const componentInitialized = useRef(false)
+
+ useEffect(() => {
+ const initWidget = () => {
+ if (componentInitialized.current === true) return
+ if (!window.SJ?.widget?.init) return
+
+ window.SJ.widget.init({
+ micrositeId: "12952d0f-c70f-452c-9598-6586a64c7b60",
+ language: isSJSupportedLang(lang) ? lang : "en",
+ })
+
+ componentInitialized.current = true
+ }
+
+ initWidget()
+ }, [lang, scriptInitialized])
+
+ return (
+ <>
+