DEV Community

hayerhans
hayerhans

Posted on

5

πŸ€– How to Integrate BotPress Bot into Next.js 13 | πŸš€ Step-by-Step Guide!

Image description

πŸ• 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

Image description

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

Image description



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


Enter fullscreen mode Exit fullscreen mode



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>",
    });
  };


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! πŸŽ‰

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (1)

Collapse
 
fosteman profile image
Timothy Fosteman β€’

Dude, this is a custom integration that needs to be done: botpress.com/docs/building-a-custo...