Add an OpenAI Chatbot For NextJs using this library.

Pre-requisite

Create an agent on https://predictabledialogs.com

Install

npm install @agent-embed/nextjs

Bubble

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

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

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/[email protected]/dist/web.js"
  strategy="afterInteractive"
  type="module"
  onLoad={() => {
    Agent.initBubble({
      agentName: "agent-name",
      theme: {
        button: { backgroundColor: "#2b3e13" },
      },
    });
  }}
/> 

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()