​
Overview

Chatbase allows you to customize the initial messages that your chatbot displays when it first loads. This feature is particularly useful for creating personalized greetings based on user information or setting context-specific welcome messages.

​
How to Set Up Client-Side Custom Initial Messages

  1. Embed the Chatbot using the new Script:
To ensure that you can set custom initial messages, you need to embed the Chatbase script correctly. Follow these steps to get the embed code:
  • Visit the Chatbase Dashboard.
  • Navigate to Connect > Embed > Embed code with identity.
  • Copy the embed code and add it to your application.
Note: If you don’t need to verify the identity of logged-in users, you can skip the first script in the embed code and only use the chatbot embed script.
Here’s an example of the embed code you’ll find on the dashboard: Chatbase Embed Code Example
  1. Use the SDK setInitialMessages method:
After the SDK is loaded, you can use the setInitialMessages method to define the messages that will be displayed when the chatbot first loads: 
window.chatbase.setInitialMessages(messages);

​
Method Parameters

  • messages (array of strings) — An array containing the messages to be displayed in sequence. Note: The total character count across all messages is limited to 1000 characters. Any content exceeding this limit will be automatically truncated.

​
Example with User Personalization

When combined with user identification, you can create personalized greetings: 
// Assuming you have user information
const userName = "John Doe";

window.chatbase.setInitialMessages([
  `Hi ${userName}!`,
  "How can I help you today?"
]);

​
Important Notes

  • Messages will be displayed in the order they appear in the array
  • Each message will appear as a separate chat bubble from the assistant
  • The method can be called at any time to update the initial messages for the next chat session
  • If called after the chat has already started, the changes will only take effect when the chat is reset or reloaded

​
Best Practices

  1. Keep messages concise
    • Use short, clear messages that help guide the user
    • Avoid lengthy paragraphs in initial messages
  2. Personalization
    • Use user data thoughtfully to create welcoming experiences
  3. Timing
    • Set initial messages early in your application’s lifecycle
    • Ideally, set them right after the chatbot loads

​
Example Implementation

Here’s a complete example showing how to combine user identification with initial messages: 
// First, identify the user
window.chatbase("identify", {
  user_id: "1234567890",
  user_hash: "generated_hash",
  metadata: {
    name: "John Doe",
    email: "john@example.com"
  }
});

// Then set personalized initial messages
window.chatbase.setInitialMessages([
  `Welcome back, ${user.firstName}!`,
  "I'm here to assist you with any questions about our products.",
  "What would you like to know?"
]);

​
Troubleshooting

If your initial messages aren’t appearing:
  1. Check timing - Ensure the setInitialMessages call happens after the Chatbase script has fully loaded
  2. Verify syntax - Confirm the input is a valid array of strings
  3. Check for errors - Monitor your browser’s console for any error messages