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'
description: 'A short summary of the blog post.'
postedAt: '2023-11-19'
author: '<AUTHOR_ID>'
---

If you are a new author, you need to add your information to the apps/landing-page/app/features/blog/data folder.

All images need to be placed under the public/blog-assets/<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 links to other blog posts should look like ./<POST_SLUG>.mdx.

Here are all the components you can use in your blog post:

  • Image: To display an image. Make sure you define width and height prop to avoid content shifting. Example: <Image src="/blog-assets/my-awesome-blog-post/image.png" alt="My awesome image" width="760x" height="430px"/>.

    ​
    caption
    string

    Used to wrap the image in a frame and display a caption below it.

  • Info: To display a callout block with an info icon. Example: <Info>This is an info callout</Info>.

  • Success: To display a callout block with a success icon. Example: <Success>This is a success callout</Success>.

  • Warning: To display a callout block with a warning icon. Example: <Warning>This is a warning callout</Warning>.

  • 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>" />

  • Cta: To display a call-to-action that redirects to Typebot.

    ​
    highlight
    'default'

    Example:

    // Displays a CTA with default text content
<Cta highlight="default" />

// Displays a minimalist CTA with just a logo and the CTA button
<Cta />
Suggest edits
DocumentationTranslate