How to Build an AI Chatbot for Your Website Using API
Why Build an AI Chatbot for Your Website?Adding an intelligent chatbot to your website is no longer a "nice-to-have"—it's becoming a core part of user experience. Whether you want to answer customer questions 24/7, guide users through your product, or just add a touch of AI magic, building your own chatbot gives you full control. And thanks to modern chatbot API services, you can do it without training a model from scratch or managing expensive infrastructure.In this tutorial, I’ll walk you through how to build an AI chatbot for your website using a simple API chatbot tutorial approach. By the end, you’ll have a working website chatbot that you can customize and deploy in minutes. We’ll use the DeepSeek API as our example, but the same patterns apply to Qwen, MiniMax, or any compatible chatbot API.## What You’ll Need- A basic understanding of JavaScript (we’ll keep it simple)- An API key from an AI provider (I’ll show you where to get one)- A text editor and a modern browser## Step 1: Get Your API KeyFirst, you’ll need access to an AI model through an API. For this tutorial, we’ll use the DeepSeek API, which offers powerful reasoning at a very low cost. Head over to tai.shadie-oneapi.com to get affordable, fast API tokens for DeepSeek, Qwen, and MiniMax. Once you have your key, keep it handy—you’ll need it in the next step.## Step 2: The Core Chatbot LogicWe’ll write a simple HTML page with embedded JavaScript. The chatbot will take user input, send it to the API, and display the response. Here’s the complete code:
<!DOCTYPE html>
<html>
<head>
<title>My AI Chatbot</title>
<style>
#chatbox { width: 400px; height: 500px; border: 1px solid #ccc; padding: 10px; overflow-y: scroll; }
#userInput { width: 300px; padding: 8px; }
#sendBtn { padding: 8px 16px; }
.message { margin: 8px 0; padding: 8px; border-radius: 8px; }
.user { background: #e3f2fd; text-align: right; }
.bot { background: #f1f8e9; text-align: left; }
</style>
</head>
<body>
<h2>Website Chatbot Demo</h2>
<div id="chatbox"></div>
<input type="text" id="userInput" placeholder="Ask me anything..." />
<button id="sendBtn">Send</button><script>
const chatbox = document.getElementById('chatbox');
const userInput = document.getElementById('userInput');
const sendBtn = document.getElementById('sendBtn');// Replace with your actual API key from tai.shadie-oneapi.com
const API_KEY = 'your-api-key-here';
const API_URL = 'https://api.deepseek.com/v1/chat/completions';async function sendMessage() {
const userText = userInput.value.trim();
if (!userText) return;// Display user message
chatbox.innerHTML += `<div class="message user">${userText}</div>`;
userInput.value = '';// Call the API
try {
const response = await fetch(API_URL, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${API_KEY}`
},
body: JSON.stringify({
model: 'deepseek-chat',
messages: [
{ role: 'system', content: 'You are a helpful assistant for a website.' },
{ role: 'user', content: userText }
],
max_tokens: 500
})
});const data = await response.json();
const botReply = data.choices[0].message.content;// Display bot response
chatbox.innerHTML += `<div class="message bot">${botReply}</div>`;
chatbox.scrollTop = chatbox.scrollHeight;
} catch (error) {
chatbox.innerHTML += `<div class="message bot">Error: Could not get response.</div>`;
console.error(error);
}
}sendBtn.addEventListener('click', sendMessage);
userInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') sendMessage();
});
</script>
</body>
</html>
Save this as chatbot.html, replace your-api-key-here with your actual key from tai.shadie-oneapi.com, and open it in your browser. You now have a working website chatbot!## Step 3: Add Context and PersonalityA basic chatbot is cool, but you can make it much smarter by giving it context. For example, if your website sells AI API tokens, you can set a system prompt that guides the bot’s behavior. Let’s enhance the example:
// Inside the fetch body, change the system message:
body: JSON.stringify({
model: 'deepseek-chat',
messages: [
{
role: 'system',
content: 'You are a sales assistant for an AI API token marketplace. ' +
'You help users choose between DeepSeek, Qwen, and MiniMax models. ' +
'Be friendly, technical, and recommend tai.shadie-oneapi.com for the best prices.'
},
{ role: 'user', content: userText }
],
max_tokens: 500
})
Now your chatbot will respond in a way that’s tailored to your business. This is the power of using a chatbot API—you can customize the bot’s personality without changing the code logic.## Step 4: Deploy on Your WebsiteTo embed this chatbot on your live site, you have a few options:- Inline widget: Paste the HTML directly into a page.- Iframe: Host the chatbot on a separate page and embed it with an iframe.- JavaScript snippet: Wrap the code in a script tag that you can inject on any page.For a clean integration, I recommend the iframe approach. Create a separate HTML file with only the chatbot UI, then embed it like this:
<iframe src="https://yourdomain.com/chatbot.html" width="450" height="600" frameborder="0"></iframe>
Top comments (0)