The official Typebot blog is a place where we share any ideas, original content related to the chatbot industry, and Typebot itself.

You are free to contribute to the blog or fix any typos you may find.

  1. Head over to the content folder on the Github repo.
  2. Click on the blog post file you want to edit. Or create a new file by clicking on the Add file button.
  3. If you did not already have a fork of the repository, you will be prompted to create one.
  4. Once you’re happy with your changes, hit Commit changes....
  5. Click on Create pull request.
  6. Add a title and a description to describe your changes.
  7. Click on Create pull request.

It will be reviewed and merged if approved!

​
New article guidelines

  • The article should be related to chatbots, or Typebot.
  • The article should be written in English.
  • The article should be original content. No plagiarism.
  • The article should not be 100% AI-generated.

The mdx file should always start with the following frontmatter:

---
title: 'My awesome blog post'
publishedAt: '2023-11-19'
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 -. It is best if the image width is no more than 800px.

All links to other blog posts should look like /blog/<POST_SLUG>.

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" 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.

  • YouTube: To embed a YouTube video. Example: <YouTube id="<YOUTUBE_VIDEO_ID>" />

  • Loom: To embed a Loom video. Example: <Loom id="<LOOM_VIDEO_ID>" />

  • Cta: To display a call-to-action that redirects to Typebot. Example: <Cta />

  • Table: To display a table. It expects 2 props: headers and rows. Example:

    <Table
  headers={['Feature', 'Typebot', 'Landbot']}
  rows={[
    [
      'Pricing',
      'Free plan, $39/mo Starter, $99/mo Pro',
      'Free plan, €40/mo Starter, €150/mo Pro, €400/mo Business',
    ],
    [
      'Integrations',
      'Google Sheets, Webhooks, Zapier, Make, SendGrid',
      'Dialogflow, Salesforce, Slack, Google Sheets, Zapier, Mailchimp',
    ],
    [
      'Customization',
      'Full theme customization, custom CSS',
      'Limited theme options',
    ],
  ]}
/>
DocumentationTranslate