🐛 (settings) Fix custom head code with noscript injection

apps/viewer/src/components/TypebotPage.tsx

@@ -2,7 +2,12 @@ import { TypebotViewer } from 'bot-engine'
 import { AnswerInput, PublicTypebot, Typebot, VariableWithValue } from 'models'
 import { useRouter } from 'next/router'
 import React, { useEffect, useState } from 'react'
-import { isDefined, isNotDefined, isNotEmpty } from 'utils'
+import {
+  injectCustomHeadCode,
+  isDefined,
+  isNotDefined,
+  isNotEmpty,
+} from 'utils'
 import { SEO } from './Seo'
 import { ErrorPage } from './ErrorPage'
 import { createResultQuery, updateResultQuery } from '@/features/results'
@@ -52,8 +57,7 @@ export const TypebotPage = ({
     })
     setPredefinedVariables(predefinedVariables)
     initializeResult().then()
-    if (isDefined(customHeadCode))
-      document.head.innerHTML = document.head.innerHTML + customHeadCode
+    if (isDefined(customHeadCode)) injectCustomHeadCode(customHeadCode)
     const gtmId = publishedTypebot.settings.metadata.googleTagManagerId
     if (isNotEmpty(gtmId)) document.body.prepend(gtmBodyElement(gtmId))
     // eslint-disable-next-line react-hooks/exhaustive-deps

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)
+  })
+}