How to Build an AI Chatbot for Your Website Using API

📅 2026-05-26 · 5 min read

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 Key

First, 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 Logic

We’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 Personality

A 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 Website

To 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>

Tips for a Production-Ready Chatbot

Rate limiting: Add a simple cooldown to prevent spam (e.g., disable the send button for 2 seconds after each message).
Error handling: Show a friendly message if the API is down, and log errors for debugging.
Conversation memory: Store the message history in an array and send it with each request so the bot remembers context.
Styling: Match your website’s brand colors and fonts for a seamless look.

Why Use tai.shadie-oneapi.com for Your API Tokens?

You might be wondering where to get reliable, affordable API access for your chatbot. tai.shadie-oneapi.com provides tokens for DeepSeek, Qwen, and MiniMax at competitive rates. They offer:

Instant activation — no approval delays
High rate limits suitable for production chatbots
Multiple model support in one account
Pay-as-you-go pricing with no hidden fees

I use them for my own projects, and they’ve been rock-solid. Plus, their API is fully compatible with the OpenAI format, so the code examples above work with zero changes for DeepSeek, Qwen, or MiniMax.

Next Steps

You’ve just built a fully functional AI chatbot for your website in under 20 lines of core code. From here, you can:

Add a typing indicator while the bot “thinks”
Implement a feedback button (thumbs up/down) to improve responses
Connect to a backend database to remember user preferences
Switch between models (try Qwen for creative writing, MiniMax for fast responses)

The only limit is your imagination—and your API budget. Speaking of which, if you haven’t grabbed your API key yet, head over to tai.shadie-oneapi.com and get started for just a few cents. You’ll be amazed at how much value a smart chatbot can add to your site.

“Building your own chatbot is empowering. You’re not just using a tool—you’re crafting an experience.”

Go ahead, try it now. Copy the code, insert your key, and see your website chatbot come to life. If you have questions, the API documentation at tai.shadie-oneapi.com has you covered. Happy coding!