Custom Messages

Customize welcome messages and floating bubble prompts with static configuration or dynamic JavaScript.

Static Welcome Messages

Configure welcome messages and suggested prompts in your ChatSpark dashboard under Agent Settings. You can also pass them via the widget config:

javascript

// When initializing via openChatSparkBot
openChatSparkBot(
  'YOUR_CHATBOT_ID',
  false,
  '',
  false,
  'body',
  '',  // triggerMessage - optional initial prompt
  { marginBottom: '20px', marginRight: '20px' }
);

// Or via data config passed to the widget
const instance = ChatSpark({
  chatbotId: 'YOUR_ID',
  data: {
    welcomeMessage: 'Hi! How can I help you today?',
    suggestedMessage: ['Pricing', 'Contact sales', 'Book a demo']
  }
});

Dashboard overrides code

Dashboard settings override code values. Set the welcome message and suggested prompts in the ChatSpark dashboard for persistent configuration.

Dynamic Personalized Messages

Use JavaScript to customize messages based on the current user or page context. Pass custom data when rendering or update the instance after load:

javascript

// 1. Pass user context via the data prop
const user = getCurrentUser(); // Your auth helper
const instance = ChatSpark({
  chatbotId: 'YOUR_ID',
  data: {
    welcomeMessage: `Welcome back, ${user.name}! How can I assist you?`,
    suggestedMessage: user.isPremium
      ? ['Upgrade plan', 'Billing', 'API support']
      : ['Pricing', 'Start free trial', 'Contact sales']
  }
});
instance.render('body');

// 2. Update messages after the widget is loaded
const instance = window.chatSparkInstances['default'];
if (instance) {
  instance.updateProps({
    data: {
      welcomeMessage: 'We have a sale on plans this week!',
      suggestedMessage: ['View deals', 'Compare plans', 'Get support']
    }
  });
}

Floating Bubble Prompts

The floating bubble can show suggested prompts before the user opens the chat. These come from the agent's suggested prompts setting. To customize them dynamically:

javascript

// Update suggested prompts (shown on the closed bubble)
instance.updateProps({
  data: {
    suggestedMessage: ['Help me choose', 'Compare products', 'Talk to sales'],
    suggestedMessageHeading_status: true  // Show prompts on the bubble
  }
});

Trigger Messages

Send a message into the chat when opening, for example from a "Help with pricing" button:

html

// Via trigger element
<button class="cs-trigger-agent" data-trigger="What are your pricing plans?">
  See pricing
</button>

// Via API
window.ChatSpark.open();
window.ChatSpark.sendMessage('What are your pricing plans?');

// Or with openChatSparkBot (help center mode)
openChatSparkBot('YOUR_ID', false, '', false, '#helpcenterBot', 'Show me the docs');

Events

Custom Actions