CSphereBot - Chatbot Widget

Welcome to the CSphereBot demo page. This chatbot widget can be easily integrated into any website using a simple CDN link.

Click on the chat icon in the bottom right corner to start a conversation!

To add CSphereBot to your website, simply include the following script tag in your HTML:

<script src="https://cdn.example.com/cspherebot/chatbot.min.js"></script>

Then initialize the chatbot with your configuration:

<script>
    document.addEventListener('DOMContentLoaded', function() {
        new CSphereBot({
            botName: 'My Assistant',
            welcomeMessage: 'Hello! How can I help you today?',
            primaryColor: '#4a86e8'
        });
    });
</script>

Alternatively, you can use the auto-initialization attribute:

<div data-csphere-bot-init data-csphere-bot-config='{"botName": "My Assistant"}'></div>

Option	Type	Default	Description
botName	String	'CSphereBot'	Name displayed in the chat header
welcomeMessage	String	'Hello! How can I help you today?'	Initial message from the bot
primaryColor	String	'#4a86e8'	Main color theme for the chatbot
position	String	'right'	Position of the chat widget ('right' or 'left')
iconUrl	String	null	Custom icon URL (uses default if null)
height	String	'500px'	Height of the chat window
width	String	'350px'	Width of the chat window
autoOpen	Boolean	false	Whether to open the chat window on load
apiEndpoint	String	null	URL for processing messages

To connect the chatbot to your backend, set the apiEndpoint option:

new CSphereBot({
    apiEndpoint: 'https://your-api.example.com/chat'
});

Your API should accept POST requests with a JSON body containing a message property and respond with JSON containing a reply property.

You can customize the appearance of the chatbot by including the optional CSS file:

<link rel="stylesheet" href="https://cdn.example.com/cspherebot/chatbot.css">

And then applying one of the predefined themes:

document.querySelector('.csphere-bot-container').classList.add('csphere-bot-theme-dark');

For more information and advanced usage, please refer to the Documentation