🐛 (settings) Fix custom head code with noscript injection

packages/js/src/components/Bot.tsx

@@ -1,13 +1,17 @@
 import { LiteBadge } from './LiteBadge'
 import { createSignal, onCleanup, onMount, Show } from 'solid-js'
-import { getViewerUrl, isDefined, isNotEmpty } from 'utils'
+import {
+  getViewerUrl,
+  injectCustomHeadCode,
+  isDefined,
+  isNotEmpty,
+} from 'utils'
 import { getInitialChatReplyQuery } from '@/queries/getInitialChatReplyQuery'
 import { ConversationContainer } from './ConversationContainer'
 import css from '../assets/index.css'
 import { InitialChatReply, StartParams } from 'models'
 import { setIsMobile } from '@/utils/isMobileSignal'
 import { BotContext } from '@/types'
-import { injectHeadCode } from '@/utils/injectHeadCode'
 
 export type BotProps = StartParams & {
   initialChatReply?: InitialChatReply
@@ -25,9 +29,7 @@ export const Bot = (props: BotProps) => {
     if (isDefined(initialChatReplyValue)) {
       const customHeadCode =
         initialChatReplyValue.typebot.settings.metadata.customHeadCode
-      if (customHeadCode) {
-        injectHeadCode(customHeadCode)
-      }
+      if (customHeadCode) injectCustomHeadCode(customHeadCode)
     } else {
       const urlParams = new URLSearchParams(location.search)
       const prefilledVariables: { [key: string]: string } = {}

packages/utils/utils.ts

@@ -283,3 +283,23 @@ export const getViewerUrl = (props?: {
 
 export const parseNumberWithCommas = (num: number) =>
   num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+
+export const injectCustomHeadCode = (customHeadCode: string) => {
+  const headCodes = customHeadCode.split('</noscript>')
+  headCodes.forEach((headCode) => {
+    const [codeToInject, noScriptContentToInject] = headCode.split('<noscript>')
+    const fragment = document
+      .createRange()
+      .createContextualFragment(codeToInject)
+    document.head.append(fragment)
+
+    if (isNotDefined(noScriptContentToInject)) return
+
+    const noScriptElement = document.createElement('noscript')
+    const noScriptContentFragment = document
+      .createRange()
+      .createContextualFragment(noScriptContentToInject)
+    noScriptElement.append(noScriptContentFragment)
+    document.head.append(noScriptElement)
+  })
+}