Chatbot Configuration

Embed Codes

Security Note: API credentials have been removed from the embed codes. Always store your OpenAI API key and Assistant ID securely on your server side.

popup html

<!-- Add this script to your HTML -->
<script src="https://mellow-choux-5b0fc5.netlify.app/embed.js"></script>

<!-- Initialize the chatbot -->
<script>
  initChatbot({
    containerId: 'my-chatbot',
    config: {
  "headerColor": "#2563eb",
  "primaryColor": "#3b82f6",
  "headerImage": "https://images.unsplash.com/photo-1531379410502-63bfe8cdaf6f?w=64&h=64&fit=crop&crop=faces",
  "width": "400px",
  "height": "600px",
  "isExpanded": true,
  "assistantName": ""
}
  });
</script>

fullpage html

<iframe 
  src="https://mellow-choux-5b0fc5.netlify.app/chat?config=%7B%22headerColor%22%3A%22%232563eb%22%2C%22primaryColor%22%3A%22%233b82f6%22%2C%22headerImage%22%3A%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1531379410502-63bfe8cdaf6f%3Fw%3D64%26h%3D64%26fit%3Dcrop%26crop%3Dfaces%22%2C%22width%22%3A%22400px%22%2C%22height%22%3A%22600px%22%2C%22isExpanded%22%3Atrue%2C%22assistantName%22%3A%22%22%7D" 
  style="width: 100%; height: 100vh; border: none;"
></iframe>

popup react

import { ChatbotWidget } from '@your-package/chatbot';

// Initialize with your API credentials on the server side
export default function App() {
  return (
    <ChatbotWidget 
      config={{
  "headerColor": "#2563eb",
  "primaryColor": "#3b82f6",
  "headerImage": "https://images.unsplash.com/photo-1531379410502-63bfe8cdaf6f?w=64&h=64&fit=crop&crop=faces",
  "width": "400px",
  "height": "600px",
  "isExpanded": true,
  "assistantName": ""
}}
    />
  );
}

fullpage react

import { ChatbotFullpage } from '@your-package/chatbot';

// Initialize with your API credentials on the server side
export default function Chat() {
  return (
    <ChatbotFullpage 
      config={{
  "headerColor": "#2563eb",
  "primaryColor": "#3b82f6",
  "headerImage": "https://images.unsplash.com/photo-1531379410502-63bfe8cdaf6f?w=64&h=64&fit=crop&crop=faces",
  "width": "400px",
  "height": "600px",
  "isExpanded": true,
  "assistantName": ""
}}
    />
  );
}

python

import os
from your_package import Chatbot

# Set your credentials securely as environment variables
chatbot = Chatbot(
    api_key=os.environ.get('OPENAI_API_KEY'),
    assistant_id=os.environ.get('ASSISTANT_ID'),
    config={
  "headerColor": "#2563eb",
  "primaryColor": "#3b82f6",
  "headerImage": "https://images.unsplash.com/photo-1531379410502-63bfe8cdaf6f?w=64&h=64&fit=crop&crop=faces",
  "width": "400px",
  "height": "600px",
  "isExpanded": true,
  "assistantName": ""
}
)

# Initialize the chat
response = chatbot.initialize()

javascript

// Store your credentials securely on the server side
const chatbot = new Chatbot({
  config: {
  "headerColor": "#2563eb",
  "primaryColor": "#3b82f6",
  "headerImage": "https://images.unsplash.com/photo-1531379410502-63bfe8cdaf6f?w=64&h=64&fit=crop&crop=faces",
  "width": "400px",
  "height": "600px",
  "isExpanded": true,
  "assistantName": ""
}
});

// Initialize the chat
await chatbot.initialize();

curl

# Replace YOUR_API_KEY and YOUR_ASSISTANT_ID with secure environment variables
curl -X POST "https://mellow-choux-5b0fc5.netlify.app/api/chat" \
  -H "Authorization: Bearer ${OPENAI_API_KEY}" \
  -H "Content-Type: application/json" \
  -d '{"headerColor":"#2563eb","primaryColor":"#3b82f6","headerImage":"https://images.unsplash.com/photo-1531379410502-63bfe8cdaf6f?w=64&h=64&fit=crop&crop=faces","width":"400px","height":"600px","isExpanded":true,"assistantName":"","assistantId":"${ASSISTANT_ID}"}'
Assistant

Chat Assistant