A Step-by-Step Guide to Integrating ChatGPT Into Your Website
Adding ChatGPT to your website gives visitors a direct, human-like way to interact with your product or service. At Devslane, we have seen firsthand how a well-designed chatbot can transform engagement and support.
Why Add ChatGPT to Your Website?
Back in 2017, we built chatbots for citibot.io and aqai.io using AWS Lex, before large language models were widely known. As generative AI matured, we quickly shifted to ChatGPT to make the experience more natural and useful.
The results speak for themselves. Citibot now helps people across the United States report neighborhood issues to local authorities through web chat, text, or WhatsApp. The bot supports more than 70 languages, runs 24/7, and handles 88 percent of communications. After adding GPT, citizen engagement grew by 500 percent.
Step-by-Step: How to Add ChatGPT to Your Website
Integrating ChatGPT into a website involves three main steps:
- Getting an API key
- Setting up a backend
- Building a frontend UI that connects everything
Let’s walk through this from scratch.
1. Get OpenAI API Access
Go to OpenAI Platform and sign up (or log in if you already have an account).
On the top-right, click Start building.
Since it’s your first time, you’ll be prompted to create an organization:
- Enter an Organization name (e.g., My Website Project).
- Click Continue.
You’ll then see Invite your team — you can skip this if you’re working solo.
Next, you’ll see Make your first API call:
- Enter an API key name (e.g., Website Chat Key).
- Enter a Project name (e.g., Chatbot Demo).
- Click Generate API key.
You’ll now see:
- The API key value (starts with sk-...).
- A copy button to copy it safely.
Store this API key securely (you’ll use it in the project setup):
- Add OPENAI_API_KEY=sk-yourapikey to a .env file.
- Never expose this key in frontend code or remote repositories.
Finally, you’ll see Add some API credits — you can either add a payment method now or skip it if you want to test within free limits (if available).
💡 Once your organization is created, you can always return to your keys here: https://platform.openai.com/api-keys
2. Set Up Your Project
We’ll use Node.js + Express for the backend and vanilla JS (or React) for the frontend.
Create the project folder
Run the following commands:
mkdir chatgpt-integration
cd chatgpt-integration
npm init -y && npm pkg set type=module main=server.js
npm install express cors dotenv openai
This installs the following packages:
- express → backend server
- cors → allow frontend to call backend
- dotenv → load environment variables
- openai → official OpenAI SDK
Store Your API Key Securely
Create a .env file at the project root.
- Add OPENAI_API_KEY=sk-yourapikeyhere in .env file
- Add .env to .gitignore (create if not present) so it’s never pushed to remote repositories.
3. Build the Backend API
Create a file called server.js in above created project folder with the following code:
import express from "express";
import dotenv from "dotenv";
import cors from "cors";
import OpenAI from "openai";
dotenv.config();
const app = express();
app.use(cors());
app.use(express.json());
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY,
});
// Chat endpoint
app.post("/api/chat", async (req, res) => {
try {
const { message } = req.body;
const response = await openai.chat.completions.create({
model: "gpt-4o-mini", // you can use gpt-4o, gpt-4.1, gpt-3.5-turbo, etc.
messages: [
{ role: "system", content: "You are a helpful assistant." },
{ role: "user", content: message },
],
});
res.json({ text: response.choices[0].message.content });
} catch (err) {
console.error(err);
res.status(500).json({ error: err.message });
}
});
app.listen(5000, () => console.log("Server running on http://localhost:5000"));
Run following code in terminal to start backend server:
node server.jsYour backend is now live at: http://localhost:5000/api/chat
4. Build the Frontend
Create a simple frontend page using HTML + Vanilla JS (or a framework like React).
Example index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ChatGPT Integration</title>
<style>
#chat { width: 400px; margin: 20px auto; }
#messages { height: 300px; border: 1px solid #ccc; overflow-y: auto; padding: 10px; }
.msg { margin: 5px 0; }
.user { color: blue; }
.bot { color: green; }
</style>
</head>
<body>
<div id="chat">
<div id="messages"></div>
<input id="input" placeholder="Type your message…" />
<button id="send">Send</button>
</div>
<script>
const messagesDiv = document.getElementById("messages");
function appendMessage(sender, text) {
const div = document.createElement("div");
div.className = "msg " + sender.toLowerCase();
div.textContent = `sender: text`;
messagesDiv.appendChild(div);
messagesDiv.scrollTop = messagesDiv.scrollHeight;
}
document.getElementById("send").onclick = async () => {
const input = document.getElementById("input");
const userMsg = input.value;
appendMessage("You", userMsg);
input.value = "";
const reply = await fetch("http://localhost:5000/api/chat", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ message: userMsg })
}).then(r => r.json());
appendMessage("Bot", reply.text);
};
</script>
</body>
</html>
Open this file in your browser → start chatting with ChatGPT.
Devslane Is Your Partner In Delivering Results
Integrating ChatGPT into your website transforms the way visitors interact with your business. With years of experience building bots and delivering real results, Devslane helps you add ChatGPT and boost engagement from day one. Reach out to us if you have any issues with integrating ChatGPT to your website.
FAQs (Frequently Asked Questions)
Why should I add ChatGPT to my website?
Adding ChatGPT to your website transforms the way visitors interact with your content by providing instant, intelligent responses, enhancing user engagement, and improving customer support efficiency.
What are the benefits of integrating ChatGPT into my website?
Integrating ChatGPT offers benefits such as 24/7 customer assistance, personalized user experiences, streamlined communication, and increased conversion rates by addressing visitor queries promptly.
How do I add ChatGPT to my website step-by-step?
To add ChatGPT to your website, follow these steps: 1) Access the integration guide, 2) Set up your API credentials, 3) Embed the chatbot code into your website’s backend, and 4) Customize the chatbot settings to fit your brand and needs.
What experience does Devslane have in delivering ChatGPT solutions?
Devslane has extensive experience in building chatbots since 2017 with projects like citibot.io and aqai.io, making them a reliable partner in delivering effective ChatGPT integration results for your website.
Can ChatGPT improve customer engagement on my site?
Yes, by providing real-time, conversational assistance tailored to visitor inquiries, ChatGPT significantly improves customer engagement and satisfaction on your website.
How do I add ChatGPT to my website step-by-step?
With proper guidance and resources like the provided step-by-step documentation, integrating ChatGPT is straightforward. Partnering with experts like Devslane can further simplify the process and ensure seamless implementation.