Install the Messenger in a Next.js application
The <Messenger /> component renders a chat bubble which, when clicked, opens up a modal from which the users can contact you.
This is what the Messenger component looks like when it's open, with customization options provided:
1. Get the API key
To get started, you need to get your API Key by going to your dashboard and navigating to your Settings > API Key page.
2. Install
To import the makkuro-nextjs package, run the following:
1
npm i @makkuro/makkuro-nextjs
3. Use the <Messenger /> component
Then, in your app/page.tsx (or any layout or page you wish to include it), you can use the <Messenger /> component like this, by replaching <YOUR_PUBLIC_KEY> with the public key you retrieved from the previous step:
1
2
3
import { Messenger } from '@makkuro/makkuro-nextjs'
<Messenger publicKey='<YOUR_PUBLIC_KEY>' />
🎉 You should now be able to see the messenger render in your app!
You can see that it looks different from the first image, so let's customize it a bit.
You can have a look at the reference for the rest of the arguments or move to the next step.