blsmedia/bot
2
0
Fork 0
Code Activity

docs(lp): 💄 Refont LP for v2

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-03-17 14:37:00 +01:00
parent c437211327
commit 21e926a477
131 changed files with 2834 additions and 3260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/landing-page/pages/_document.tsx
View File

@@ -1,3 +1,5 @@
import { ColorModeScript } from '@chakra-ui/react'
import { theme } from 'lib/chakraTheme'
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
@@ -12,6 +14,7 @@ class MyDocument extends Document {
/>
</Head>
<body>
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
<Main />
<NextScript />
</body>

202
apps/landing-page/pages/blog/[slug].tsx
View File

@@ -1,202 +0,0 @@
import { GetStaticPropsContext } from 'next'
import { NotionBlock, NotionText } from 'notion-blocks-chakra-ui'
import React from 'react'
import { getPage, getBlocks, getFullDatabase } from '../../lib/notion'
import Image from 'next/image'
import {
Stack,
Container,
Button,
VStack,
Heading,
HStack,
Text,
} from '@chakra-ui/react'
import {
Page,
Block,
TitlePropertyValue,
RichTextPropertyValue,
CheckboxPropertyValue,
} from '@notionhq/client/build/src/api-types'
import { Footer } from 'components/common/Footer'
import { Navbar } from 'components/common/Navbar/Navbar'
import { NextChakraLink } from 'components/common/nextChakraAdapters/NextChakraLink'
import { SocialMetaTags } from 'components/common/SocialMetaTags'
export default function Post({
page,
blocks,
}: {
page: Page
blocks: Block[]
}) {
return (
<>
<Stack
alignItems="center"
w="full"
overflowX="hidden"
pb={20}
minH="calc(100vh - 267px)"
spacing={10}
>
{page && (
<SocialMetaTags
title={
(page.properties.Name as TitlePropertyValue).title[0]?.plain_text
}
description={
(page.properties.Description as RichTextPropertyValue)
.rich_text[0]?.plain_text
}
currentUrl={`https://www.typebot.io/blog/${
(page.properties.Slug as RichTextPropertyValue).rich_text[0]
?.plain_text
}`}
imagePreviewUrl={
(page.properties.Thumbnail as RichTextPropertyValue).rich_text[0]
?.plain_text
}
/>
)}
<Navbar />
<Container as="article" maxW="900px">
{((page?.properties?.Published as CheckboxPropertyValue | undefined)
?.checkbox ||
!page) && (
<Button
as={NextChakraLink}
href="/blog"
colorScheme="gray"
variant="outline"
size="sm"
>
{'<'} Blog
</Button>
)}
{page ? (
<>
<VStack>
<Heading as="h1" fontSize="5xl" textAlign="center" mt={6}>
<NotionText
text={(page.properties.Name as TitlePropertyValue).title}
/>
</Heading>
<Heading
fontSize="md"
fontWeight="normal"
textAlign="center"
textColor="gray.500"
>
<NotionText
text={
(page.properties.Description as RichTextPropertyValue)
.rich_text
}
/>
</Heading>
{(page.properties.Author as RichTextPropertyValue | undefined)
?.rich_text[0]?.plain_text && (
<Author
author={
(page.properties.Author as RichTextPropertyValue)
.rich_text[0]?.plain_text
}
/>
)}
</VStack>
<Stack mt={6} spacing={4} maxW="700px" mx="auto">
{blocks.map((block) => (
<NotionBlock key={block.id} block={block} />
))}
</Stack>
</>
) : (
<Text textAlign="center">Blog post not found</Text>
)}
</Container>
</Stack>
<Footer />
</>
)
}
export const getStaticPaths = async () => {
if (!process.env.NOTION_DATABASE_ID)
throw new Error("Couldn't find NOTION_DATABASE_ID")
const database = await getFullDatabase(process.env.NOTION_DATABASE_ID)
return {
paths: database.filter(pageWithSlugAndId).map((page) => ({
params: {
slug: (page.properties.Slug as RichTextPropertyValue).rich_text[0]
.plain_text,
id: page.id,
},
})),
fallback: true,
}
}
const pageWithSlugAndId = (page: Page) =>
(page.properties.Slug as RichTextPropertyValue).rich_text[0]?.plain_text &&
page.id
const Author = ({ author }: { author: string }) => {
return (
<HStack>
<Image
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
src={/\(([^)]+)\)/.exec(author)![0].slice(1, -1)}
width="30px"
height="30px"
className="rounded-full"
alt="Author's picture"
/>
<Text>{author.split(' (')[0]}</Text>
</HStack>
)
}
export const getStaticProps = async (
context: GetStaticPropsContext<{ slug: string; locale: 'fr' | 'en' }>
) => {
if (!process.env.NOTION_DATABASE_ID)
throw new Error("Couldn't find NOTION_DATABASE_ID")
if (!context.params) throw new Error("Couldn't find params")
const { slug } = context.params
const page = await getPage(process.env.NOTION_DATABASE_ID, slug)
if (!page?.id) return
const blocks = await getBlocks(page?.id)
const childBlocks = await Promise.all(
blocks
.filter((block) => block.has_children)
.map(async (block) => {
return {
id: block.id,
children: await getBlocks(block.id),
}
})
)
const blocksWithChildren = blocks.map((block) => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
if (block.has_children && !block[block.type].children) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
block[block.type]['children'] = childBlocks.find(
(x) => x.id === block.id
)?.children
}
return block
})
return {
props: {
page,
blocks: blocksWithChildren,
},
revalidate: 1,
}
}

