bot/apps/viewer/components/Seo.tsx

import { Metadata } from 'models'
import Head from 'next/head'
import React from 'react'

type SEOProps = {
  url: string
  typebotName: string
  metadata: Metadata
}

export const SEO = ({
  url,
  typebotName,
  metadata: { title, description, favIconUrl, imageUrl },
}: SEOProps) => (
  <Head>
    <title>{title ?? typebotName}</title>
    <link
      rel="icon"
      type="image/png"
      href={favIconUrl ?? 'https://bot.typebot.io/favicon.png'}
    />
    <meta name="title" content={title ?? typebotName} />
    <meta
      name="description"
      content={
        description ??
        'Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form.'
      }
    />

    <meta property="og:type" content="website" />
    <meta property="og:url" content={url ?? 'https://bot.typebot.io'} />
    <meta property="og:title" content={title ?? typebotName} />
    <meta property="og:site_name" content={title ?? typebotName} />
    <meta
      property="og:description"
      content={
        description ??
        'Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form.'
      }
    />
    <meta
      property="og:image"
      itemProp="image"
      content={imageUrl ?? 'https://bot.typebot.io/site-preview.png'}
    />

    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content={url ?? 'https://bot.typebot.io'} />
    <meta property="twitter:title" content={title ?? typebotName} />
    <meta
      property="twitter:description"
      content={
        description ??
        'Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form.'
      }
    />
    <meta
      property="twitter:image"
      content={imageUrl ?? 'https://bot.typebot.io/site-preview.png'}
    />
  </Head>
)
fix(viewer): 🐛 Custom metadata in viewer 2022-02-20 10:45:55 +01:00			`import { Metadata } from 'models'`
🦴 Add viewer backbone 2021-12-23 16:31:56 +01:00			`import Head from 'next/head'`
			`import React from 'react'`

fix(viewer): 🐛 Custom metadata in viewer 2022-02-20 10:45:55 +01:00			`type SEOProps = {`
			`url: string`
			`typebotName: string`
			`metadata: Metadata`
			`}`
🦴 Add viewer backbone 2021-12-23 16:31:56 +01:00
			`export const SEO = ({`
			`url,`
fix(viewer): 🐛 Custom metadata in viewer 2022-02-20 10:45:55 +01:00			`typebotName,`
			`metadata: { title, description, favIconUrl, imageUrl },`
🦴 Add viewer backbone 2021-12-23 16:31:56 +01:00			`}: SEOProps) => (`
			`<Head>`
fix(viewer): 🐛 Custom metadata in viewer 2022-02-20 10:45:55 +01:00			`<title>{title ?? typebotName}</title>`
🦴 Add viewer backbone 2021-12-23 16:31:56 +01:00			`<link`
			`rel="icon"`
			`type="image/png"`
fix(viewer): 🐛 Custom metadata in viewer 2022-02-20 10:45:55 +01:00			`href={favIconUrl ?? 'https://bot.typebot.io/favicon.png'}`
🦴 Add viewer backbone 2021-12-23 16:31:56 +01:00			`/>`
fix(viewer): 🐛 Custom metadata in viewer 2022-02-20 10:45:55 +01:00			`<meta name="title" content={title ?? typebotName} />`
🦴 Add viewer backbone 2021-12-23 16:31:56 +01:00			`<meta`
			`name="description"`
			`content={`
			`description ??`
			`'Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form.'`
			`}`
			`/>`

			`<meta property="og:type" content="website" />`
			`<meta property="og:url" content={url ?? 'https://bot.typebot.io'} />`
fix(viewer): 🐛 Custom metadata in viewer 2022-02-20 10:45:55 +01:00			`<meta property="og:title" content={title ?? typebotName} />`
			`<meta property="og:site_name" content={title ?? typebotName} />`
🦴 Add viewer backbone 2021-12-23 16:31:56 +01:00			`<meta`
			`property="og:description"`
			`content={`
			`description ??`
			`'Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form.'`
			`}`
			`/>`
			`<meta`
			`property="og:image"`
			`itemProp="image"`
fix(viewer): 🐛 Custom metadata in viewer 2022-02-20 10:45:55 +01:00			`content={imageUrl ?? 'https://bot.typebot.io/site-preview.png'}`
🦴 Add viewer backbone 2021-12-23 16:31:56 +01:00			`/>`

			`<meta property="twitter:card" content="summary_large_image" />`
			`<meta property="twitter:url" content={url ?? 'https://bot.typebot.io'} />`
fix(viewer): 🐛 Custom metadata in viewer 2022-02-20 10:45:55 +01:00			`<meta property="twitter:title" content={title ?? typebotName} />`
🦴 Add viewer backbone 2021-12-23 16:31:56 +01:00			`<meta`
			`property="twitter:description"`
			`content={`
			`description ??`
			`'Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form.'`
			`}`
			`/>`
			`<meta`
			`property="twitter:image"`
fix(viewer): 🐛 Custom metadata in viewer 2022-02-20 10:45:55 +01:00			`content={imageUrl ?? 'https://bot.typebot.io/site-preview.png'}`
🦴 Add viewer backbone 2021-12-23 16:31:56 +01:00			`/>`
			`</Head>`
			`)`