Chatbot Code Generator 🛠️

Customize and generate your chatbot embed code

This tool helps you create a personalized chat widget for your website. Customize the appearance below, generate the code, and paste it into your site's HTML. Need help? See our getting started guide.
💡

How It Works

  1. Configure your chat widget using the options below
  2. Generate the embed code
  3. Copy and paste it before the </head> tag on your website
  4. Custom styles will automatically apply to the chat widget

Basic Customization

These settings control the fundamental appearance of your chat widget. All fields are optional - the widget will work with default values if left blank.

The text displayed on the chat trigger button

Title shown in the chat window header

Primary color for the chat interface (buttons, headers)

Default: #007bff (Too Blue to be True)

Chat window width (include units: px, %, etc.)

Chat window height (include units: px, %, etc.)

Advanced Customization

For developers: Add custom CSS to style specific elements of the chat interface. Note: These styles will override default styling.

💡

Paid Account required.

Use valid CSS selectors targeting our chat components (examples below)

⚠️ Incorrect CSS may break the chat interface. Test changes thoroughly.

📋 Embed Code

Copy this code and paste it just before the closing </head> tag on every page where you want the chat widget to appear.

✅

The chat widget will automatically appear on your site after adding this code. No additional initialization needed!

🎨 CSS Style Examples

Common customization examples - copy these directly into the "Custom CSS Styles" field above: 


/* Change bot message background */
.chatbot-message-bot {
  background-color: #e0f7fa;
}

/* Change user message text color */
.chatbot-message-user {
  color: #333;
}

/* Make chat window rounded */
.chatbot-container {
  border-radius: 12px;
}

/* Make font larger */
.chatbot-message {
  font-size: 16px;
}

💡 Pro Tip: Start with small changes and test frequently. (You may need to clear your cache).