155
apps/landing-page/pages/blog/index.tsx
View File

@@ -1,155 +0,0 @@
import React from 'react'
import {
Box,
Heading,
Image,
Text,
Container,
VStack,
SimpleGrid,
Flex,
} from '@chakra-ui/react'
import { getDatabase } from '../../lib/notion'
import {
DatePropertyValue,
Page,
RichText,
RichTextPropertyValue,
TitlePropertyValue,
} from '@notionhq/client/build/src/api-types'
import { NotionText } from 'notion-blocks-chakra-ui'
import { Footer } from 'components/common/Footer'
import { Navbar } from 'components/common/Navbar/Navbar'
import { NextChakraLink } from 'components/common/nextChakraAdapters/NextChakraLink'
import { SocialMetaTags } from 'components/common/SocialMetaTags'
const ArticleList = ({ posts }: { posts: Page[] }) => {
return (
<>
<Flex
alignItems="center"
justifyContent="space-between"
w="full"
flexDir="column"
>
<SocialMetaTags
title="Blog"
description="Keep up to date with the latest news related to Typebot. Learn
about conversationnal forms and how to convert more."
currentUrl={`https://www.typebot.io/blog`}
imagePreviewUrl={`https://www.typebot.io/images/previews/blog.png`}
/>
<Navbar />
<VStack maxW="1200px" mt={20} pb={56}>
<VStack maxW="700px">
<Heading as="h1" fontSize="5xl">
Blog
</Heading>
<Heading
fontSize="md"
fontWeight="normal"
textAlign="center"
textColor="gray.500"
>
Keep up to date with the latest news related to Typebot. Learn
about conversationnal forms and how to convert more.
</Heading>
</VStack>
<Container maxW="1200px">
<SimpleGrid columns={[1, 2, 3]} mt={6} py={4} spacing={10}>
{posts.map((post) => (
<BlogPost
key={post.id}
slug={`/${
(post.properties.Slug as RichTextPropertyValue).rich_text[0]
?.plain_text
}`}
title={
(post.properties.Name as TitlePropertyValue).title[0]
?.plain_text
}
description={
(post.properties.Description as RichTextPropertyValue)
.rich_text
}
imageSrc={
(post.properties.Thumbnail as RichTextPropertyValue)
.rich_text[0]?.plain_text
}
date={
new Date(
(post.properties.Created as DatePropertyValue)?.date
?.start ?? ''
)
}
/>
))}
</SimpleGrid>
</Container>
</VStack>
</Flex>
<Footer />
</>
)
}
type BlogPostProps = {
slug: string
title: string
description: RichText[]
imageSrc: string
date: Date
}
const BlogPost = ({
slug,
title,
description,
imageSrc,
date,
}: BlogPostProps) => (
<NextChakraLink
href={'/blog' + slug}
w="100%"
shadow="lg"
p={4}
rounded="lg"
_hover={{ textDecoration: 'none' }}
>
<Box borderRadius="lg" overflow="hidden">
<Image
transform="scale(1.0)"
src={imageSrc}
objectFit="contain"
width="100%"
transition="0.3s ease-in-out"
_hover={{
transform: 'scale(1.05)',
}}
alt="title thumbnail"
/>
</Box>
<Heading fontSize="xl" marginTop="4">
{title}
</Heading>
<NotionText text={description} as="p" fontSize="md" marginTop="2" />
<Text textColor="gray.400" fontSize="sm" mt={2}>
{date.toDateString()}
</Text>
</NextChakraLink>
)
export const getStaticProps = async () => {
if (!process.env.NOTION_DATABASE_ID)
throw new Error("Couldn't find NOTION_DATABASE_ID")
const database = await getDatabase(process.env.NOTION_DATABASE_ID)
return {
props: {
posts: database,
},
revalidate: 1,
}
}
export default ArticleList

