Recommended Free Tools
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
The best way to embed ChatGPT in 2026 is usually ChatKit. It provides an embeddable chat surface, while still requiring your server to authenticate visitors, create a session, and return a short-lived client secret. Choose hosted ChatKit for the quickest launch, self-hosted ChatKit when infrastructure and data residency are strategic requirements, the vanilla JavaScript component for a static site, the React package for a React application, or a completely custom OpenAI API interface when you need to own every part of the experience.
This guide compares those five paths, shows the security boundary each one requires, and explains how to choose an approach that will remain maintainable through 2026. The browser should never contain a long-lived API key, regardless of which frontend method you select.
Five ways to put ChatGPT on a website
These methods are not five unrelated chatbot products. They are five integration patterns around OpenAI’s current embeddable chat surface and APIs. Hosted ChatKit and self-hosted ChatKit use the same general chat experience but place different parts of the runtime under your control. Vanilla JavaScript and React are frontend choices for ChatKit. A custom API interface replaces the ready-made surface with your own UI and backend.
| Method | Implementation speed | Infrastructure and data control | Authentication responsibility | UI customization | Best fit |
|---|---|---|---|---|---|
| Hosted ChatKit | Highest; managed chat surface | Lower; follows the hosted workflow | Your server authenticates users and mints a short-lived client secret | Branded widgets, actions and themes within ChatKit’s model | Most sites that want a production chat quickly |
| Self-hosted ChatKit | Medium to low | Highest; your infrastructure, deployment and data boundary | Your backend owns authentication and session handling | ChatKit customization plus your orchestration | Custom authentication, data residency or on-premises requirements |
| Vanilla JavaScript ChatKit component | High for static or server-rendered sites | Depends on hosted or self-hosted backend | Uses the same server-side session exchange | Web-component options, widgets, actions and themes | Sites without a React build pipeline |
| React ChatKit | High for existing React teams | Depends on hosted or self-hosted backend | Uses the same server-side session exchange | Typed, component-based integration plus ChatKit features | React and modern frontend applications |
| Custom OpenAI API chat UI | Lowest initially | Highest; you own UI, storage, policy, tools and deployment | Entirely your backend’s responsibility | Unlimited, including non-chat workflows | Products requiring a unique interaction model or deep domain logic |
“Fast” does not mean “client-only.” Every production option needs a server boundary for identity, secrets, rate limits and policy. The frontend choice determines how you mount the experience; it does not remove those responsibilities.
#1 Best Overall
How hosted ChatKit works
Hosted ChatKit is OpenAI’s managed route for an embeddable chat. Your application remains responsible for knowing who the visitor is. It then asks your server to create a ChatKit session for that user. The server supplies a unique user value and returns a short-lived client secret to the browser. The browser uses that secret to mount the chat surface.
Request flow
- Authenticate the visitor. Use your normal website login, membership cookie or other identity system. Do not mint an anonymous session that can access private account data unless your product explicitly permits it.
- Call a server endpoint. The browser calls an endpoint on your domain, such as
/api/chatkit/session. Keep this route behind the same authorization checks used by the rest of your application. - Create the ChatKit session server-side. Your backend calls the ChatKit session service with its protected credentials and passes the user’s unique identifier. The identifier should be stable for that account and should not be a secret.
- Return only the short-lived client secret. Send the session response to the browser over HTTPS. Never send a long-lived OpenAI API key or other master credential.
- Mount ChatKit. Load the ChatKit client and give it a function that obtains the client secret from your endpoint. The chat surface can then establish its session.
- Enforce authorization in your backend. A valid ChatKit session is not a substitute for checking whether a user may read an order, edit a record or invoke a paid operation.
When hosted ChatKit is the right choice
- You want a working chat surface without designing message rendering, streaming states and conversation controls.
- Your team can accept the hosted workflow and its operational boundaries.
- You need branded presentation, interactive widgets, actions and themes but do not need to replace the entire conversation UI.
- You prefer a managed client lifecycle over operating the chat runtime yourself.
What hosted ChatKit does not do for you
It does not authenticate your website users, decide what data a user may access, or validate business actions. It also does not justify putting credentials in JavaScript. Treat the browser bundle as public code and put all trust decisions on the server.
Self-hosted ChatKit for control and residency
Self-hosted ChatKit runs the advanced integration on your infrastructure. OpenAI positions this path for custom authentication, data-residency requirements, on-premises deployment and bespoke agent orchestration. You gain a wider operational boundary, but you also inherit the work that a managed path would otherwise hide.
Free tools Windows power users keep installed
One-click scans. No signup required.
What you must operate
- A backend that authenticates users and creates sessions.
- Deployment and scaling for the ChatKit integration and any agent or tool services.
- Secret storage, key rotation, network controls and audit logging.
- Monitoring for latency, errors, usage limits and failed tool calls.
- Data-retention, deletion and regional-routing policies appropriate to your users.
- Release management when ChatKit or an underlying model changes.
Self-hosting is not simply a way to obtain a different stylesheet. Choose it when infrastructure ownership is a product, compliance or architecture requirement. If the only goal is to change colors and add a few actions, hosted ChatKit is usually less work.
A practical self-hosted rollout
- Document the trust zones: browser, application API, ChatKit runtime, model calls, tools and data stores.
- Implement identity propagation so the authenticated account is represented consistently in every service.
- Keep model and tool credentials in a server-side secret manager; expose only narrowly scoped, short-lived session material to the browser.
- Define which conversations, files and tool results may be retained and for how long.
- Add health checks, structured logs and alerts before inviting real users.
- Test regional failure, expired sessions, revoked users and tool timeouts as deliberately as successful chats.
Vanilla JavaScript ChatKit on a static site
The web-component route is the cleanest fit when your site has no React application. Load the ChatKit script, place an <openai-chatkit> element where the chat should appear, and configure it with setOptions. The component still obtains a client secret from your server; static hosting does not remove the need for a small authenticated backend.
Minimal mounting pattern
<script src='https://cdn.platform.openai.com/deployments/chatkit/chatkit.js'></script>
<openai-chatkit id='support-chat'></openai-chatkit>
<script>
const chat = document.querySelector('#support-chat');
chat.setOptions({
api: {
getClientSecret: async () => {
const response = await fetch('/api/chatkit/session', {
credentials: 'include'
});
if (!response.ok) throw new Error('Unable to start chat');
const data = await response.json();
return data.client_secret;
}
}
});
</script>The exact option surface can evolve with the ChatKit deployment, so use the current ChatKit web-component reference for additional properties. The important boundary in this pattern is stable: the callback asks your server for a short-lived secret, and no permanent credential appears in the page source.
Static-site considerations
- Host the session endpoint on a trusted origin and configure CORS narrowly if it is separate from the site.
- Send the visitor’s normal authentication cookie or access token using your established security pattern.
- Use a content-security policy that allows the ChatKit script and the endpoints you intentionally require.
- Reserve space for the component so opening the chat does not shift the page layout.
- Handle the unauthenticated response with a sign-in prompt rather than repeatedly retrying the session request.
React ChatKit integration
React teams can install the first-party package and render ChatKit as a component. This keeps the chat lifecycle inside React while your server continues to own identity and secret creation.
Installation and component shape
npm install @openai/chatkit-reactimport { ChatKit, useChatKit } from '@openai/chatkit-react';
export function SupportChat() {
const { control } = useChatKit({
api: {
getClientSecret: async () => {
const response = await fetch('/api/chatkit/session', {
credentials: 'include'
});
if (!response.ok) throw new Error('Unable to start chat');
const data = await response.json();
return data.client_secret;
}
}
});
return <ChatKit control={control} />;
}Use the package’s current TypeScript definitions for the complete option list and event types. Keep session creation outside the component’s render path, avoid creating a new client on every render, and make the component’s loading and error states visible to users. In a server-rendered React application, call the browser-only ChatKit code from a client component and keep all secret-bearing operations in server routes.
React-specific failure points
- Creating the hook conditionally can break React’s hook rules and leave the chat uninitialized.
- Mounting the component before your authentication state is known can create an unnecessary unauthenticated session attempt.
- Passing account or role data directly from client state as an authorization decision is unsafe; the server must derive permissions from its own session.
- Unmounting and remounting the chat on every route transition can discard conversation state. Decide whether the chat should persist at the application shell or intentionally reset.
Custom OpenAI API chat UI
A custom interface gives you complete control over layout, message formats, conversation storage, tool invocation and policy. It also gives you the largest surface area to build and maintain. Use the advanced ChatKit integration architecture as a current reference for separating the browser, application server, agent logic and tools, even if your final UI is entirely custom.
Rank #4
Core components
- Browser UI: renders messages, streaming state, retries, citations or domain-specific cards.
- Application API: authenticates the user, applies rate limits, validates input and creates or resumes a conversation.
- Conversation and policy layer: stores only the history you need, applies moderation and business rules, and decides which tools are available.
- Model gateway: keeps OpenAI credentials private, selects the permitted model configuration and records usage metadata.
- Tool services: perform account, search or workflow operations only after server-side authorization and argument validation.
Build sequence
- Define the user jobs the chat must complete and the actions it must never perform.
- Choose a conversation identifier that cannot be guessed to access another user’s history.
- Implement a server endpoint that accepts a user message, checks identity and policy, then calls the model.
- Stream responses if your UX benefits from progressive output, while making cancellation and retry behavior explicit.
- Persist messages with retention and deletion controls; do not store sensitive prompts by default just because logging is convenient.
- Add tool schemas that reject unknown fields, enforce ownership and return safe error messages.
- Measure latency, failures and cost by account or feature so operations can distinguish a model problem from an application problem.
Choose this route when a ready-made chat surface would constrain a core product workflow—for example, when every response must be a structured transaction, a visual editor update or a regulated audit event. For a conventional support assistant, the engineering cost is often harder to justify than ChatKit.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Widgets, actions and themes
ChatKit supports more than plain text. Widgets can present structured information, actions can let a user request an operation, and themes can align the surface with your brand. Treat an action as an API request, not as a trusted button click. The server must confirm the user’s identity, authorization, current record state and allowed parameters immediately before making a change.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
For example, a “cancel appointment” action should submit an appointment identifier to your backend, verify that the signed-in user owns it and that cancellation is still allowed, then return a result the chat can display. Never let a client-supplied action payload directly trigger payment, deletion, account changes or access to another user’s data.
Security requirements shared by all five methods
- Protect credentials: long-lived API keys belong in server-side secret storage, never HTML, JavaScript bundles, mobile code or browser local storage.
- Authenticate before session creation: identify the visitor before minting a ChatKit client secret and pass a unique user value for that account.
- Authorize every data access: conversation context and tool calls must be filtered by server-side ownership and role checks.
- Limit abuse: apply request limits, message-size limits and account-level quotas at your backend.
- Validate actions: treat widget and tool arguments as hostile input; use allowlists and typed validation.
- Protect transport: use HTTPS, secure cookies, CSRF defenses appropriate to your authentication model and strict origin settings.
- Plan retention: document what chat content is stored, who can access it and how a user can request deletion.
- Observe safely: log identifiers and error classes without copying sensitive prompts or secrets into unrestricted logs.
2026 lifecycle consideration
OpenAI says existing Agent Builder-hosted workflows are in a transition window scheduled to end on November 30, 2026. New projects should plan around advanced ChatKit integrations rather than building a dependency on a hosted workflow that is scheduled to shut down. If you already use an Agent Builder-hosted flow, inventory its deployment, identify the equivalent ChatKit integration, and test authentication, tools, conversation continuity and rollback before that date.
How to choose in five decisions
- Need a chat this quarter? Start with hosted ChatKit.
- Need React-native composition? Use the React package with hosted or self-hosted ChatKit.
- Have a static or server-rendered site? Use the vanilla JavaScript web component and add a small session endpoint.
- Must control residency, deployment or orchestration? Select self-hosted ChatKit and budget for operations.
- Is the conversation itself a unique product workflow? Build a custom OpenAI API UI and own the additional engineering.
Troubleshooting checklist
The widget never appears
Confirm the ChatKit script loaded without a content-security-policy or network error, the custom element is present after the script executes, and setOptions runs on the actual element. Check the browser console before changing backend code.
Session creation returns unauthorized
Verify that the browser sends the expected cookie or access token, that your server recognizes the account, and that the endpoint is not relying on a user identifier supplied only by the browser. Return a clear sign-in response instead of exposing internal authentication details.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallChat loads, but an action fails
Inspect the server’s authorization and argument validation. A rendered action proves only that the interface offered it; it does not prove that the current user may perform it or that the underlying record is still in a valid state.
Conversations disappear after navigation
Decide whether state should live in the application shell, a durable conversation store or the current page. In React, avoid unnecessary unmounts; in a custom UI, persist a server-side conversation identifier rather than trusting a mutable client-only value.
Implementation checklist
- Select hosted ChatKit, self-hosted ChatKit, vanilla JavaScript, React or a custom API UI based on the control and workflow decisions above.
- Create an authenticated server endpoint for session or message requests.
- Generate a stable, unique user value on the server.
- Keep long-lived credentials out of all browser-delivered code.
- Configure themes, widgets and actions only after authorization and retention rules are documented.
- Add rate limits, logging, monitoring and a tested failure path.
- Test expired sessions, signed-out users, duplicate actions, tool timeouts and denied access.
- Review the November 30, 2026 Agent Builder-hosted workflow deadline if you have an existing deployment.
Bottom line
For most websites, hosted ChatKit is the shortest path to a polished ChatGPT experience because it combines a managed surface with a clear server-side session exchange. Use its JavaScript component on a non-React site or its React package in a React application. Move to self-hosting when residency, on-premises deployment or orchestration control outweighs operational cost. Build a custom API interface only when your product needs behavior and UI that ChatKit cannot provide. Whichever path you choose, keep credentials and authorization on your server.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
