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

#botpress #ai #nextjs #webdev

🍕 Get the code here:

https://github.com/XamHans/botpress-nextjs

⛔ Make sure that your bot is deployed!

📹 Video Tutorial:
https://www.youtube.com/watch?v=zUTFqEeA0NI&ab_channel=HayerHans

📚 Key Steps Covered:

🔗 Clone the repo with: git clone https://github.com/XamHans/botpress-nextjs.git
📁 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

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



<Script
          src="https://cdn.botpress.cloud/webchat/v0/inject.js"
          onLoad={() => {
            initBotpress();
          }}
        />



const initBotpress = () => {
    window.botpressWebChat.init({
      composerPlaceholder: "Chat with bot",
      botConversationDescription:
        "This chatbot was built surprisingly fast with Botpress",
      botId: "<YOUR_BOT_ID>",
      hostUrl: "<YOUR_BOT_HOST_URL>",
      messagingUrl: "https://messaging.botpress.cloud",
      clientId: "<YOUR_CLIENT_ID>",
    });
  };