36
apps/landing-page/pages/index.tsx
View File

@@ -1,5 +1,37 @@
import Homepage from '../layouts/Homepage'
import { Stack } from '@chakra-ui/react'
import { Footer } from 'components/common/Footer'
import { SocialMetaTags } from 'components/common/SocialMetaTags'
import { EasyBuildingExperience } from 'components/Homepage/EasyBuildingExperience'
import { EasyEmbed } from 'components/Homepage/EasyEmbed'
import { EndCta } from 'components/Homepage/EndCta'
import { Features } from 'components/Homepage/Features'
import { Hero } from 'components/Homepage/Hero'
import { Integrations } from 'components/Homepage/Integrations'
import { IntroducingChatApps } from 'components/Homepage/IntroducingChatApps'
import { RealTimeResults } from 'components/Homepage/RealTimeResults'
import { Testimonials } from 'components/Homepage/Testimonials'
const App = Homepage
const App = () => {
return (
<Stack w="full" overflowX="hidden" bgColor="gray.900">
<SocialMetaTags
title="Typebot: Conversational Form Builder"
description="Convert 4x more with beautiful conversational forms. Embed them directly in your applications without a line of code."
currentUrl={`https://www.typebot.io/`}
imagePreviewUrl={`https://www.typebot.io/images/previews/home.png`}
/>
<Hero />
<IntroducingChatApps />
<EasyBuildingExperience />
<EasyEmbed />
<Integrations />
<RealTimeResults />
<Features />
<Testimonials />
<EndCta />
<Footer />
</Stack>
)
}
export default App

16
apps/landing-page/pages/pricing/index.tsx → apps/landing-page/pages/pricing.tsx
View File

@@ -18,13 +18,13 @@ const Pricing = () => {
}, [])
return (
<Stack overflowX="hidden">
<Stack overflowX="hidden" bgColor="gray.900">
<Flex
pos="relative"
flexDir="column"
bgColor="blue.500"
minHeight="100vh"
alignItems="center"
bgGradient="linear(to-b, gray.900, gray.800)"
pb={40}
>
<SocialMetaTags
@@ -70,9 +70,9 @@ const Pricing = () => {
features: [
'Unlimited typebots',
'Unlimited responses',
'Conditional branching and computations',
'Custom JS / CSS',
'Native integrations (Google Sheets, Webhooks, Zapier...)',
'Basic analytics (sessions, time, completion...)',
'Basic analytics (Sessions, time, completion...)',
],
}}
button={
@@ -96,16 +96,18 @@ const Pricing = () => {
'Custom domains',
'Organize typebots in folders',
'Unlimited uploads',
'Custom Google Analytics events',
],
}}
beforeButtonLabel={"The only form builder you'll need"}
borderWidth="3px"
borderColor="orange.200"
button={
<NextChakraLink
href="https://app.typebot.io/register?subscribe=true"
_hover={{ textDecor: 'none' }}
>
<ActionButton>Subscribe now</ActionButton>
<ActionButton colorScheme="orange">
Subscribe now
</ActionButton>
</NextChakraLink>
}
/>

300
apps/landing-page/pages/vs-landbot.tsx
View File

