@agent-embed/nextjs v0.0.3

Install

npm install @agent-embed/nextjs

Bubble

const Bubble = dynamic(
  () => import('@agent-embed/nextjs').then(module => {
    return module.Bubble}),
  { ssr: false }
);


const App = () => {
  return (
          <Bubble
            agentName="agent-name"
            theme={{ button: { 
              backgroundColor: "#2b3e13",
            } }}
            previewMessage={{
              message: 'Sounds Interesting? Use the chatbot to sign up!',
            }}
          />  
        )
}

This code is creating a container with a 100% width (will match parent width) and 600px height.

This code will show the bubble and let a preview message appear after 5 seconds.

You can also use the Script component in NextJs as below:

import Script from 'next/script'

<Script
  src="https://cdn.jsdelivr.net/npm/@agent-embed/js@0.0.1/dist/web.js"
  strategy="afterInteractive"
  type="module"
  onLoad={() => {
    Agent.initBubble({
      agentName: "agent-name",
      theme: {
        button: { backgroundColor: "#2b3e13" },
        chatWindow: { backgroundColor: "#ffffff" },
      },
    });
  }}
/> 

Open or close the preview message

You can use these commands:

import { showPreviewMessage } from '@agent-embed/nextjs'

Agent.showPreviewMessage()

import { hidePreviewMessage } from '@agent-embed/nextjs'

Agent.hidePreviewMessage()

Open or close the chat window

You can use these commands:

import { open } from '@agent-embed/nextjs'

open()

import { close } from '@agent-embed/nextjs'

close()

import { toggle } from '@agent-embed/nextjs'

toggle()