DEV Community


Posted on

🤖 How to Integrate BotPress Bot into Next.js 13 | 🚀 Step-by-Step Guide!

Image description

🍕 Get the code here:

⛔ Make sure that your bot is deployed!

📹 Video Tutorial:

📚 Key Steps Covered:

  • 🔗 Clone the repo with: git clone

  • 📁 cd into the folder and install the dependencies with yarn install

  • 💻 start the application with yarn dev

  • 📝 get the Botpress Webchat Snippet from botpress website

Image description

  • 🧩 Navigate to the layout.tsx file. In the head section use the Script Component to init botpress

Image description

          onLoad={() => {
Enter fullscreen mode Exit fullscreen mode

const initBotpress = () => {
      composerPlaceholder: "Chat with bot",
        "This chatbot was built surprisingly fast with Botpress",
      botId: "<YOUR_BOT_ID>",
      hostUrl: "<YOUR_BOT_HOST_URL>",
      messagingUrl: "",
      clientId: "<YOUR_CLIENT_ID>",
Enter fullscreen mode Exit fullscreen mode
  • 🛠️ make sure that you type on top of the layout.tsx "use client" to make it a client component.

Image description

You have successfully integrated your bot into your next.js 13 app! 🎉

Top comments (0)