How to Add an AI Chatbot to Your Website

An AI chatbot on your site can answer common questions, qualify leads, and take the first pass at support around the clock. On your Ultra Web Hosting account you have two practical ways to add one: drop in a hosted third-party widget that runs entirely in someone else's dashboard, or build your own bot that calls an LLM API from a small backend you host with us. This guide covers both, the security rule that separates a working custom bot from a leaked API key, and the privacy and performance details people skip.

01. What an AI Chatbot Can Do and the Two Approaches

A chatbot on your site is not just a novelty box in the corner. Done well, it earns its place by doing real work:

• Answer FAQs instantly, so visitors do not bounce looking for shipping times, pricing, or hours.
• Qualify leads by asking a few questions and routing serious prospects to a form or a human.
• Triage support, handling the easy tickets and collecting details on the hard ones before a person ever reads them.

There are two broad ways to get one running on a site hosted with us, and they trade off effort against control:

02. Approach A: A Hosted Third-Party Widget

This is the right choice for most sites. A hosted chatbot service does the heavy lifting: it runs the model, stores the conversations, and gives you a dashboard to shape the bot's answers. Popular options include Tidio, Intercom, Crisp, and Chatbase, along with a growing number of SaaS tools built on the OpenAI or Anthropic models. You never see an API key, because the key is theirs, not yours.

The workflow is the same across nearly all of them:

1. Sign up with the service and create a workspace or project for your site.
2. Configure the bot in their dashboard: set its greeting, upload your FAQ or docs, choose when it hands off to a human, and pick where the widget appears.
3. Copy the install snippet they give you. It is a small block of JavaScript, unique to your account, that loads the widget.
4. Paste that snippet into your site just before the closing body tag, then save and reload. The chat bubble appears.

03. Add the Widget to a Plain HTML Site

If your site is static HTML, you add the widget snippet through cPanel File Manager. The rule is simple: paste it right before the closing </body> tag so the rest of the page loads first.

1. Log in to cPanel and open File Manager (under the Files section).
2. Navigate to public_html and find the page file, usually index.html.
3. Select the file and click Edit in the top toolbar. Confirm the encoding prompt if it appears.
4. Scroll to the bottom and place your cursor just before </body>.
5. Paste the provider's snippet. It looks like the example below (yours will have a real script source and account ID).
6. Click Save Changes, then reload the page in a browser to confirm the chat bubble loads.

A typical hosted-widget snippet looks like this, with the closing tags escaped so you can see the full structure:

<!-- Paste immediately before </body> -->
<script>
  window.chatbotSettings = { accountId: "YOUR_ACCOUNT_ID" };
</script>
<script async src="https://cdn.example-chat.com/widget.js"></script>
<!-- end chatbot widget -->

04. Add the Widget to WordPress

On WordPress you have three clean ways to add the snippet, in rough order of ease:

1. Official plugin. Most major chat services publish a WordPress plugin. Install it, paste your account ID or connect the account, and the widget loads on every page with no theme edits. This is the easiest and most upgrade-safe path.
2. A headers-and-footers plugin. If the service only gives you a raw snippet, install a plugin such as one that inserts code into the header or footer, then paste the snippet into the footer box. It survives theme updates because it lives in the plugin, not the theme.
3. Theme footer or header hooks. If you run a child theme, you can add the snippet to the theme's footer template or hook it in through wp_footer. Only do this in a child theme so a parent-theme update does not wipe it out.

05. Approach B: Build Your Own With an LLM API

If you want a bot that is wired into your own data, product, or business logic, you build it against an LLM API directly. You call the OpenAI or Anthropic API from a small backend, and your front end talks only to that backend, never to the model provider. The reason for the backend is not style, it is security: your API key must stay server-side and can never appear in front-end JavaScript, which anyone can read.

You host that backend right here. Two common shapes:

• A Node.js service that exposes a single chat endpoint. Your page posts the user's message to it, the service calls the model with your key, and returns the reply. See article #487 for getting started with Node.js on your account.
• A Next.js or React app where the API route (a server function) holds the key and the React front end calls that route. See article #488 on deploying Next.js and React dashboards.

06. The One Security Rule: Keep the API Key Server-Side

This is the rule that matters more than any other in this guide. An LLM API key is a billing credential. If it is in code the browser downloads, it is public, and automated scanners find exposed keys within minutes. The fix is a thin proxy: your front end sends the user's message to your own server endpoint, and only that server, holding the key in an environment variable, calls the model.

The wrong way and the right way, side by side:

The pattern in words, no key ever leaving the server:

Browser  --POST /api/chat {message}-->  Your server endpoint
Your server  --calls model with API key-->  OpenAI / Anthropic
Your server  <--reply--  model
Browser  <--reply only--  Your server endpoint

07. Train the Bot on Your Own Content

A generic bot gives generic answers. To make it useful, ground it in your own material so it answers from your content instead of guessing. There are two common ways:

• Upload your docs and FAQ. Most hosted services and many custom setups let you feed in help articles, product pages, and a FAQ. The bot then answers from that source. This is retrieval: the bot looks up relevant passages and uses them to build its reply.
• Point a retrieval bot at your site. Some tools crawl your public pages and keep an index, so the bot's answers track your site as it changes.

08. Cost, Rate Limits, and Caching

A hosted widget usually bills a flat monthly fee. A custom API bot bills differently: LLM API usage is metered per request and per token, so an unattended or abused bot can get expensive. Three habits keep it under control:

1. Set a spend limit in the provider dashboard. Both OpenAI and Anthropic let you cap monthly usage so a runaway loop or a scraper cannot drain the account.
2. Rate-limit your own endpoint. Because every request goes through your server, you can cap how many messages a single visitor sends per minute. This also blocks the abuse that a browser-side key would have made trivial.
3. Cache common answers. If the same handful of questions come up constantly, cache the replies so you are not paying the model to answer the same thing over and over. A short server-side cache pays for itself fast.

09. Privacy, Disclosure, and Performance

Two last areas that separate a professional deployment from a sloppy one: being honest with users, and not slowing down your page.

Privacy and Disclosure

• Tell users they are talking to a bot. A short line in the greeting is enough and it sets expectations honestly.
• Mind what you collect. If the chat gathers names, emails, or order details, that is personal data. Cover it in your privacy policy and get consent where the law requires it, such as under GDPR.
• Do not send sensitive data to third parties. Passwords, payment details, and health or financial information should never be pasted into a chatbot that forwards to an outside service. Say so in the interface if needed.

Performance

Load the widget asynchronously so it does not block the rest of the page. That is what the async attribute on the script tag in Section 03 is for: the browser keeps rendering your content while the chat script loads in the background. A chat bubble is never worth a slow page.

Quick Recap: Adding an AI Chatbot

If you only take six things from this guide, take these:

1. Pick your approach: a hosted widget for speed, or a custom API bot for control over your data and logic.
2. For a widget, configure the bot in the provider's dashboard and paste their snippet just before </body> on a plain HTML site, or via a plugin on WordPress.
3. For a custom bot, host a small Node.js or Next.js backend with us that calls the LLM API.
4. Keep the API key server-side. Never put it in browser code. Proxy every request through your own endpoint.
5. Train the bot on your own content and set spend limits, rate limits, and caching to control cost.
6. Disclose the bot, mind privacy, load it asynchronously, and serve the site over HTTPS.

Last updated July 2026 · Browse all Website Tools & SEO articles