@@ -1,300 +0,0 @@
import React, { useEffect } from 'react'
import {
Heading,
VStack,
Stack,
Text,
Table,
Thead,
Tbody,
Tr,
Td,
Th,
Box,
Flex,
} from '@chakra-ui/react'
import loadLandbot from '../lib/landbot'
import Image from 'next/image'
import { initContainer } from 'typebot-js'
import { ArticleCallToAction } from 'components/common/ArticleCta'
import { Footer } from 'components/common/Footer'
import { Navbar } from 'components/common/Navbar/Navbar'
import { NextChakraLink } from 'components/common/nextChakraAdapters/NextChakraLink'
import { SocialMetaTags } from 'components/common/SocialMetaTags'
import { Yes, No } from 'components/common/TableCells'
import landbotVisualFlowSrc from 'public/images/landbot/visual-flow.png'
// eslint-disable-next-line @typescript-eslint/no-explicit-any
declare const Landbot: any
const VsTypebot = () => {
useEffect(() => {
loadLandbot().then(() => {
new Landbot.Container({
container: '#myLandbot',
configUrl:
'https://chats.landbot.io/v3/H-937813-ZLZEY720UH1TWN5S/index.json',
})
})
initContainer('typebot-container', {
publishId: 'request-class',
})
}, [])
return (
<>
<Stack
alignItems="center"
justifyContent="space-between"
w="full"
overflowX="hidden"
mb="20"
>
<SocialMetaTags
title="Typebot vs Landbot"
description="Get to know the main differences between Typebot and Landbot"
currentUrl={`https://www.typebot.io/vs-landbot`}
imagePreviewUrl={`https://www.typebot.io/vs-landbot`}
/>
<Navbar />
<VStack maxW="1200px" py={20} spacing={10} w="full">
<Heading as="h1" fontSize={['3xl', '5xl']} textAlign="center">
What makes Typebot a great Landbot alternative?
</Heading>
<Stack maxW="700px" spacing={6} textAlign="justify" w="full" px={4}>
<Text>
Both Landbot and Typebot offer the same output: beautiful
conversational forms. But Landbot is in fact a tool focused on
delivering customer service through chatbots while Typebot is
focused on getting the most out of forms.
</Text>
<Heading>User experience</Heading>
<Text>
Here is an example of the same form created with both tools:
</Text>
<Heading size="md" as="h3">
Landbot:
</Heading>
<div id="myLandbot" style={{ width: '100%', height: '500px' }} />
<Heading size="md" as="h3">
Typebot:
</Heading>
<div
id="typebot-container"
style={{ width: '100%', height: '500px' }}
/>
<Heading>Building experience</Heading>
<Text>
Landbot offers a &quot;visual flow&quot; building experience.
While it makes conditional logic more understandable. I think
it&apos;s hard to understand how the final result will look like
at a glance:
</Text>
<Box h="400px" pos="relative">
<Image
src={landbotVisualFlowSrc}
layout="fill"
objectFit="contain"
alt="Visual flow screenshot"
/>
</Box>
<Text>
The idea behind Typebot building experience is that you directly
modify the final result and you click on elements you want to
edit. Typebot also offer a &quot;visual flow&quot; building
experience when you start adding doing conditional logic
</Text>
<Heading>Pricing</Heading>
<Text>
Landbot offers a Free plan that isn&apos;t very generous as you
won&apos;t have access to advanced useful features and you will be
limited to 30 chats per month. You won&apos;t really know if your
forms are performing well with only 30 responses per month.
You&apos;ll be obligated to upgrade to at least their
&quot;PROFESSIONAL&quot; plan that offers up to 1,000 responses
for $95/month.
</Text>
<Text>
Landbot offers a human take-over feature that won&apos;t be
developed into Typebot. It won&apos;t be a live chat product
because Typebot is designed for marketers, not customer support
like Landbot. Typebot&apos;s main focus is to help marketers get
the most out of their online forms with exclusive features.
</Text>
<Text>
Landbot also offers Facebook and Whatsapp integrations. Typebot
has planned these integrations but it will be focused on helping
marketers distribute forms through Facebook and WhatsApp instead
of a focus on delivering customer service.
</Text>
<Heading as="h3" size="md">
Free plan comparison
</Heading>
<Flex overflowY="scroll">
<Table variant="simple">
<Thead>
<Tr>
<Th />
<Th>Typebot (Free plan)</Th>
<Th>Landbot (Free plan)</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>Unlimited forms</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Unlimited conversations</Td>
<Yes />
<No>(30 / month)</No>
</Tr>
<Tr>
<Td>Zapier integration</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Slack integration</Td>
<No>Zapier, Integromat</No>
<Yes />
</Tr>
<Tr>
<Td>Sendgrid integration</Td>
<No>Zapier, Integromat</No>
<Yes />
</Tr>
<Tr>
<Td>Stripe integration</Td>
<Yes />
<No>starts at $35</No>
</Tr>
<Tr>
<Td>Google Sheets integration</Td>
<Yes />
<No>starts at $90</No>
</Tr>
<Tr>
<Td>Human take over</Td>
<No />
<Yes />
</Tr>
<Tr>
<Td>Priority Support</Td>
<Yes />
<No>(only enterprise)</No>
</Tr>
<Tr>
<Td>Webhooks</Td>
<Yes />
<No>starts at $95</No>
</Tr>
<Tr>
<Td>Hidden fields</Td>
<Yes />
<No>starts at $35</No>
</Tr>
<Tr>
<Td>Conditional logic</Td>
<Yes />
<No>starts at $35</No>
</Tr>
<Tr>
<Td>Formulas</Td>
<Yes />
<No>starts at $95</No>
</Tr>
<Tr>
<Td>Custom error messages</Td>
<Yes />
<No>starts at $35</No>
</Tr>
<Tr>
<Td>Custom typing emulation</Td>
<Yes />
<No>starts at $35</No>
</Tr>
</Tbody>
</Table>
</Flex>
<Heading as="h3" size="md">
Paid plan comparison
</Heading>
<Flex overflowY="scroll">
<Table variant="simple">
<Thead>
<Tr>
<Th />
<Th>Typebot Pro ($30/month)</Th>
<Th>Landbot ($35+/month)</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>Access to incomplete submissions</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Remove branding</Td>
<Yes />
<Yes>$95/month</Yes>
</Tr>
<Tr>
<Td>Custom domain</Td>
<Yes />
<No />
</Tr>
<Tr>
<Td>Facebook messenger</Td>
<No />
<Yes />
</Tr>
<Tr>
<Td>Whatsapp</Td>
<No />
<Yes>$95+/month</Yes>
</Tr>
<Tr>
<Td>In-depth analytics</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Google analytics events</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Team collaboration</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Organize forms in folders</Td>
<Yes />
<No />
</Tr>
</Tbody>
</Table>
</Flex>
<Text>
Landbot offers other very cool features.{' '}
<NextChakraLink
href="https://landbot.io/pricing"
color="blue.400"
>
Here is an exhausting list.
</NextChakraLink>
</Text>
</Stack>
</VStack>
<ArticleCallToAction />
</Stack>
<Footer />
</>
)
}
export default VsTypebot

