The Chatbot is available through our CDN as a single JavaScript file or through NPM as a React component package.

  • HTML

  • React

<script type="module">
import Chatbox from 'https://cdn.jsdelivr.net/npm/@chatvolt/embeds@latest/dist/chatbox/index.js';

Chatbox.initBubble({
agentId: 'YOUR_AGENT_ID',
});

</script>

​
Attributes / Props

  • HTML

  • React

<script type="module">
import Chatbox from 'https://cdn.jsdelivr.net/npm/@chatvolt/embeds@latest/dist/chatbox/index.js';

Chatbox.initBubble({
agentId: 'YOUR_AGENT_ID',

// If provided will create a contact for the user and link it to the conversation
contact: {
firstName: 'John',
lastName: 'Doe',
email: 'customer@email.com',
phoneNumber: '+33612345644',
userId: '42424242',
},
// Override initial messages
initialMessages: [
'Hello Marcos how are you doing today?',
'How can I help you ?',
],
// Provided context will be appended to the Agent system prompt
context: "The user you are talking to is John. Start by Greeting him by his name.",

});

</script>
agentId
string
required

ID of the Agent

contact
string
initialMessages
string array

Initial Agent messages

context
string

Extra context that will be appended to the Agent system prompt

​
Methods

open
bubble widget only

Open Bubble Chatbox

const widget = await Chatbox.initBubble({
  agentId: 'YOUR_AGENT_ID',
})

widget.open()
close
bubble widget only

Close Bubble Chatbox

const widget = await Chatbox.initBubble({
  agentId: 'YOUR_AGENT_ID',
})

widget.close()
toggle
bubble widget only
Toggle Bubble Chatbox
const widget = await Chatbox.initBubble({
  agentId: 'YOUR_AGENT_ID',
})

widget.toggle()
createNewConversation
Create New Conversation
const widget = await Chatbox.initBubble({
  agentId: 'YOUR_AGENT_ID',
})

widget.createNewConversation()

Was this page helpful?

StandardHosted form