mirror of
https://github.com/baptisteArno/typebot.io.git
synced 2026-06-05 21:04:43 +08:00
📝 Added faq dir + cover image to articles (#2485)
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
This commit is contained in:
younesbenallal
GitHub
parent
5b5f82d6c0
commit
367de01a5d
@ -21,6 +21,7 @@ const posts = defineCollection({
|
||||
name: "posts",
|
||||
directory: "content",
|
||||
include: "**/*.mdx",
|
||||
exclude: "faq/**",
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
description: z.string().optional(),
|
||||
@ -45,8 +46,35 @@ const posts = defineCollection({
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const faqs = defineCollection({
|
||||
name: "faqs",
|
||||
directory: "content/faq",
|
||||
include: "*.mdx",
|
||||
schema: z.object({
|
||||
question: z.string(),
|
||||
postedAt: z.string().date().optional(),
|
||||
updatedAt: z.string().date().optional(),
|
||||
content: z.string(),
|
||||
}),
|
||||
transform: async (document, context) => {
|
||||
const mdx = await compileMDX(context, document, {
|
||||
remarkPlugins: [remarkGfm, remarkRemoveMdxExtension],
|
||||
rehypePlugins: [
|
||||
rehypeSlug,
|
||||
[rehypePrettyCode, rehypePrettyCodeSettings],
|
||||
[rehypeAutolinkHeadings, rehypeAutolinkHeadingsSettings],
|
||||
],
|
||||
});
|
||||
return {
|
||||
...document,
|
||||
mdx,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const contentCollectionsConfig: AnyConfiguration = defineConfig({
|
||||
content: [posts],
|
||||
content: [posts, faqs],
|
||||
});
|
||||
|
||||
export default contentCollectionsConfig;
|
||||
|
||||
7
apps/landing-page/content/faq/are-chat-bots-illegal.mdx
Normal file
7
apps/landing-page/content/faq/are-chat-bots-illegal.mdx
Normal file
@ -0,0 +1,7 @@
|
||||
---
|
||||
question: "Are chat bots illegal?"
|
||||
postedAt: "2025-05-12"
|
||||
---
|
||||
|
||||
Chatbots are legal when used ethically and in compliance with regulations. Legal requirements include disclosing bot interactions rather than impersonating humans, obtaining consent for data collection, following GDPR and CCPA for personal data, and adhering to platform terms of service. For internal employee chatbots, ensure compliance with employment laws and internal data privacy policies. Bots become illegal only when used for fraud, spam, unauthorized data collection, or deceptive practices.
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
---
|
||||
question: "Can I automate WhatsApp Business?"
|
||||
postedAt: "2025-05-12"
|
||||
---
|
||||
|
||||
Yes, you can automate WhatsApp Business at two levels.
|
||||
|
||||
## Basic automation (free)
|
||||
|
||||
The WhatsApp Business App offers greeting messages, away messages, and quick replies. These are pre-written responses triggered by time or shortcuts. They work for very small businesses with low message volume.
|
||||
|
||||
## Advanced automation (API + builder)
|
||||
|
||||
For chatbots, conditional flows, AI responses, CRM integrations, and broadcast messaging, you need the WhatsApp Business API plus an automation tool. Popular tools include Typebot (open-source, visual builder), Wati (marketing suite), and ManyChat (multi-channel). These let you build flows that qualify leads, answer FAQs, book appointments, and send order updates automatically. Pricing ranges from free tiers (Typebot offers 200 chats/month) to enterprise plans.
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
---
|
||||
question: "Can I create a WhatsApp chatbot for free?"
|
||||
postedAt: "2025-05-12"
|
||||
---
|
||||
|
||||
Yes. Typebot offers a free plan that includes full chatbot building capabilities and WhatsApp deployment for up to 200 chats per month. You need WhatsApp Business API access, which is free through Meta. With Typebot's free tier, you get unlimited flows, conditional logic, variables, basic integrations, and detailed analytics—no credit card or coding required.
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
---
|
||||
question: "Can I train a chatbot with my own data?"
|
||||
postedAt: "2025-05-12"
|
||||
---
|
||||
|
||||
Yes. You can train a chatbot with your own data using Retrieval-Augmented Generation (RAG). This works by uploading your documents—PDFs, Notion pages, web content, or support articles—then converting them into embeddings stored in a vector database.
|
||||
|
||||
When users ask questions, the system retrieves the most relevant chunks of your content and sends them to a large language model like GPT-4 to generate answers. Because the AI only uses your verified documents to respond, it avoids hallucination and keeps sensitive information private.
|
||||
|
||||
Tools like Typebot combined with Flowise, or platforms like Chatbase, let you build custom knowledge base chatbots without coding. This ensures responses are grounded in your actual documentation rather than generic internet data.
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
---
|
||||
question: "Does WhatsApp Business have chatbots?"
|
||||
postedAt: "2025-05-12"
|
||||
---
|
||||
|
||||
No, WhatsApp Business App does not have built-in chatbots. It only offers basic automation: greeting messages for new contacts and away messages for after-hours. These are static, one-size-fits-all replies.
|
||||
|
||||
To create a true chatbot with conditional logic, AI responses, buttons, data collection, and integrations, you need the WhatsApp Business API connected to a chatbot builder. The WhatsApp Business API is free through Meta but requires a third-party tool to build the actual bot. Platforms like Typebot let you create visual, drag-and-drop chatbot flows and deploy them to WhatsApp without coding. The same bot can also run on your website as an embed, popup, or chat bubble, so you build once and deploy everywhere.
|
||||
|
||||
<Image src="/blog-assets/chatbot-marketing-use-cases/whatsapp-chat-support-conversation-example.avif" alt="WhatsApp Chat Support Conversation Example" width={1200} height={800} />
|
||||
|
||||
@ -0,0 +1,16 @@
|
||||
---
|
||||
question: "How can chatbots be used for marketing?"
|
||||
postedAt: "2025-05-12"
|
||||
---
|
||||
|
||||
Chatbots enhance marketing in six ways:
|
||||
|
||||
1. **Lead capture** – Replace static forms with conversational experiences that convert 45-60% of users
|
||||
2. **Lead qualification** – Ask strategic questions and score prospects automatically before handing them to sales
|
||||
3. **Product recommendations** – Guide users to relevant products through interactive quizzes based on preferences
|
||||
4. **Cart recovery** – Send WhatsApp or SMS reminders for abandoned carts with personalized offers
|
||||
5. **Campaign engagement** – Run interactive quizzes, contests, and giveaways that collect first-party data
|
||||
6. **Personalized follow-ups** – Segment users based on chatbot responses and send targeted nurture sequences
|
||||
|
||||
Marketing chatbots achieve 45-60% engagement rates, compared to email's 20-25% open rate, because they respond instantly and reduce user friction.
|
||||
|
||||
@ -0,0 +1,17 @@
|
||||
---
|
||||
question: "How do I enable the reply option in WhatsApp?"
|
||||
postedAt: "2025-05-12"
|
||||
---
|
||||
|
||||
To enable auto-replies in WhatsApp Business:
|
||||
|
||||
1. Open the **WhatsApp Business App**
|
||||
2. Tap **More options (⋮) > Business tools**
|
||||
3. Select **Away message** or **Greeting message**
|
||||
4. Toggle the switch **on**
|
||||
5. Tap the message text to edit it
|
||||
6. Choose your recipients (all customers, everyone not in your address book, or everyone except selected contacts)
|
||||
7. For away messages, set your business hours schedule
|
||||
|
||||
For true automated replies with conditional logic—such as different responses based on what the customer says—connect your WhatsApp Business API to a chatbot builder like Typebot.
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
---
|
||||
question: "How does chatbot automation work?"
|
||||
postedAt: "2025-05-12"
|
||||
---
|
||||
|
||||
Chatbot automation works by processing user messages through predefined rules or AI models to generate responses automatically.
|
||||
|
||||
## Rule-based chatbots
|
||||
|
||||
These follow decision trees where each user input triggers a specific branch. They suit structured tasks like collecting form submissions, routing support tickets by category, or walking users through fixed onboarding checklists. They avoid unpredictability and hallucinated answers, making them ideal when precision is critical.
|
||||
|
||||
## AI-powered chatbots
|
||||
|
||||
These use large language models (LLMs) like GPT or Claude to understand intent and generate natural responses. Users can express themselves freely, and the bot interprets meaning autonomously. These work best for open-ended conversations like technical support or product discovery.
|
||||
|
||||
Both types can integrate with external systems—CRMs, APIs, Google Sheets, payment tools—to perform actions like booking appointments, processing orders, or qualifying leads without human intervention.
|
||||
|
||||
<Image src="/blog-assets/typebot-builder.avif" alt="Typebot Builder" width={1200} height={800} />
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
---
|
||||
question: "How to build a knowledge base for AI chatbot?"
|
||||
postedAt: "2025-05-12"
|
||||
---
|
||||
|
||||
To build a knowledge base for an AI chatbot:
|
||||
|
||||
1. **Collect your content** – Gather FAQs, product documentation, support articles, troubleshooting guides, sales materials, and policy documents
|
||||
2. **Structure it** – Organize by topic and keep answers concise. Break long documents into focused chunks
|
||||
3. **Choose a format** – Use Notion, Google Docs, PDFs, databases, or internal wikis
|
||||
4. **Connect to a RAG system** – Use a tool like Flowise, Typebot with OpenAI integration, or Chatbase to index your content into embeddings stored in a vector database
|
||||
5. **Test and refine** – Ask common questions and improve answers based on gaps or hallucinations
|
||||
|
||||
The chatbot will retrieve relevant content from your knowledge base and use AI to generate accurate, context-aware responses grounded in your verified information rather than generic training data.
|
||||
|
||||
@ -0,0 +1,27 @@
|
||||
---
|
||||
question: "How to chat AI on WhatsApp Business?"
|
||||
postedAt: "2025-05-12"
|
||||
---
|
||||
|
||||
To add AI chat capabilities to WhatsApp Business, follow these steps:
|
||||
|
||||
## 1. Get WhatsApp Business API access
|
||||
|
||||
Create a Meta app at developers.facebook.com and enable the WhatsApp Business API. You do not need Meta Business verification to start, but you will need it to scale beyond 250 unique customers per day.
|
||||
|
||||
## 2. Connect to a chatbot builder
|
||||
|
||||
Link your WhatsApp API to a platform like Typebot using your access token and webhook URL.
|
||||
|
||||
## 3. Add an AI block to your flow
|
||||
|
||||
In the Typebot builder, add an OpenAI or AI integration block. Configure your system prompt and connect your knowledge base if desired.
|
||||
|
||||
## 4. Deploy and test
|
||||
|
||||
Publish your bot and send a test message to your WhatsApp number. The AI will now generate context-aware responses directly in WhatsApp conversations.
|
||||
|
||||
The key advantage is that users can ask questions naturally, and the AI interprets intent rather than following rigid decision trees.
|
||||
|
||||
<Image src="/blog-assets/chatbot-automation/OpenAI-logo.avif" alt="OpenAI Logo" width={800} height={400} />
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
---
|
||||
question: "How to generate leads from WhatsApp?"
|
||||
postedAt: "2025-05-12"
|
||||
---
|
||||
|
||||
Generate leads from WhatsApp using:
|
||||
|
||||
1. **Click-to-WhatsApp ads** on Facebook and Instagram that open a WhatsApp conversation when clicked
|
||||
2. **QR codes** on print materials, storefronts, and product packaging that launch WhatsApp chats
|
||||
3. **Website chat widgets** that redirect visitors to WhatsApp instead of forms
|
||||
4. **Lead magnets** delivered via WhatsApp in exchange for contact information—guides, catalogs, or price lists
|
||||
5. **Chatbots** that qualify leads through conversational flows, asking questions and scoring prospects automatically
|
||||
|
||||
WhatsApp's 98% open rate and instant reply expectation convert leads faster than email. Use a tool like Typebot to build automated qualification flows that capture, score, and route leads to your CRM or sales team.
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
---
|
||||
question: "How to get real estate leads with AI?"
|
||||
postedAt: "2025-05-12"
|
||||
---
|
||||
|
||||
To generate real estate leads with AI:
|
||||
|
||||
1. **Deploy a chatbot on your website and landing pages** that engages visitors instantly instead of waiting for them to fill out static contact forms
|
||||
2. **Use AI to answer property questions** from your listings database in natural language
|
||||
3. **Qualify leads automatically** by asking about budget, timeline, and preferences
|
||||
4. **Integrate with your CRM** to route hot leads to agents immediately
|
||||
5. **Set up Click-to-WhatsApp ads** that trigger AI conversations when prospects click from Facebook or Instagram
|
||||
|
||||
This approach captures leads 24/7 and converts 45-60% of engaged visitors, compared to 2-3% for static contact forms.
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
---
|
||||
question: "How to qualify real estate leads?"
|
||||
postedAt: "2025-05-12"
|
||||
---
|
||||
|
||||
To qualify real estate leads, ask about:
|
||||
|
||||
1. **Budget and pre-approval status** – Are they pre-approved for a mortgage or have proof of funds?
|
||||
2. **Timeline** – When do they need to buy or sell?
|
||||
3. **Property preferences** – Location, size, type, must-haves, deal-breakers
|
||||
4. **Motivation** – Why are they moving? Job relocation, growing family, investment?
|
||||
5. **Current situation** – Are they renting, selling their current home, or relocating?
|
||||
|
||||
A chatbot can collect this information 24/7, frame financial questions as "helping them compete in a tight market" rather than gatekeeping, and route only qualified buyers to agents. This also ensures consistency, which reduces Fair Housing compliance risks that come from memory-based, ad-hoc qualification conversations.
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
---
|
||||
question: "How to set up quick replies on WhatsApp?"
|
||||
postedAt: "2025-05-12"
|
||||
---
|
||||
|
||||
In WhatsApp Business App:
|
||||
|
||||
1. Go to **Settings > Business Tools > Quick replies**
|
||||
2. Tap the **+** icon
|
||||
3. Create a message with text, images, or attachments
|
||||
4. Set a keyboard shortcut starting with "/"
|
||||
5. Tap **Save**
|
||||
|
||||
To use a quick reply in any chat, type "/" and select your saved message. You can store up to 50 quick replies for frequently used responses like pricing, store hours, shipping policies, or thank-you messages. For more advanced automation, connect the WhatsApp Business API to a chatbot builder like Typebot instead.
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
---
|
||||
question: "How to use AI to qualify leads?"
|
||||
postedAt: "2025-05-12"
|
||||
---
|
||||
|
||||
To qualify leads with AI, build a chatbot that asks strategic qualifying questions about budget, timeline, needs, and authority. Use the AI to analyze free-text responses and detect intent beyond simple keyword matching. The bot then scores leads automatically based on their answers: high-value leads route instantly to sales through calendar integrations, while lower-priority leads enter automated nurture sequences.
|
||||
|
||||
Tools like Typebot let you combine rule-based qualification flows with OpenAI integration for natural language understanding, requiring no coding. This approach converts 45-60% of engaged users versus 2-3% for static forms.
|
||||
|
||||
9
apps/landing-page/content/faq/is-being-a-bot-illegal.mdx
Normal file
9
apps/landing-page/content/faq/is-being-a-bot-illegal.mdx
Normal file
@ -0,0 +1,9 @@
|
||||
---
|
||||
question: "Is being a bot illegal?"
|
||||
postedAt: "2025-05-12"
|
||||
---
|
||||
|
||||
Using chatbots is legal for legitimate business purposes such as customer support, lead generation, and automation. However, bots become illegal when used for spam or unsolicited messaging, impersonating humans without disclosure, scraping data without permission, circumventing platform terms of service, or committing fraud.
|
||||
|
||||
Best practices to stay legal: Always disclose when users are chatting with a bot, obtain consent for data collection, follow platform-specific policies (WhatsApp, Facebook, Instagram), and comply with data protection regulations like GDPR and CCPA.
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
---
|
||||
question: "Is WhatsApp automation illegal?"
|
||||
postedAt: "2025-05-12"
|
||||
---
|
||||
|
||||
WhatsApp automation is legal when using the official WhatsApp Business API and following Meta's policies. You must get opt-in consent before messaging users, use approved message templates for outbound marketing messages, avoid spam or unsolicited bulk messaging, and comply with local data protection laws like GDPR.
|
||||
|
||||
Illegal automation involves using unofficial third-party tools that scrape WhatsApp Web, bypass Meta's systems, or send spam without consent. Using the official API with a legitimate business purpose—customer support, order updates, lead qualification—is fully legal and encouraged by Meta.
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
---
|
||||
question: "What are the 3 best AI chatbots?"
|
||||
postedAt: "2025-05-12"
|
||||
---
|
||||
|
||||
The three best AI chatbots for businesses in 2025 are:
|
||||
|
||||
## 1. OpenAI GPT-4
|
||||
|
||||
The most capable language model for natural, nuanced conversations and complex reasoning tasks.
|
||||
|
||||
## 2. Claude (Anthropic)
|
||||
|
||||
Excellent for long-form content, detailed instructions, and handling nuanced or sensitive queries with high accuracy.
|
||||
|
||||
## 3. Typebot with OpenAI integration
|
||||
|
||||
Best for building custom AI chatbots with a visual drag-and-drop builder. Deploys to websites, WhatsApp, and embeds with full control over the conversation flow. No coding required.
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
---
|
||||
question: "What are the 5 requirements for a lead to be considered a qualified prospect?"
|
||||
postedAt: "2025-05-12"
|
||||
---
|
||||
|
||||
The five requirements for a qualified prospect are:
|
||||
|
||||
1. **Budget** – Can they afford your solution?
|
||||
2. **Authority** – Do they have decision-making power or direct influence?
|
||||
3. **Need** – Do they have a specific problem your product solves?
|
||||
4. **Timeline** – Are they ready to act within a reasonable timeframe?
|
||||
5. **Fit** – Do they match your ideal customer profile (industry, company size, use case)?
|
||||
|
||||
This framework, known as BANT+Fit, ensures sales teams focus only on prospects likely to convert, rather than chasing every form submission.
|
||||
|
||||
@ -0,0 +1,23 @@
|
||||
---
|
||||
question: "What are the four types of chatbots?"
|
||||
postedAt: "2025-05-12"
|
||||
---
|
||||
|
||||
The four main types of chatbots are:
|
||||
|
||||
## 1. Rule-based chatbots
|
||||
|
||||
Follow predefined decision trees and scripts. Each user action triggers a mapped response. Best for fixed workflows like forms and FAQ routing.
|
||||
|
||||
## 2. AI-powered chatbots
|
||||
|
||||
Use machine learning and natural language processing to understand intent and generate responses dynamically. Handle complex, open-ended conversations.
|
||||
|
||||
## 3. Hybrid chatbots
|
||||
|
||||
Combine rules for structured tasks with AI for complex queries. Start with a decision tree and escalate to AI when users ask unexpected questions.
|
||||
|
||||
## 4. RAG chatbots
|
||||
|
||||
Use Retrieval-Augmented Generation to answer from custom knowledge bases. They retrieve relevant documents and use AI to generate accurate, context-aware answers grounded in your verified data.
|
||||
|
||||
@ -0,0 +1,21 @@
|
||||
---
|
||||
question: "What are the tools to automate WhatsApp messages?"
|
||||
postedAt: "2025-05-12"
|
||||
---
|
||||
|
||||
The best WhatsApp automation tools in 2025 include:
|
||||
|
||||
**Typebot** – Open-source visual builder with native WhatsApp deployment, free tier, and AI integrations. Best for businesses that want full control and self-hosting options.
|
||||
|
||||
**Wati** – All-in-one WhatsApp marketing suite with team inbox, broadcasts, and automation. Good for e-commerce and support teams.
|
||||
|
||||
**ManyChat** – Multi-channel chat marketing platform covering Instagram, Facebook Messenger, WhatsApp, and SMS.
|
||||
|
||||
**Landbot** – No-code chatbot builder with WhatsApp support and strong visual flow design.
|
||||
|
||||
**Brevo** – CRM and marketing automation platform with WhatsApp messaging built in.
|
||||
|
||||
**Respond.io** – Omnichannel inbox that centralizes WhatsApp, email, and social conversations.
|
||||
|
||||
All require WhatsApp Business API access and vary in pricing from free to enterprise tiers.
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
---
|
||||
question: "What criteria do you use to qualify leads?"
|
||||
postedAt: "2025-05-12"
|
||||
---
|
||||
|
||||
Effective lead qualification criteria include **Budget** (can they afford it?), **Authority** (are they the decision-maker?), **Need** (do they have the problem you solve?), **Timeline** (when do they need a solution?), and **Fit** (do they match your ICP?).
|
||||
|
||||
Additional signals strengthen qualification: engagement level, company size, industry, current solutions used, and urgency indicators like recent website visits or demo requests. A chatbot can ask these questions conversationally and score leads automatically based on responses, replacing subjective judgment with an objective, repeatable framework.
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
---
|
||||
question: "What is a chatbot for lead qualification?"
|
||||
postedAt: "2025-05-12"
|
||||
---
|
||||
|
||||
A lead qualification chatbot automatically asks prospects questions to determine if they are a good fit for your product or service. It collects information about budget, authority, need, and timeline through conversational flows, then scores leads and routes qualified prospects to sales while nurturing others automatically.
|
||||
|
||||
This replaces static contact forms with 24/7 automated conversations that engage leads instantly. Unlike forms, which convert at 2-3%, conversational chatbots convert 45-60% of engaged users because they reduce friction and respond immediately.
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
---
|
||||
question: "What is a good lead qualification rate?"
|
||||
postedAt: "2025-05-12"
|
||||
---
|
||||
|
||||
A good lead qualification rate ranges from 20-30% for most B2B businesses. This means 20-30% of raw leads meet your criteria to become Marketing Qualified Leads (MQLs) or Sales Qualified Leads (SQLs). Companies using automated lead qualification with chatbots often see 26% higher conversion rates and 50% more revenue compared to manual qualification. The key metric is quality over quantity—a lower qualification rate with better-fit leads outperforms high volume of unqualified prospects.
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
---
|
||||
question: "What is AI marketing automation?"
|
||||
postedAt: "2025-05-12"
|
||||
---
|
||||
|
||||
AI marketing automation uses artificial intelligence to personalize and optimize marketing tasks at scale. It includes chatbots that qualify leads and answer questions 24/7, AI-generated content and product recommendations, predictive lead scoring based on behavior and chat interactions, automated email and SMS sequences triggered by user actions, and intelligent audience segmentation that updates dynamically.
|
||||
|
||||
Unlike rule-based automation, which follows fixed if-then logic, AI systems learn from data to improve targeting, timing, and messaging—reducing manual work while increasing conversion rates and revenue per lead.
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
---
|
||||
question: "What is an AI chatbot for internal employees?"
|
||||
postedAt: "2025-05-12"
|
||||
---
|
||||
|
||||
An AI chatbot for internal employees is a digital assistant that helps staff with workplace tasks like HR inquiries, IT support, onboarding, and knowledge searches. Unlike customer-facing bots, internal chatbots work behind the firewall and connect to systems like HRIS, IT ticketing platforms, and intranets.
|
||||
|
||||
Common tasks include checking PTO balances, explaining health insurance benefits, resetting passwords, booking meeting rooms, answering company policy questions, and routing IT tickets. Microsoft found that GPT-based internal bots cut IT escalation rates by 53.8% compared to traditional flowchart logic. Employees who use AI assistants across seven or more task types report up to 5x more time saved than those using them for only four tasks.
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
---
|
||||
question: "Which AI is best for WhatsApp?"
|
||||
postedAt: "2025-05-12"
|
||||
---
|
||||
|
||||
For WhatsApp chatbots, the best AI models are **OpenAI GPT-4** and **Claude** for natural language understanding and generation. The best platforms to deploy AI on WhatsApp are **Typebot** (open-source, visual builder with native OpenAI integration), **Chatbase** (custom GPT training), and **Botpress** (enterprise-grade). These let you build AI chatbots that understand context, answer questions from your knowledge base, and handle complex customer conversations in WhatsApp.
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
---
|
||||
question: "Which chatbot is best for marketing?"
|
||||
postedAt: "2025-05-12"
|
||||
---
|
||||
|
||||
The best chatbots for marketing in 2025 are:
|
||||
|
||||
**Typebot** – Open-source visual builder, excellent for lead generation, quizzes, and product recommendation flows. Free tier available. Deploys to websites, WhatsApp, and embeds.
|
||||
|
||||
**ManyChat** – Best for Instagram and Facebook Messenger marketing automation with strong broadcast and comment-to-message features.
|
||||
|
||||
**Intercom** – Enterprise-grade with AI and live chat, strong for SaaS onboarding and conversion.
|
||||
|
||||
**Drift** – Focused on B2B conversational marketing and sales qualification.
|
||||
|
||||
**Landbot** – No-code builder with strong WhatsApp support and interactive flow design.
|
||||
|
||||
Choose based on your primary channels (website, WhatsApp, Instagram), budget, and whether you need AI capabilities or simple rule-based flows.
|
||||
|
||||
@ -59,6 +59,10 @@ const data = [
|
||||
{
|
||||
title: "Blog",
|
||||
links: [
|
||||
{
|
||||
label: "FAQ",
|
||||
to: "/faq",
|
||||
},
|
||||
{
|
||||
label: "Lead Generation Chatbot",
|
||||
to: "/blog/$slug",
|
||||
|
||||
@ -18,8 +18,10 @@ import { Route as LayoutOssFriendsRouteImport } from './routes/_layout/oss-frien
|
||||
import { Route as LayoutAboutRouteImport } from './routes/_layout/about'
|
||||
import { Route as LayoutSlugRouteImport } from './routes/_layout/$slug'
|
||||
import { Route as LayoutTemplatesIndexRouteImport } from './routes/_layout/templates/index'
|
||||
import { Route as LayoutFaqIndexRouteImport } from './routes/_layout/faq/index'
|
||||
import { Route as LayoutBlogIndexRouteImport } from './routes/_layout/blog/index'
|
||||
import { Route as LayoutTemplatesSlugRouteImport } from './routes/_layout/templates/$slug'
|
||||
import { Route as LayoutFaqSlugRouteImport } from './routes/_layout/faq/$slug'
|
||||
import { Route as LayoutBlogSlugRouteImport } from './routes/_layout/blog/$slug'
|
||||
|
||||
const SitemapDotxmlRoute = SitemapDotxmlRouteImport.update({
|
||||
@ -66,6 +68,11 @@ const LayoutTemplatesIndexRoute = LayoutTemplatesIndexRouteImport.update({
|
||||
path: '/templates/',
|
||||
getParentRoute: () => LayoutRoute,
|
||||
} as any)
|
||||
const LayoutFaqIndexRoute = LayoutFaqIndexRouteImport.update({
|
||||
id: '/faq/',
|
||||
path: '/faq/',
|
||||
getParentRoute: () => LayoutRoute,
|
||||
} as any)
|
||||
const LayoutBlogIndexRoute = LayoutBlogIndexRouteImport.update({
|
||||
id: '/blog/',
|
||||
path: '/blog/',
|
||||
@ -76,6 +83,11 @@ const LayoutTemplatesSlugRoute = LayoutTemplatesSlugRouteImport.update({
|
||||
path: '/templates/$slug',
|
||||
getParentRoute: () => LayoutRoute,
|
||||
} as any)
|
||||
const LayoutFaqSlugRoute = LayoutFaqSlugRouteImport.update({
|
||||
id: '/faq/$slug',
|
||||
path: '/faq/$slug',
|
||||
getParentRoute: () => LayoutRoute,
|
||||
} as any)
|
||||
const LayoutBlogSlugRoute = LayoutBlogSlugRouteImport.update({
|
||||
id: '/blog/$slug',
|
||||
path: '/blog/$slug',
|
||||
@ -91,8 +103,10 @@ export interface FileRoutesByFullPath {
|
||||
'/oss-friends': typeof LayoutOssFriendsRoute
|
||||
'/pricing': typeof LayoutPricingRoute
|
||||
'/blog/$slug': typeof LayoutBlogSlugRoute
|
||||
'/faq/$slug': typeof LayoutFaqSlugRoute
|
||||
'/templates/$slug': typeof LayoutTemplatesSlugRoute
|
||||
'/blog/': typeof LayoutBlogIndexRoute
|
||||
'/faq/': typeof LayoutFaqIndexRoute
|
||||
'/templates/': typeof LayoutTemplatesIndexRoute
|
||||
}
|
||||
export interface FileRoutesByTo {
|
||||
@ -104,8 +118,10 @@ export interface FileRoutesByTo {
|
||||
'/oss-friends': typeof LayoutOssFriendsRoute
|
||||
'/pricing': typeof LayoutPricingRoute
|
||||
'/blog/$slug': typeof LayoutBlogSlugRoute
|
||||
'/faq/$slug': typeof LayoutFaqSlugRoute
|
||||
'/templates/$slug': typeof LayoutTemplatesSlugRoute
|
||||
'/blog': typeof LayoutBlogIndexRoute
|
||||
'/faq': typeof LayoutFaqIndexRoute
|
||||
'/templates': typeof LayoutTemplatesIndexRoute
|
||||
}
|
||||
export interface FileRoutesById {
|
||||
@ -119,8 +135,10 @@ export interface FileRoutesById {
|
||||
'/_layout/oss-friends': typeof LayoutOssFriendsRoute
|
||||
'/_layout/pricing': typeof LayoutPricingRoute
|
||||
'/_layout/blog/$slug': typeof LayoutBlogSlugRoute
|
||||
'/_layout/faq/$slug': typeof LayoutFaqSlugRoute
|
||||
'/_layout/templates/$slug': typeof LayoutTemplatesSlugRoute
|
||||
'/_layout/blog/': typeof LayoutBlogIndexRoute
|
||||
'/_layout/faq/': typeof LayoutFaqIndexRoute
|
||||
'/_layout/templates/': typeof LayoutTemplatesIndexRoute
|
||||
}
|
||||
export interface FileRouteTypes {
|
||||
@ -134,8 +152,10 @@ export interface FileRouteTypes {
|
||||
| '/oss-friends'
|
||||
| '/pricing'
|
||||
| '/blog/$slug'
|
||||
| '/faq/$slug'
|
||||
| '/templates/$slug'
|
||||
| '/blog/'
|
||||
| '/faq/'
|
||||
| '/templates/'
|
||||
fileRoutesByTo: FileRoutesByTo
|
||||
to:
|
||||
@ -147,8 +167,10 @@ export interface FileRouteTypes {
|
||||
| '/oss-friends'
|
||||
| '/pricing'
|
||||
| '/blog/$slug'
|
||||
| '/faq/$slug'
|
||||
| '/templates/$slug'
|
||||
| '/blog'
|
||||
| '/faq'
|
||||
| '/templates'
|
||||
id:
|
||||
| '__root__'
|
||||
@ -161,8 +183,10 @@ export interface FileRouteTypes {
|
||||
| '/_layout/oss-friends'
|
||||
| '/_layout/pricing'
|
||||
| '/_layout/blog/$slug'
|
||||
| '/_layout/faq/$slug'
|
||||
| '/_layout/templates/$slug'
|
||||
| '/_layout/blog/'
|
||||
| '/_layout/faq/'
|
||||
| '/_layout/templates/'
|
||||
fileRoutesById: FileRoutesById
|
||||
}
|
||||
@ -238,6 +262,13 @@ declare module '@tanstack/react-router' {
|
||||
preLoaderRoute: typeof LayoutTemplatesIndexRouteImport
|
||||
parentRoute: typeof LayoutRoute
|
||||
}
|
||||
'/_layout/faq/': {
|
||||
id: '/_layout/faq/'
|
||||
path: '/faq'
|
||||
fullPath: '/faq/'
|
||||
preLoaderRoute: typeof LayoutFaqIndexRouteImport
|
||||
parentRoute: typeof LayoutRoute
|
||||
}
|
||||
'/_layout/blog/': {
|
||||
id: '/_layout/blog/'
|
||||
path: '/blog'
|
||||
@ -252,6 +283,13 @@ declare module '@tanstack/react-router' {
|
||||
preLoaderRoute: typeof LayoutTemplatesSlugRouteImport
|
||||
parentRoute: typeof LayoutRoute
|
||||
}
|
||||
'/_layout/faq/$slug': {
|
||||
id: '/_layout/faq/$slug'
|
||||
path: '/faq/$slug'
|
||||
fullPath: '/faq/$slug'
|
||||
preLoaderRoute: typeof LayoutFaqSlugRouteImport
|
||||
parentRoute: typeof LayoutRoute
|
||||
}
|
||||
'/_layout/blog/$slug': {
|
||||
id: '/_layout/blog/$slug'
|
||||
path: '/blog/$slug'
|
||||
@ -268,8 +306,10 @@ interface LayoutRouteChildren {
|
||||
LayoutOssFriendsRoute: typeof LayoutOssFriendsRoute
|
||||
LayoutPricingRoute: typeof LayoutPricingRoute
|
||||
LayoutBlogSlugRoute: typeof LayoutBlogSlugRoute
|
||||
LayoutFaqSlugRoute: typeof LayoutFaqSlugRoute
|
||||
LayoutTemplatesSlugRoute: typeof LayoutTemplatesSlugRoute
|
||||
LayoutBlogIndexRoute: typeof LayoutBlogIndexRoute
|
||||
LayoutFaqIndexRoute: typeof LayoutFaqIndexRoute
|
||||
LayoutTemplatesIndexRoute: typeof LayoutTemplatesIndexRoute
|
||||
}
|
||||
|
||||
@ -279,8 +319,10 @@ const LayoutRouteChildren: LayoutRouteChildren = {
|
||||
LayoutOssFriendsRoute: LayoutOssFriendsRoute,
|
||||
LayoutPricingRoute: LayoutPricingRoute,
|
||||
LayoutBlogSlugRoute: LayoutBlogSlugRoute,
|
||||
LayoutFaqSlugRoute: LayoutFaqSlugRoute,
|
||||
LayoutTemplatesSlugRoute: LayoutTemplatesSlugRoute,
|
||||
LayoutBlogIndexRoute: LayoutBlogIndexRoute,
|
||||
LayoutFaqIndexRoute: LayoutFaqIndexRoute,
|
||||
LayoutTemplatesIndexRoute: LayoutTemplatesIndexRoute,
|
||||
}
|
||||
|
||||
|
||||
@ -82,6 +82,13 @@ function RouteComponent() {
|
||||
Updated on {formatDate(post.updatedAt)}
|
||||
</span>
|
||||
)}
|
||||
{post.cover && (
|
||||
<img
|
||||
src={post.cover}
|
||||
alt={post.title}
|
||||
className="w-full rounded-xl object-cover max-h-[50vh]"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<Mdx code={post.mdx} />
|
||||
</article>
|
||||
|
||||
76
apps/landing-page/src/routes/_layout/faq/$slug.tsx
Normal file
76
apps/landing-page/src/routes/_layout/faq/$slug.tsx
Normal file
@ -0,0 +1,76 @@
|
||||
import { createFileRoute, redirect } from "@tanstack/react-router";
|
||||
import { cx } from "@typebot.io/ui/lib/cva";
|
||||
import codeSnippetsCssUrl from "@/assets/code-snippet.css?url";
|
||||
import { ContentPageWrapper } from "@/components/ContentPageWrapper";
|
||||
import { TextLink } from "@/components/link";
|
||||
import { Mdx } from "@/features/blog/components/mdx";
|
||||
import { createMetaTags } from "@/lib/createMetaTags";
|
||||
|
||||
const extractDescription = (content: string) => {
|
||||
const plainText = content
|
||||
.replace(/^---[\s\S]*?---/, "")
|
||||
.replace(/[<>]/g, "")
|
||||
.replace(/[#*`_[\]]/g, "")
|
||||
.replace(/\n+/g, " ")
|
||||
.trim();
|
||||
return plainText.slice(0, 160) + (plainText.length > 160 ? "..." : "");
|
||||
};
|
||||
|
||||
export const Route = createFileRoute("/_layout/faq/$slug")({
|
||||
loader: async ({ params }) => {
|
||||
const { allFaqs } = await import("@/content-collections");
|
||||
const faq = allFaqs.find((faq) => faq._meta.path.endsWith(params.slug));
|
||||
|
||||
if (!faq) {
|
||||
throw redirect({
|
||||
to: "/faq",
|
||||
});
|
||||
}
|
||||
|
||||
return { faq };
|
||||
},
|
||||
head: ({ loaderData }) => ({
|
||||
links: [{ rel: "stylesheet", href: codeSnippetsCssUrl }],
|
||||
meta: loaderData
|
||||
? [
|
||||
...createMetaTags({
|
||||
title: loaderData.faq.question,
|
||||
description: extractDescription(loaderData.faq.content),
|
||||
imagePath: "/images/default-og.png",
|
||||
path: `/faq/${loaderData.faq._meta.path.split("/").at(-1)}`,
|
||||
}),
|
||||
]
|
||||
: [],
|
||||
}),
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
const { faq } = Route.useLoaderData();
|
||||
return (
|
||||
<ContentPageWrapper className="max-w-7xl">
|
||||
<div className="flex gap-4 justify-center items-start">
|
||||
<article
|
||||
className={cx(
|
||||
"prose prose-p:text-lg prose-strong:font-medium prose-video:rounded-xl prose-a:text-[currentColor] max-w-4xl bg-white p-12 rounded-xl border",
|
||||
"prose-figure:my-0 prose-img:rounded-xl prose-img:max-h-[60vh] prose-img:w-auto",
|
||||
"prose-code:bg-gray-4 prose-code:rounded-md prose-code:text-orange-10 prose-code:border prose-code:border-gray-6 prose-code:p-1 prose-code:py-0.5 prose-code:font-normal",
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col gap-4">
|
||||
<TextLink
|
||||
href="/faq"
|
||||
className="not-prose font-normal uppercase text-sm"
|
||||
>
|
||||
← All questions
|
||||
</TextLink>
|
||||
<h1 className="inline-block font-heading text-4xl not-prose text-foreground my-4 font-bold lg:text-5xl">
|
||||
{faq.question}
|
||||
</h1>
|
||||
</div>
|
||||
<Mdx code={faq.mdx} />
|
||||
</article>
|
||||
</div>
|
||||
</ContentPageWrapper>
|
||||
);
|
||||
}
|
||||
71
apps/landing-page/src/routes/_layout/faq/index.tsx
Normal file
71
apps/landing-page/src/routes/_layout/faq/index.tsx
Normal file
@ -0,0 +1,71 @@
|
||||
import { createFileRoute, Link } from "@tanstack/react-router";
|
||||
import { isDefined } from "@typebot.io/lib/utils";
|
||||
import { Card } from "@/components/Card";
|
||||
import { ContentPageWrapper } from "@/components/ContentPageWrapper";
|
||||
import { createMetaTags } from "@/lib/createMetaTags";
|
||||
|
||||
const extractExcerpt = (content: string) => {
|
||||
const plainText = content
|
||||
.replace(/^---[\s\S]*?---/, "")
|
||||
.replace(/[<>]/g, "")
|
||||
.replace(/[#*`_[\]]/g, "")
|
||||
.replace(/\n+/g, " ")
|
||||
.trim();
|
||||
return plainText.slice(0, 120) + (plainText.length > 120 ? "..." : "");
|
||||
};
|
||||
|
||||
export const Route = createFileRoute("/_layout/faq/")({
|
||||
loader: async () => {
|
||||
const { allFaqs } = await import("@/content-collections");
|
||||
return {
|
||||
faqs: allFaqs
|
||||
.filter((faq) => isDefined(faq.postedAt))
|
||||
.sort(
|
||||
(a, b) =>
|
||||
new Date(b.postedAt!).getTime() - new Date(a.postedAt!).getTime(),
|
||||
),
|
||||
};
|
||||
},
|
||||
head: () => ({
|
||||
meta: createMetaTags({
|
||||
title: "FAQ - Frequently Asked Questions | Typebot",
|
||||
description:
|
||||
"Find answers to the most common questions about chatbots, conversational AI, and Typebot.",
|
||||
imagePath: "/images/default-og.png",
|
||||
path: "/faq",
|
||||
}),
|
||||
}),
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
const { faqs } = Route.useLoaderData();
|
||||
return (
|
||||
<ContentPageWrapper className="max-w-3xl">
|
||||
<div className="flex flex-col gap-6">
|
||||
<h1>Frequently Asked Questions</h1>
|
||||
<p className="text-xl">
|
||||
Find answers to the most common questions about chatbots,
|
||||
conversational AI, and building with Typebot.
|
||||
</p>
|
||||
</div>
|
||||
<ol className="flex flex-col gap-6">
|
||||
{faqs.map((faq) => {
|
||||
const slug = faq._meta.path.split("/").at(-1) ?? faq._meta.path;
|
||||
|
||||
return (
|
||||
<li key={faq._meta.path}>
|
||||
<Link to="/faq/$slug" params={{ slug }}>
|
||||
<Card>
|
||||
<h3>{faq.question}</h3>
|
||||
<p>{extractExcerpt(faq.content)}</p>
|
||||
<p className="font-medium underline">Read answer</p>
|
||||
</Card>
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
</ContentPageWrapper>
|
||||
);
|
||||
}
|
||||
@ -25,25 +25,32 @@ function generateSitemapXml(entries: SitemapUrlEntry[]) {
|
||||
|
||||
function transformPathToSitemapUrlEntry(
|
||||
path: string,
|
||||
allPosts: Array<{
|
||||
contentEntries: Array<{
|
||||
_meta: { path: string };
|
||||
updatedAt?: string;
|
||||
postedAt?: string;
|
||||
title?: string;
|
||||
question?: string;
|
||||
}>,
|
||||
basePath = "",
|
||||
) {
|
||||
const post = allPosts.find((p) => p._meta.path === path);
|
||||
const lastmod = post?.updatedAt
|
||||
? new Date(post.updatedAt).toISOString().split("T")[0]
|
||||
: post?.postedAt
|
||||
? new Date(post.postedAt).toISOString().split("T")[0]
|
||||
const contentEntry = contentEntries.find(
|
||||
(entry) => entry._meta.path === path,
|
||||
);
|
||||
const lastmod = contentEntry?.updatedAt
|
||||
? new Date(contentEntry.updatedAt).toISOString().split("T")[0]
|
||||
: contentEntry?.postedAt
|
||||
? new Date(contentEntry.postedAt).toISOString().split("T")[0]
|
||||
: undefined;
|
||||
if (!lastmod)
|
||||
throw new Error(
|
||||
`Content file ${post?.title} needs either postedAt or updatedAt to generate coherent sitemap`,
|
||||
`Content file ${contentEntry?.title ?? contentEntry?.question} needs either postedAt or updatedAt to generate coherent sitemap`,
|
||||
);
|
||||
return {
|
||||
loc: `${currentBaseUrl}/${path}`.replace(/\/+$|(?<!:)\/\//g, "/"),
|
||||
loc: `${currentBaseUrl}/${basePath}/${path}`.replace(
|
||||
/\/+$|(?<!:)\/\//g,
|
||||
"/",
|
||||
),
|
||||
lastmod,
|
||||
} satisfies SitemapUrlEntry;
|
||||
}
|
||||
@ -52,7 +59,17 @@ export const Route = createFileRoute("/sitemap.xml")({
|
||||
server: {
|
||||
handlers: {
|
||||
GET: async () => {
|
||||
const { allPosts } = await import("@/content-collections");
|
||||
const { allFaqs, allPosts } = await import("@/content-collections");
|
||||
const faqPaths = Array.from(
|
||||
new Set(allFaqs.map((faq) => faq._meta.path)),
|
||||
);
|
||||
const faqEntries: SitemapUrlEntry[] = faqPaths.map((path) =>
|
||||
transformPathToSitemapUrlEntry(path, allFaqs, "faq"),
|
||||
);
|
||||
const faqIndexLastmod = faqEntries.reduce(
|
||||
(latest, entry) => (entry.lastmod > latest ? entry.lastmod : latest),
|
||||
"2025-07-05",
|
||||
);
|
||||
|
||||
const staticEntries = [
|
||||
{ loc: `${currentBaseUrl}/`, lastmod: "2025-07-05" },
|
||||
@ -60,6 +77,7 @@ export const Route = createFileRoute("/sitemap.xml")({
|
||||
{ loc: `${currentBaseUrl}/about`, lastmod: "2025-07-05" },
|
||||
{ loc: `${currentBaseUrl}/oss-friends`, lastmod: "2025-07-05" },
|
||||
{ loc: `${currentBaseUrl}/blog`, lastmod: "2025-07-05" },
|
||||
{ loc: `${currentBaseUrl}/faq`, lastmod: faqIndexLastmod },
|
||||
{
|
||||
loc: `${currentBaseUrl}/templates`,
|
||||
lastmod: templatesIndexLastmod,
|
||||
@ -103,6 +121,7 @@ export const Route = createFileRoute("/sitemap.xml")({
|
||||
...templateEntries,
|
||||
...contentEntries,
|
||||
...blogContentEntries,
|
||||
...faqEntries,
|
||||
]);
|
||||
|
||||
return new Response(xml, {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user