feat(viewer): ✨ Custom head code

apps/builder/components/settings/MetadataForm.tsx

@@ -7,9 +7,15 @@ import {
   Stack,
   Image,
   PopoverContent,
+  Tooltip,
+  HStack,
+  Text,
+  Flex,
 } from '@chakra-ui/react'
 import { ImageUploadContent } from 'components/shared/ImageUploadContent'
 import { Input, Textarea } from 'components/shared/Textbox'
+import { CodeEditor } from 'components/shared/CodeEditor'
+import { HelpCircleIcon } from 'assets/icons'
 
 type Props = {
   typebotName: string
@@ -30,6 +36,8 @@ export const MetadataForm = ({
     onMetadataChange({ ...metadata, favIconUrl })
   const handleImageSubmit = (imageUrl: string) =>
     onMetadataChange({ ...metadata, imageUrl })
+  const handleHeadCodeChange = (customHeadCode: string) =>
+    onMetadataChange({ ...metadata, customHeadCode })
 
   return (
     <Stack spacing="6">
@@ -37,7 +45,7 @@ export const MetadataForm = ({
         <FormLabel mb="0" htmlFor="icon">
           Icon:
         </FormLabel>
-        <Popover isLazy>
+        <Popover isLazy placement="top">
           <PopoverTrigger>
             <Image
               src={metadata.favIconUrl ?? '/favicon.png'}
@@ -62,7 +70,7 @@ export const MetadataForm = ({
         <FormLabel mb="0" htmlFor="image">
           Image:
         </FormLabel>
-        <Popover isLazy>
+        <Popover isLazy placement="top">
           <PopoverTrigger>
             <Image
               src={metadata.imageUrl ?? '/viewer-preview.png'}
@@ -102,6 +110,29 @@ export const MetadataForm = ({
           onChange={handleDescriptionChange}
         />
       </Stack>
+      <Stack>
+        <HStack as={FormLabel} mb="0" htmlFor="head">
+          <Text>Custom head code:</Text>
+          <Tooltip
+            label={
+              'Will be pasted at the bottom of the header section, just above the closing head tag. Only `meta` and `script` tags are allowed.'
+            }
+            placement="top"
+            hasArrow
+          >
+            <Flex cursor="pointer">
+              <HelpCircleIcon />
+            </Flex>
+          </Tooltip>
+        </HStack>
+        <CodeEditor
+          id="head"
+          value={metadata.customHeadCode ?? ''}
+          onChange={handleHeadCodeChange}
+          lang="html"
+          withVariableButton={false}
+        />
+      </Stack>
     </Stack>
   )
 }

apps/builder/playwright/tests/settings.spec.ts

@@ -82,7 +82,7 @@ test.describe.parallel('Settings page', () => {
       await page.click('button:has-text("Metadata")')
 
       // Fav icon
-      const favIconImg = page.locator(':nth-match(img, 1)')
+      const favIconImg = page.locator('img >> nth=0')
       await expect(favIconImg).toHaveAttribute('src', '/favicon.png')
       await favIconImg.click()
       await expect(page.locator('text=Giphy')).toBeHidden()
@@ -94,11 +94,11 @@ test.describe.parallel('Settings page', () => {
       await expect(favIconImg).toHaveAttribute('src', favIconUrl)
 
       // Website image
-      const websiteImg = page.locator(':nth-match(img, 2)')
+      const websiteImg = page.locator('img >> nth=1')
       await expect(websiteImg).toHaveAttribute('src', '/viewer-preview.png')
-      await websiteImg.click({ position: { x: 0, y: 180 } })
+      await websiteImg.click({ position: { x: 0, y: 160 }, force: true })
       await expect(page.locator('text=Giphy')).toBeHidden()
-      await page.click('button:has-text("Embed link")')
+      await page.click('button >> text="Embed link"')
       await page.fill('input[placeholder="Paste the image link..."]', imageUrl)
       await expect(websiteImg).toHaveAttribute('src', imageUrl)
 
@@ -107,6 +107,12 @@ test.describe.parallel('Settings page', () => {
 
       // Description
       await page.fill('textarea#description', 'Lorem ipsum')
+
+      // Custom head code
+      await page.fill(
+        'div[contenteditable=true]',
+        '<script>Lorem ipsum</script>'
+      )
     })
   })