254
apps/landing-page/pages/vs-tally.tsx
View File

@@ -1,254 +0,0 @@
import React, { useEffect } from 'react'
import {
Heading,
VStack,
Stack,
Text,
Table,
Thead,
Tbody,
Tr,
Td,
Th,
Flex,
} from '@chakra-ui/react'
import { initContainer } from 'typebot-js'
import { ArticleCallToAction } from 'components/common/ArticleCta'
import { roadmapLink, Footer } from 'components/common/Footer'
import { Navbar } from 'components/common/Navbar/Navbar'
import { NextChakraLink } from 'components/common/nextChakraAdapters/NextChakraLink'
import { SocialMetaTags } from 'components/common/SocialMetaTags'
import { Yes, No } from 'components/common/TableCells'
const VsTypebot = () => {
useEffect(() => {
initContainer('typebot-container', {
publishId: 'request-class',
})
}, [])
return (
<>
<Stack
alignItems="center"
justifyContent="space-between"
w="full"
overflowX="hidden"
mb="20"
>
<SocialMetaTags
title="Tally vs Typebot"
description="Get to know the main differences between Typebot and Tally"
currentUrl={`https://www.typebot.io/vs-typeform`}
imagePreviewUrl={`https://www.typebot.io/vs-typeform`}
/>
<Navbar />
<VStack maxW="1200px" py={20} spacing={10} w="full">
<Heading as="h1" fontSize={['3xl', '5xl']} textAlign="center">
What makes Typebot a great Tally alternative?
</Heading>
<Stack maxW="700px" spacing={6} textAlign="justify" w="full" px={4}>
<Text>
Tally user experience is quite unique and is similar to Notion. I
love the simplicity of its building experience. Tally and Typebot
seem to have the same vision for the building experience: what you
edit is the final result. They also offer similar generous pricing
where the majority of the features are available for free.
</Text>
<Text>
But these tools differ in the end-user experience: Tally offers
one-page or multi-step forms whereas Typebot offers a
conversational experience. Let&apos;s take a look at it:
</Text>
<Heading>User experience</Heading>
<Text>
Here is an example of the same form created with both tools:
</Text>
<Heading size="md" as="h3">
Tally:
</Heading>
<div
className="typeform-widget"
data-url="https://form.typeform.com/to/mKiSR43i?typeform-medium=embed-snippet"
style={{ width: '100%', height: '500px' }}
>
<iframe
src="https://tally.so/embed/nP9Gbm?hideTitle=1&alignLeft=1"
width="100%"
height="100%"
title="Request a class"
/>
</div>
<Heading size="md" as="h3">
Typebot:
</Heading>
<div
id="typebot-container"
style={{ width: '100%', height: '500px' }}
/>
<Heading>Conversion increased</Heading>
<Text>
I built Typebot because I know conversational experience allows
you to increase your conversion rate and ultimately offer a more
comfortable experience on mobile.
</Text>
<Heading as="h3" size="md">
Chat experience is comfortable on mobile
</Heading>
<Text>
Tally looks great on mobile but it still feels like a classic form
with lots of questions you have to fill. Whereas with a
conversational experience, your mind shift and it feels like
you&apos;re talking to someone.
</Text>
<Heading>Roadmap Ceiling</Heading>
<Text>
Because Tally is offering traditional formatting of its forms,
they won&apos;t be able to implement advanced features such as
drop-off rates on a question basis. This feature (available on
Typebot) is a game-changer for marketers who need to know in
real-time how their questions perform and where users tend to quit
the form.
</Text>
<Heading>Pricing</Heading>
<Text>
Both tools offer similar pricing. Everything is unlimited and for
free. You&apos;ll need to subscribe only if you need advanced
features and remove the branding.
</Text>
<Heading as="h3" size="md">
Free plan comparison
</Heading>
<Flex overflowY="scroll">
<Table variant="simple">
<Thead>
<Tr>
<Th />
<Th>Typebot (Free plan)</Th>
<Th>Tally (Free plan)</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>Unlimited forms</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Unlimited responses</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Collect payments</Td>
<Yes />
<Yes>5% commission</Yes>
</Tr>
<Tr>
<Td>File upload</Td>
<No>
<NextChakraLink href={roadmapLink} color="blue.400">
Roadmap
</NextChakraLink>
</No>
<Yes />
</Tr>
<Tr>
<Td>Calculator</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Hidden fields</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Zapier</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Integromat</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Google Sheets</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Redirect</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Custom subdomain</Td>
<Yes />
<No />
</Tr>
</Tbody>
</Table>
</Flex>
<Heading as="h3" size="md">
Paid plan comparison
</Heading>
<Flex overflowY="scroll">
<Table variant="simple">
<Thead>
<Tr>
<Th />
<Th>Typebot Pro ($30/month)</Th>
<Th>Tally ($29/month)</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>Collaboration</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Remove branding</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Custom domains</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Workspaces</Td>
<Yes />
<Yes />
</Tr>
<Tr>
<Td>Access to incomplete submissions</Td>
<Yes />
<No />
</Tr>
<Tr>
<Td>In-depth analytics</Td>
<Yes />
<No />
</Tr>
<Tr>
<Td>Google analytics events</Td>
<Yes />
<No />
</Tr>
</Tbody>
</Table>
</Flex>
</Stack>
</VStack>
<ArticleCallToAction />
</Stack>
<Footer />
</>
)
}
export default VsTypebot

