Reference

Reference

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

HTML

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

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

</script>

Attributes / Props

HTML

<script type="module">
import Chatbox from 'https://cdn.jsdelivr.net/npm/@chaindesk/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: '[e-mail]',
phoneNumber: '[phone]',
userId: '42424242',
},

// Provided context will be appended to the Agent system prompt
context: `The user you are talking to is Georges. Start by Greeting him by his name.`,

interface: {
  // Override initial messages
  initialMessages: [
    'Hello John how are you doing today?',
    'How can I help you ?',
  ],
  bubbleIconStyle: {
     padding: '5px',
  },
  iconUrl:
    'https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Love%20Letter.png',

  primaryColor: '#f0f',

  isInitMessagePopupDisabled: true,
}
});

</script>

agentId · string · required

ID of the Agent

contact · string

Show properties

firstName · string

First name

lastName · string

Last name

email · string

Email

phoneNumber · string

Phone number

userId · string

Custom user ID

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

update

Create New Conversation

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

widget.update({
  interface: {
    initialMessages: ['Hello World!'],
  },
  context: `Now the user name is Gerald. Always start your answer by greeting him by his name.`,
})