📝 Add "Lead Generation Guide" article (#1465)

Co-authored-by: Baptiste Arnaud <baptiste.arnaud95@gmail.com>

apps/docs/contribute/guides/blog.mdx

@@ -37,12 +37,12 @@ summary: 'A short summary of the blog post.'
 
 By default the og image is generated from the title of the blog post. If you want to use a custom og image, you can specify a `image` field in the frontmatter.
 
-All images need to be placed under the `public/images/blog/<POST_FILENAME>` folder where `<POST_FILENAME>` is the name of the mdx file you are creating/editing. The image file name should be in lowercase and separated by `-`.
+All images need to be placed under the `public/images/blog/<POST_FILENAME>` folder where `<POST_FILENAME>` is the name of the mdx file you are creating/editing. The image file name should be in lowercase and separated by `-`. It is best if the image width is no more than 800px.
 
 Here are all the components you can use in your blog post:
 
 - `Image`: To display an image. `width` and `height` props are required and must match the actual size of the image. Example: `<Image src="/images/blog/my-awesome-blog-post/image.jpg" alt="My awesome image" width={800} height={600} />`
-- `Callout`: To display a callout. Example: `<Callout status="info">This is an info callout</Callout>`. You can provide a `status` prop with the value `info`, `warning`, `success`, or `error`.
+- `Callout`: To display a callout. Example: `<Callout status="info" title="Takeaway">This is an info callout</Callout>`. You can provide a `status` prop with the value `info`, `warning`, `success`, or `error`. You can also pass an optional `title` prop.
 - `Tweet`: To embed a tweet. Example: `<Tweet id="1234567890123456789" />`
 - `Typebot`: To embed a typebot as a Standard component. Example: `<Typebot typebot="<YOUR_BOT_PUBLIC_ID>" />`. You can provide the same props as the [Standard component](../../deploy/web/libraries/react#standard).
 - `YouTube`: To embed a YouTube video. Example: `<YouTube id="<YOUTUBE_VIDEO_ID>" />`

apps/landing-page/app/blog/[slug]/Post.tsx

@@ -2,7 +2,14 @@
 'use client'
 
 import { Link } from '@chakra-ui/next-js'
-import { Alert, AlertIcon, Heading, Stack, Text } from '@chakra-ui/react'
+import {
+  Alert,
+  AlertIcon,
+  AlertTitle,
+  Heading,
+  Stack,
+  Text,
+} from '@chakra-ui/react'
 import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
 import { highlight } from 'sugar-high'
 import { Tweet } from './Tweet'
@@ -21,7 +28,7 @@ type Props = {
 
 export const Post = ({ metadata, mdxSource }: Props) => (
   <Stack spacing={10} my="20" w="full">
-    <Stack mx="auto" w="full" maxW={['full', '46rem']} px={3}>
+    <Stack mx="auto" w="full" maxW={['full', '46rem']} px={[3, 3, 0]}>
       <Heading>{metadata.title}</Heading>
       <Text>{formatDate(metadata.publishedAt)}</Text>
     </Stack>
@@ -37,11 +44,11 @@ export const Post = ({ metadata, mdxSource }: Props) => (
         {...mdxSource}
         components={{
           h1: (props) => <Heading as="h1" {...props} />,
-          h2: (props) => <Heading as="h2" {...props} />,
-          h3: (props) => <Heading as="h3" {...props} />,
-          h4: (props) => <Heading as="h4" {...props} />,
-          h5: (props) => <Heading as="h5" {...props} />,
-          h6: (props) => <Heading as="h6" {...props} />,
+          h2: (props) => <Heading as="h2" fontSize="3xl" {...props} />,
+          h3: (props) => <Heading as="h3" fontSize="2xl" {...props} />,
+          h4: (props) => <Heading as="h4" fontSize="xl" {...props} />,
+          h5: (props) => <Heading as="h5" fontSize="lg" {...props} />,
+          h6: (props) => <Heading as="h6" fontSize="md" {...props} />,
           code: ({ children, ...props }) => {
             const codeHTML = highlight(children?.toString() ?? '')
             return (
@@ -53,14 +60,25 @@ export const Post = ({ metadata, mdxSource }: Props) => (
           Image: (props) => (
             <Image {...props} style={{ borderRadius: '.5rem' }} />
           ),
-          Callout: ({ children, ...props }) => (
+          Callout: ({ children, title, ...props }) => (
             <Alert rounded="md" {...props}>
               <AlertIcon />
+              {title ? <AlertTitle>{title}</AlertTitle> : null}
               {children}
             </Alert>
           ),
           Tweet,
-          Typebot: Standard,
+          Typebot: (props) => (
+            <Standard
+              {...props}
+              typebot={props.typebot}
+              style={{
+                borderRadius: '0.375rem',
+                borderWidth: '1px',
+                height: '533px',
+              }}
+            />
+          ),
           Youtube: ({ id }: { id: string }) => (
             <div className="w-full">
               <div

apps/landing-page/components/Homepage/EndCta.tsx

@@ -17,7 +17,7 @@ type Props = {
   polygonsBaseTop?: string
 } & StackProps
 
-export const EndCta = (props: Props) => {
+export const EndCta = ({ heading, polygonsBaseTop, ...props }: Props) => {
   return (
     <VStack
       as="section"
@@ -28,7 +28,7 @@ export const EndCta = (props: Props) => {
       justifyContent="center"
       {...props}
     >
-      <BackgroundPolygons baseTop={props.polygonsBaseTop} />
+      <BackgroundPolygons baseTop={polygonsBaseTop} />
       <VStack
         spacing="6"
         maxW="3xl"
@@ -37,13 +37,13 @@ export const EndCta = (props: Props) => {
         py={{ base: '16', sm: '20' }}
         textAlign="center"
       >
-        {props.heading ? (
+        {heading ? (
           <Heading
             fontWeight="extrabold"
             letterSpacing="tight"
             data-aos="fade-up"
           >
-            {props.heading}
+            {heading}
           </Heading>
         ) : null}
         <Flex>

apps/landing-page/content/lead-generation-chatbot.mdx

@@ -0,0 +1,233 @@
+---
+title: 'Lead Generation Chatbot: The Ultimate Guide to Boosting Your Sales'
+summary: 'Discover how lead generation chatbots can revolutionize your business. Boost engagement, conversions, and sales with AI-powered chatbots. Learn best practices and see examples from top companies.'
+publishedAt: '2024-04-22'
+---
+
+**Lead generation chatbots** have become an essential tool for businesses looking to boost their sales efforts. Imagine having a highly efficient team member who is available around the clock. This team member is ready to engage with potential customers and guide them through the sales funnel.
+
+<Callout status="info" title="Takeaways">
+
+1. Lead generation chatbots are powerful tools for businesses, providing personalized and engaging interactions with potential customers, thereby increasing engagement and conversion rates.
+2. It's crucial to optimize the performance of chatbots by monitoring and analyzing conversations, testing different approaches, and collecting feedback from users.
+3. AI advancements enable chatbots to provide more human-like interactions, understand context in user queries, effectively qualify leads, and support multiple languages, therefore enhancing the lead generation process.
+
+</Callout>
+
+## Why Lead Generation Chatbots are Great for Your Business
+
+**Lead-generation chatbots** are AI-powered tools designed to automate interactions between your business and potential customers. These chatbots do more than just collect information. They engage users in a conversation, making the experience both personal and engaging. This mix of automation and personalization keeps potential customers interested and greatly reduces the chance of them leaving your site without taking action.
+
+<Typebot typebot="lead-generation-0rbhgp3" />
+
+Lead generation chatbots are revolutionizing how businesses connect with potential customers online. They are not just futuristic gadgets but current solutions to many marketing and sales challenges. Let's look into the reasons **why lead generation chatbots are beneficial** for your business.
+
+### Tailored Experiences
+
+At their heart, chatbots can offer **customized interactions**. They adapt their responses based on how a user interacts. This leads to a more relevant and personal journey for each customer. Such personalization makes customers feel valued and understood, increasing the chance of a sale.
+
+### Increased Engagement
+
+Businesses are no longer confined to traditional office hours thanks to chatbots. They ensure your brand engages with potential leads round the clock. By starting conversations and providing immediate answers, chatbots **boost engagement rates**. Customers get timely information, and your business captures more leads.
+
+### Higher Conversion Rates
+
+Chatbots proactively engage visitors and offer instant help, guiding them towards a decision. This could be signing up for a newsletter, booking a demo, or making a purchase. **Chatbots effectively push users down the sales funnel**, increasing conversion rates. They make the next step feel easy and natural.
+
+### Convenience and Real-Time Reactions
+
+The immediate assistance chatbots provide is invaluable. They answer common questions, solve issues, and even help with bookings or purchases. This **real-time interaction** removes the wait for a response, thus lowering bounce rates and boosting customer satisfaction.
+
+### Lower Cost Per Lead and Accessibility
+
+A chatbot is an upfront investment with ongoing returns without the constant costs of human involvement. Automating the lead generation process **cuts down the cost per lead**. Plus, chatbots offer **multilingual support**, reaching a wider audience without extra cost or effort.
+
+## Step-by-Step Setup Guide Using Typebot
+
+1. **Create a New Typebot**: First, sign up and log in to Typebot. From the dashboard, create a new chatbot.
+
+<Image
+  src="/images/blog/lead-generation-chatbot/create-new-typebot.png"
+  alt="How to create a new Typebot"
+  width="2000"
+  height="1019"
+/>
+
+2. **Create a Welcome Message**: Use the Typebot builder to design your conversation
+   flow. Start with an engaging greeting to welcome users.
+
+<Image
+  src="/images/blog/lead-generation-chatbot/create-welcome-message.gif"
+  alt="How to create a welcome message in Typebot"
+  width="800"
+  height="631"
+/>
+
+3. **Ask for Email**: Craft a series of questions to capture useful information from your leads. Important among these should be asking for their email address.
+
+<Image
+  src="/images/blog/lead-generation-chatbot/ask-for-email.gif"
+  alt="How to ask for an email in Typebot"
+  width="800"
+  height="631"
+/>
+
+4. **Send to Google Sheets**: Integrate your chatbot with Google Sheets. This allows
+   the captured email addresses to be directly sent to a Google Sheet, keeping your
+   lead data current.
+
+<Image
+  src="/images/blog/lead-generation-chatbot/send-to-google-sheets.png"
+  alt="How to send a response in a Google Sheets in Typebot"
+  width="2000"
+  height="857"
+/>
+
+### Best Practices for Dialogues and Engagement Strategies
+
+- **Keep it Conversational**: Your chatbot should sound human. Use natural, easy language that engages users.
+- **Be Clear and Concise**: Don't overload users with information. Keep responses short and easy to digest.
+- **Offer Value Immediately**: Draw users in by providing value right away. This could be answering questions or highlighting benefits.
+- **Utilize Visuals**: Add visuals to the conversation when it helps. They can make interactions more lively and explain complex ideas.
+
+### Optimization Tips to Enhance Performance
+
+- **Monitor and Analyze Conversations**: Check conversations regularly to see where you can improve. Look for patterns that indicate where users get confused or disengage.
+- **A/B Test Different Approaches**: Try different conversation flows or messages to find what works best. Let the data inform your choices.
+- **Gather Feedback**: Ask users what they thought of their chatbot experience. Their feedback can reveal how to make your bot better.
+
+Start boosting your sales today by creating your own lead generation with our [chatbot builder for lead generation](https://typebot/io).
+
+## How to Use Chatbots for Lead Generation
+
+**Targeted Greetings on Different Pages.** Tailor the chatbot’s greeting based on the page a visitor is on. Matching the message to the page increases engagement and the rate of lead capture.
+
+<Image
+  src="/images/blog/lead-generation-chatbot/example-custom-chatbot.png"
+  alt="An example of chatbot customized depending on a page where the user is"
+  width="2000"
+  height="503"
+/>
+
+**Lead Magnets Through Chatbots.** Distribute valuable content like eBooks, webinars, or free trials through chatbot conversations. This method captures lead information while immediately providing value to the visitor.
+
+<Image
+  src="/images/blog/lead-generation-chatbot/drift-chatbot-example.png"
+  alt="Drift Chatbot Example"
+  width="2000"
+  height="3054"
+/>
+
+**Interactive Quizzes and Assessments.** Engage visitors with quizzes or assessments that offer product or service recommendations based on their answers. This engaging method is an effective way to collect lead information and give personalized suggestions.
+
+**Proactively Offer Help and Suggestions.** Have your chatbot actively offer help or suggest topics of discussion instead of waiting for questions. This proactive approach can help uncover leads who might not have initiated contact otherwise.
+
+## Supporting Customer Journey: Building Positive Experiences Through Interactive and Helpful Dialogue
+
+- **Nurturing Leads with Follow-Up Questions**: Keep in touch with leads by having your chatbot send follow-up questions or messages based on previous interactions. This action keeps your brand in mind and encourages progression through the sales funnel.
+- **Providing Instant Answers to Common Questions**: Let your chatbot instantly answer frequently asked questions. This not only saves your team's time but also improves the customer experience by offering immediate information.
+- **Scheduling Demos and Appointments**: Make it easy for leads to schedule demos or appointments by syncing your chatbot with your calendar. This convenience encourages leads to move forward in their journey.
+- **Collecting Feedback**: Use your chatbot to gather feedback on your products, services, or the purchase experience. This feedback is crucial for enhancing your offerings and the overall customer experience.
+
+Chatbots offer more than just conversation; they can **engage with visitors in meaningful ways**, **generate valuable leads**, and **guide them through the buying process**.
+
+When adding chatbots to your lead generation strategy, it's important to recognize that not all chatbots are the same. Different types of chatbots fulfill various roles and suit different stages of the customer journey. Choosing the right chatbot for your specific needs is key to enhancing your lead generation efforts. Let's look at the main types of lead generation chatbots:
+
+## Different Types of Lead Generation Chatbots
+
+### Booking Chatbots
+
+These chatbots are experts in scheduling meetings and reservations through direct communication. They work well for businesses that provide services, such as clinics, salons, or consulting firms. Booking chatbots make it easy for potential customers to move forward, increasing the likelihood of conversions.
+
+### Newsletter Subscription Chatbots
+
+These chatbots aim to get users to sign up for mailing lists or newsletters. They might offer a sneak peek of the content or exclusive insights to motivate visitors. This approach not only builds your email list but also maintains engagement with potential leads over time.
+
+### Promotional Chatbots
+
+Promotional chatbots share information about promotions, discounts, or special events with users. They can activate based on specific actions taken by the user or at certain times. This ensures the message gets to the user when they're most likely to be receptive.
+
+## Creating a Lead Generation Funnel with a Chatbot
+
+### Awareness Stage
+
+At the funnel's top, your aim is to attract as many potential leads as possible. Your chatbot can assist by:
+
+- **Providing General Information**: Giving basic details about your products or services to generate interest.
+- **Sharing Valuable Content**: Offering articles, guides, or videos that address your target audience's common issues or interests.
+
+### Interest and Consideration Stage
+
+After grabbing a lead's attention, you want to nurture their interest. Here, your chatbot can:
+
+- **Offer Detailed Product Info**: Sharing more comprehensive information about your products or services based on what the lead is interested in.
+- **Showcase Testimonials and Case Studies**: Using success stories or customer testimonials to build credibility and trust.
+
+### Decision Stage
+
+When leads are deciding whether to buy or commit, your chatbot should:
+
+- **Provide Comparisons and Recommendations**: Assisting leads in comparing options and suggesting the best solution for their needs.
+- **Answer Specific Queries**: Handling any last-minute questions or hesitations.
+
+### Action Stage
+
+Here, your chatbot helps facilitate the final action, such as making a purchase or booking a consultation. It can:
+
+- **Guide Through the Purchase Process**: Making the buying process easier by walking leads through the steps directly in the chat.
+- **Offer Special Promotions**: Presenting time-limited offers or special discounts to prompt action.
+
+## AI and Chatbots: What AI Brings to the Table
+
+### Natural Language Understanding (NLU)
+
+Thanks to Natural Language Understanding, AI helps chatbots understand the context and subtle differences in user queries, even when phrased in various ways. This ability makes sure the responses are not just relevant but also personalized, making the interactions more effective.
+
+### Engaging Conversations
+
+AI enhancements enable chatbots to conduct conversations that are more natural and human-like. This level of **human-like engagement** encourages more interaction from visitors. It makes them more likely to continue talking to the chatbot and progress through the sales funnel.
+
+### Qualifying Leads
+
+AI-equipped chatbots are particularly good at asking appropriate questions to qualify leads effectively. They can figure out a user's level of interest through strategic queries and gather vital information such as contact details, streamlining the lead generation process.
+
+### Multilingual Support
+
+One of the standout features of AI in chatbots is the ability to support several languages. This opens up global markets to businesses, allowing them to connect with a wider audience without needing a big multilingual team.
+
+# How Famous Companies use chatbotss to generate leads
+
+### Pendo.io Lets You Skip the Contact Form Through the Chatbot
+
+<Image
+  src="/images/blog/lead-generation-chatbot/pendo-chatbot-example.png"
+  alt="Pendo Chatbot Example"
+  width="2000"
+  height="3054"
+/>
+
+Pendo.io has transformed lead capture by allowing users to interact directly with a chatbot instead of filling out traditional contact forms. This method speeds up the information collection process and creates a more engaging user experience.
+
+### Intercom Uses Chatbot to Let You Talk to an Expert
+
+<Image
+  src="/images/blog/lead-generation-chatbot/intercom-chatbot-example.png"
+  alt="Intercom Chatbot Example"
+  width="2000"
+  height="3444"
+/>
+
+Intercom employs its chatbot in a unique way by connecting potential leads with experts. This means that visitors in search of specific solutions can be quickly directed to talk to someone who can provide customized advice and insights. This greatly enhances the lead qualification process and ensures a smoother customer journey.
+
+### Geico Uses Chatbot to Create a Custom Quote
+
+<Image
+  src="/images/blog/lead-generation-chatbot/geico-chatbot-example.png"
+  alt="Geico Chatbot Example"
+  width="2000"
+  height="1004"
+/>
+
+Geico has taken chatbot functionality a step further by offering potential customers custom quotes directly through the chat interface. Providing immediate value in this way not only impresses visitors but also nudges them closer to making a decision. It showcases the ease and convenience of doing business with Geico.
+
+<Cta />