feat(SEO-416): Render h2 in form for pages with existing h1

Typeform · Apr 4, 2023 · 0abad02 · 0abad02
1 parent 608de3f
commit 0abad02
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 1 deletion.
diff --git a/packages/embed/src/base/url-options.ts b/packages/embed/src/base/url-options.ts
@@ -101,9 +101,12 @@ export type UrlOptions = {
    * @type {boolean}
    */
   hubspot?: boolean
-
   /**
    * Disable navigation between questions via scrolling and swiping
    */
   disableScroll?: boolean
+  /**
+   * Do not use H1 tags inside the form
+   */
+  noHeading?: boolean
 }
diff --git a/packages/embed/src/initializers/build-options-from-attributes.spec.ts b/packages/embed/src/initializers/build-options-from-attributes.spec.ts
@@ -29,6 +29,7 @@ describe('build-options-from-attributes', () => {
         data-tf-keep-session
         data-tf-disable-scroll
         data-tf-full-screen
+        data-tf-no-heading
       ></div>`
 
     it('should load correct options', () => {
@@ -72,6 +73,7 @@ describe('build-options-from-attributes', () => {
         keepSession: true,
         disableScroll: true,
         fullScreen: true,
+        noHeading: true,
       })
     })
   })

diff --git a/packages/embed/src/initializers/build-options-from-attributes.ts b/packages/embed/src/initializers/build-options-from-attributes.ts
@@ -45,5 +45,6 @@ export const buildOptionsFromAttributes = (element: HTMLElement) => {
     hubspot: 'boolean',
     disableScroll: 'boolean',
     fullScreen: 'boolean',
+    noHeading: 'boolean',
   })
 }
diff --git a/packages/embed/src/utils/build-iframe-src.spec.ts b/packages/embed/src/utils/build-iframe-src.spec.ts
@@ -154,5 +154,12 @@ describe('build-iframe-src', () => {
           '&__dangerous-disable-submissions=true'
       )
     })
+
+    it('should disable H1 headings in form if H1 is present in host page', () => {
+      jest.spyOn(document, 'querySelectorAll').mockReturnValue({ length: 1 } as any)
+      expect(buildIframeSrc({ formId: 'some-id', type: 'widget', embedId: '', options: {} })).toMatch(
+        'typeform-embed-no-heading=true'
+      )
+    })
   })
 })
diff --git a/packages/embed/src/utils/build-iframe-src.ts b/packages/embed/src/utils/build-iframe-src.ts
@@ -6,10 +6,13 @@ import { isDefined } from './is-defined'
 import { getTransitiveSearchParams } from './get-transitive-search-params'
 import { getHubspotHiddenFields } from './hubspot'
 
+const pageHasHeading = () => document.querySelectorAll('h1').length > 0
+
 const getDefaultUrlOptions = (): UrlOptions => ({
   source: window?.location?.hostname.replace(/^www\./, ''),
   medium: 'embed-sdk',
   mediumVersion: 'next',
+  noHeading: pageHasHeading(),
 })
 
 const addDefaultUrlOptions = (options: UrlOptions): UrlOptions => {
@@ -47,6 +50,7 @@ const mapOptionsToQueryParams = (
     autoResize,
     disableScroll,
     onEndingButtonClick,
+    noHeading,
   } = options
   const transitiveParams = getTransitiveSearchParams(transitiveSearchParams)
   const params = {
@@ -67,6 +71,7 @@ const mapOptionsToQueryParams = (
     'typeform-embed-auto-resize': autoResize ? 'true' : undefined,
     'typeform-embed-disable-scroll': disableScroll ? 'true' : undefined,
     'typeform-embed-handle-ending-button-click': !!onEndingButtonClick ? 'true' : undefined,
+    'typeform-embed-no-heading': noHeading ? 'true' : undefined,
   }
   return { ...params, ...transitiveParams, ...tracking }
 }