chore(lp): 📦️ Import existing Landing page
This commit is contained in:
Baptiste Arnaud
299
apps/landing-page/pages/vs-landbot.tsx
Normal file
299
apps/landing-page/pages/vs-landbot.tsx
Normal file
@ -0,0 +1,299 @@
|
||||
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 Typebot 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'
|
||||
|
||||
// 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',
|
||||
})
|
||||
})
|
||||
Typebot.initContainer('typebot-container', {
|
||||
publishId: 'example-vs-other-tools',
|
||||
})
|
||||
}, [])
|
||||
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 "visual flow" building experience.
|
||||
While it makes conditional logic more understandable. I think
|
||||
it'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 "visual flow" building
|
||||
experience when you start adding doing conditional logic
|
||||
</Text>
|
||||
<Heading>Pricing</Heading>
|
||||
<Text>
|
||||
Landbot offers a Free plan that isn't very generous as you
|
||||
won't have access to advanced useful features and you will be
|
||||
limited to 30 chats per month. You won't really know if your
|
||||
forms are performing well with only 30 responses per month.
|
||||
You'll be obligated to upgrade to at least their
|
||||
"PROFESSIONAL" plan that offers up to 1,000 responses
|
||||
for $95/month.
|
||||
</Text>
|
||||
<Text>
|
||||
Landbot offers a human take-over feature that won't be
|
||||
developed into Typebot. It won't be a live chat product
|
||||
because Typebot is designed for marketers, not customer support
|
||||
like Landbot. Typebot'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
|
||||
Reference in New Issue
Block a user