449
apps/landing-page/pages/vs-typeform.tsx
View File

@@ -1,449 +0,0 @@
import React, { useEffect } from 'react'
import {
Heading,
VStack,
Stack,
Text,
Table,
Thead,
Tbody,
Tr,
Td,
Th,
Flex,
} from '@chakra-ui/react'
import { initContainer } from 'typebot-js'
import { CheckIcon } from 'assets/icons/CheckIcon'
import { CloseIcon } from 'assets/icons/CloseIcon'
import { ArticleCallToAction } from 'components/common/ArticleCta'
import { Footer } from 'components/common/Footer'
import { Navbar } from 'components/common/Navbar/Navbar'
import { SocialMetaTags } from 'components/common/SocialMetaTags'
import { Yes, No } from 'components/common/TableCells'
import loadTypeform from 'lib/typeform'
const VsTypebot = () => {
useEffect(() => {
loadTypeform().then()
initContainer('typebot-container', {
publishId: 'request-class',
})
}, [])
return (
<>
<Stack
alignItems="center"
justifyContent="space-between"
w="full"
overflowX="hidden"
mb="20"
>
<SocialMetaTags
title="Typebot vs Typeform"
description="Get to know the main differences between Typebot and Typeform"
currentUrl={`https://www.typebot.io/vs-typeform`}
imagePreviewUrl={`https://www.typebot.io/vs-typeform`}
/>
<Navbar />
<VStack maxW="1200px" py={20} spacing={10} w="full">
<Heading as="h1" fontSize={['3xl', '5xl']} textAlign="center">
What makes Typebot a great Typeform alternative?
</Heading>
<Stack maxW="700px" spacing={6} textAlign="justify" w="full" px={4}>
<Text>
I am a big fan of Typeform user experience. This is probably what
motivated me to create an alternative that keeps Typeform slick
design but also offers a unique conversational experience that
would make my forms convert more.
</Text>
<Text>
Along the journey, I figured that a conversational experience also
unlocks many possibilities in terms of conversion rate
optimization for marketers. That&apos;s exactly where Typebot is
headed.
</Text>
<Heading>User experience</Heading>
<Text>
Here is an example of the same form created with both tools:
</Text>
<Heading size="md" as="h3">
Typeform:
</Heading>
<div
className="typeform-widget"
data-url="https://form.typeform.com/to/mKiSR43i?typeform-medium=embed-snippet"
style={{ width: '100%', height: '500px' }}
/>
<Heading size="md" as="h3">
Typebot:
</Heading>
<div
id="typebot-container"
style={{ width: '100%', height: '500px' }}
/>
<Heading>Conversion increased</Heading>
<Text>
Typebot&apos;s users report a better conversion rate compared to
Typeform forms. All of this is thanks to a conversation :
</Text>
<Heading as="h3" size="md">
Collect real-time results
</Heading>
<Text>
With a Typeform, you collect the answer only when your user clicks
on the &quot;Submit&quot; button located at end of the form. If
your users are leaving the form at a specific question, you
won&apos;t even know this. With Typebot, if a user answers only
one question, you will still collect the answer and will never
lose any valuable information.
</Text>
<Text>
What&apos;s the powerful math behind this feature? Imagine 300
users are interacting with your form but only 100 of them fully
completed it. With Typebot, you&apos;ll still see responses from
300 users while with Typeform, you&apos;ll only see responses from
the 100 people that clicked on &quot;submit&quot;.
</Text>
<Heading as="h3" size="md">
Chat experience is comfortable on mobile
</Heading>
<Text>
Typeform is responsive and looks good on mobile but it still feels
like a form you need to fill. Whereas with a conversational
experience, your mind shift and it feels like you&apos;re talking
to someone.
</Text>
<Heading>Pricing</Heading>
<Text>
Typeform recently changed its pricing and now offers a Free plan
that includes meaningful features without limits (logic jumps,
ending screens, and the number of typeforms you can create). But
they instead limited the number of responses you can collect per
month to only 10 and the questions per typeform to 10 as well.
</Text>
<Text>
The problem with these limitations is that you won&apos;t know if
your forms are actually performing well with only 10 responses per
month. You&apos;ll be obligated to upgrade to at least their
&quot;Plus&quot; plan that offers up to 1,000 responses for
$55/month
</Text>
<Heading as="h3" size="md">
Free plan comparison
</Heading>
<Flex overflowY="scroll">
<Table variant="simple">
<Thead>
<Tr>
<Th />
<Th>Typebot (Free plan)</Th>
<Th>Typeform (Free plan)</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>Unlimited forms</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
</Tr>
<Tr>
<Td>Unlimited logic</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
</Tr>
<Tr>
<Td>Unlimited responses</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td display="flex">
<CloseIcon width="25px" />
<Text ml={1} fontSize="sm">
(10 / month)
</Text>
</Td>
</Tr>
<Tr>
<Td>Unlimited questions</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td display="flex">
<CloseIcon width="25px" />
<Text ml={1} fontSize="sm">
(10 / form)
</Text>
</Td>
</Tr>
<Tr>
<Td>Hidden fields</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
</Tr>
<Tr>
<Td>Calculator</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
</Tr>
<Tr>
<Td>Templates</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
</Tr>
<Tr>
<Td>Download your data</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
</Tr>
<Tr>
<Td>Native integrations</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
</Tr>
<Tr>
<Td>Collect payments</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td display="flex">
<CloseIcon width="25px" />
<Text ml={1} fontSize="sm">
(starts at $30)
</Text>
</Td>
</Tr>
<Tr>
<Td>Redirect</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td display="flex">
<CloseIcon width="25px" />
<Text ml={1} fontSize="sm">
(starts at $60)
</Text>
</Td>
</Tr>
<Tr>
<Td>File upload</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td display="flex">
<CloseIcon width="25px" />
<Text ml={1} fontSize="sm">
(starts at $30)
</Text>
</Td>
</Tr>
<Tr>
<Td>Webhooks</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td display="flex">
<CloseIcon width="25px" />
<Text ml={1} fontSize="sm">
(starts at $30)
</Text>
</Td>
</Tr>
<Tr>
<Td>Custom link preview</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td display="flex">
<CloseIcon width="25px" />
<Text ml={1} fontSize="sm">
(starts at $30)
</Text>
</Td>
</Tr>
<Tr>
<Td>Custom subdomain</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td display="flex">
<CloseIcon width="25px" />
<Text ml={1} fontSize="sm">
(starts at $50)
</Text>
</Td>
</Tr>
<Tr>
<Td>Google analytics integration</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td display="flex">
<CloseIcon width="25px" />
<Text ml={1} fontSize="sm">
(starts at $108)
</Text>
</Td>
</Tr>
<Tr>
<Td>Facebook pixel</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td display="flex">
<CloseIcon width="25px" />
<Text ml={1} fontSize="sm">
(starts at $108)
</Text>
</Td>
</Tr>
<Tr>
<Td>Google Tag Manager</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td display="flex">
<CloseIcon width="25px" />
<Text ml={1} fontSize="sm">
(starts at $108)
</Text>
</Td>
</Tr>
<Tr>
<Td>Priority support</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td display="flex">
<CloseIcon width="25px" />
<Text ml={1} fontSize="sm">
(starts at $108)
</Text>
</Td>
</Tr>
</Tbody>
</Table>
</Flex>
<Heading as="h3" size="md">
Paid plan comparison
</Heading>
<Flex overflowY="scroll">
<Table variant="simple">
<Thead>
<Tr>
<Th />
<Th>Typebot Pro ($30/month)</Th>
<Th>Typeform ($30+/month)</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>Access to incomplete submissions</Td>
<Yes />
<No />
</Tr>
<Tr>
<Td>Remove branding</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td>$66/month</Td>
</Tr>
<Tr>
<Td>Unlimited file upload</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td>$108/month (4GB)</Td>
</Tr>
<Tr>
<Td>Team collaboration</Td>
<Td display="flex">
<CheckIcon fill="#0042da" width="25px" />
<Text ml="1" fontSize="sm">
(unlimited)
</Text>
</Td>
<Td>$66 for 3 users</Td>
</Tr>
<Tr>
<Td>Custom domains</Td>
<Td>
<CheckIcon fill="#0042da" width="25px" />
</Td>
<Td>
<CloseIcon width="25px" />
</Td>
</Tr>
<Tr>
<Td>Salesforce integration</Td>
<Td>
<CloseIcon width="25px" />
</Td>
<Td>$108/month</Td>
</Tr>
<Tr>
<Td>Schedule a close date</Td>
<Td>
<CloseIcon width="25px" />
</Td>
<Td>$108/month</Td>
</Tr>
<Tr>
<Td>Drop-off rates</Td>
<Yes />
<Td>$108/month</Td>
</Tr>
<Tr>
<Td>Google analytics events</Td>
<Yes />
<No />
</Tr>
<Tr>
<Td>Organize forms in folders</Td>
<Yes />
<No />
</Tr>
</Tbody>
</Table>
</Flex>
</Stack>
</VStack>
<ArticleCallToAction />
</Stack>
<Footer />
</>
)
}
export default VsTypebot