How to Add an AI Chatbot to Your Wix Website

There are three ways to add an AI chatbot to a Wix website: install Wix Smart Chat (Wix's own AI and manual chat app), install a third-party chatbot from the Wix App Market, or build a custom chatbot with Velo that calls an AI model like Claude from your site's backend. The first takes ten minutes, the second an hour, and the third an afternoon, with full control over what the bot knows, says and does.

Key takeaways

• As of March 2026, Wix AI Site Chat is no longer available on new sites; Wix Smart Chat replaces it and combines AI answers with manual live chat.
• App Market bots are quick and fine for FAQs. They get expensive at volume and you don't control the model or the data.
• A custom Velo chatbot keeps your API key in the Secrets Manager, runs on the backend, and can read your CMS, check bookings or hand off to a human.
• Never call an AI API from page (frontend) code. Your key would be visible to anyone who opens the browser's developer tools.
• The code below is a complete, working starting point: a backend web module, a page script and a short system prompt.

We build chatbots on Wix for clients regularly. Recent ones include custom AI assistants built with Velo and custom elements for Canada Medical Notes, US Medical Notes and the Cyprus and Greece real-estate firm Sharon Homes. Here's how to choose an approach, and the exact code for the custom route.

Option 1: Wix Smart Chat (fastest)

Wix Smart Chat is Wix's current chat app. It handles AI-generated answers based on your site content and training, plus manual replies from your Wix Inbox, in one widget. Wix retired AI Site Chat for new installs in March 2026 and points new sites to Smart Chat instead.

To set it up: open the Wix App Market from your dashboard, search for Wix Smart Chat, install it, then follow the setup to let it learn from your site and add any extra training answers. It's free to install; check Wix's current limits on AI conversations for your plan.

Good for: small businesses that want "answer common questions and capture leads" with no setup beyond pointing it at the site.

Limits: the AI's knowledge is your site content plus whatever Q&A you add. It can't query your CMS, call external systems or follow custom logic. Reviews are mixed on accuracy, and Wix itself adds disclaimers, so test it with the questions your customers actually ask before relying on it.

Option 2: A third-party chatbot from the App Market

Dozens of AI chatbot apps are listed in the App Market, from rule-based FAQ bots to GPT-style assistants that crawl your pages. Installation is usually "add app, paste your site URL, customize the widget."

Good for: teams that want more control than Smart Chat (custom personas, multiple knowledge sources, lead forms inside the chat) without writing code.

Limits: monthly subscriptions that scale with message volume, limited ability to integrate with your Wix CMS or Bookings data, your customers' conversations stored on someone else's servers, and another script on every page (which affects speed; see Is Wix good for SEO?).

If you take this route, read the app's data policy, check whether it supports your language, and test how it handles a question it doesn't know. The bad ones make things up.

Option 3: Build a custom chatbot with Velo (most control)

This is what we build for clients who need the bot to do more than answer FAQs: look up an order, check availability, qualify a lead into the CRM, or answer from a private knowledge base. The architecture is simple:

1. A backend web module (.web.js) receives the visitor's question, builds a prompt and calls the AI API with a key from the Secrets Manager.
2. A page script collects input, calls the backend and displays the reply.
3. A system prompt tells the model who it is, what it knows and what it must not do.

The example below uses Anthropic's Claude Messages API, called directly with wix-fetch because that's the HTTP client Velo's backend provides. The same structure works for OpenAI or Gemini; only the request shape and response parsing change. If you have never written Velo before, our Wix Velo tutorial for beginners covers the basics in an afternoon.

Step 1: Store the API key in the Secrets Manager

In your site dashboard, go to Developer Tools → Secrets Manager and add a secret named ANTHROPIC_API_KEY with your key from the Anthropic Console. Never paste a key into code.

Step 2: Add the page elements

In the Wix Studio editor, add a section with these elements and set their IDs in the Properties & Events panel:

• A text input: #questionInput
• A button: #sendButton
• A text element for the conversation: #chatLog (set it to a fixed height with scrolling, or use a repeater for a nicer bubble layout later)

Step 3: Backend web module

Create backend/chat.web.js and paste this in:

// backend/chat.web.js
// Runs on Wix's servers. The API key never reaches the browser.

import { Permissions, webMethod } from 'wix-web-module';
import { fetch } from 'wix-fetch';
import { secrets } from 'wix-secrets-backend.v2';
import { elevate } from 'wix-auth';

// getSecretValue needs elevated permissions in backend code
const getSecretValue = elevate(secrets.getSecretValue);

const SYSTEM_PROMPT = `You are the website assistant for Wix Engine, a web development agency.
Answer questions about the agency's services (Wix, Wix Studio, Velo, Next.js, AI chatbots, SEO).
Be brief and specific. If you don't know something, say so and offer to connect the visitor
with the team at sohaib@wixengine.com. Never invent prices, dates or guarantees.
If the visitor wants to talk to a person, tell them to use the Book a Free Call button.`;

const MAX_QUESTION_LENGTH = 1000;
const MAX_HISTORY_MESSAGES = 10; // 5 exchanges

export const askAssistant = webMethod(
  Permissions.Anyone, // any visitor can use the chat
  async (history, question) => {
    // Validate input on the backend; never trust the browser
    if (typeof question !== 'string' || question.trim().length === 0) {
      throw new Error('Please type a question.');
    }
    if (question.length > MAX_QUESTION_LENGTH) {
      throw new Error('Please keep your question under 1,000 characters.');
    }

    // Keep only the most recent messages so the prompt stays small and cheap
    const safeHistory = Array.isArray(history)
      ? history.slice(-MAX_HISTORY_MESSAGES).filter(
          (m) => (m.role === 'user' || m.role === 'assistant') && typeof m.content === 'string'
        )
      : [];

    const apiKey = await getSecretValue('ANTHROPIC_API_KEY');

    const response = await fetch('https://api.anthropic.com/v1/messages', {
      method: 'post',
      headers: {
        'content-type': 'application/json',
        'x-api-key': apiKey,
        'anthropic-version': '2023-06-01',
        // Lets Anthropic re-run a declined request on a fallback model
        'anthropic-beta': 'server-side-fallback-2026-07-01'
      },
      body: JSON.stringify({
        model: 'claude-opus-5-5',
        max_tokens: 1024, // chat replies are short on purpose
        system: SYSTEM_PROMPT,
        fallbacks: 'default',
        messages: [...safeHistory, { role: 'user', content: question.trim() }]
      })
    });

    if (!response.ok) {
      // Log the detail for you, return a plain message to the visitor
      console.error('Claude API error', response.status, await response.text());
      throw new Error('The assistant is unavailable right now. Please email sohaib@wixengine.com.');
    }

    const data = await response.json();

    if (data.stop_reason === 'refusal') {
      return "I can't help with that one. Email sohaib@wixengine.com and a person will reply.";
    }

    // The reply is one or more text blocks; join them
    const reply = data.content
      .filter((block) => block.type === 'text')
      .map((block) => block.text)
      .join('\n')
      .trim();

    return reply || 'Sorry, I could not come up with an answer. Please try rephrasing.';
  }
);

What's happening: webMethod exposes the function to page code with explicit permissions. elevate lets backend code read the secret. fetch from wix-fetch makes the HTTPS request. The response is checked with response.ok, the refusal stop reason is handled, and only the text blocks are returned to the page.

Step 4: Page code

Select the page with your chat section and paste this into its code panel:

// Page code
import { askAssistant } from 'backend/chat.web';

// Conversation history kept in memory for this page visit
let history = [];

$w.onReady(() => {
  $w('#sendButton').onClick(sendMessage);

  // Let visitors press Enter to send
  $w('#questionInput').onKeyPress((event) => {
    if (event.key === 'Enter') {
      sendMessage();
    }
  });
});

async function sendMessage() {
  const question = $w('#questionInput').value.trim();
  if (!question) return;

  $w('#questionInput').value = '';
  appendMessage('You', question);
  $w('#sendButton').disable();
  appendMessage('Assistant', 'Thinking…');

  try {
    const reply = await askAssistant(history, question);
    replaceLastMessage('Assistant', reply);
    history.push({ role: 'user', content: question });
    history.push({ role: 'assistant', content: reply });
  } catch (err) {
    replaceLastMessage('Assistant', err.message || 'Something went wrong. Please try again.');
  } finally {
    $w('#sendButton').enable();
  }
}

// Simple text-based log. Swap for a repeater when you want chat bubbles.
const lines = [];

function appendMessage(sender, text) {
  lines.push(`${sender}: ${text}`);
  $w('#chatLog').text = lines.join('\n\n');
}

function replaceLastMessage(sender, text) {
  lines[lines.length - 1] = `${sender}: ${text}`;
  $w('#chatLog').text = lines.join('\n\n');
}

Click Preview, type a question, and you have a working AI assistant on your Wix site. Publish when you're happy with the answers.

Step 5: Make it know your business

A system prompt alone gives you a polite generalist. To make the bot useful, give it your data. The simplest upgrade is to query your CMS inside the web method and add the results to the prompt:

// Inside askAssistant, before calling fetch:
import wixData from 'wix-data'; // move this import to the top of the file

const faq = await wixData.query('FAQ').limit(50).find();
const knowledge = faq.items
  .map((item) => `Q: ${item.question}\nA: ${item.answer}`)
  .join('\n\n');

// Then pass it to the model:
// system: `${SYSTEM_PROMPT}\n\nUse these facts when relevant:\n${knowledge}`

For larger knowledge bases (hundreds of pages, PDFs, product catalogs) you'd move to retrieval: store chunks with embeddings, find the relevant ones per question, and include only those. That's a bigger build, covered on our AI chatbot development and AI integration pages.

Security and cost: the parts people skip

• Backend only. The API key is read in a .web.js file through the Secrets Manager. Page code can call askAssistant, but it can never see the key.
• Validate on the backend. Length limits and type checks live in the web method, because anyone can call a Permissions.Anyone web method directly, not just your page.
• Rate limiting. The example has none. For a public site, add a simple per-visitor limit (count calls per session in a CMS collection, or require a site member login for the bot) before you launch, or a bot can run up your API bill.
• Log conversations. Insert each exchange into a private CMS collection from the backend using wixData.insert(..., { suppressAuth: true }). It's how you find out what customers really ask, and it's the audit trail if the bot says something wrong.
• Cost control. Keep max_tokens low, trim history, and cache repeated knowledge in the system prompt. Most small-business chatbots cost a few dollars a month in API usage.
• Tell people it's a bot. A one-line disclosure in the widget is good practice and required in some jurisdictions.

Which option should you choose?

Start with Smart Chat if you've never run a chatbot. Move to a custom build when you find yourself wishing it could look something up.

How Wix Engine can help

We build custom AI chatbots on Wix and beyond: knowledge-base assistants with retrieval, lead-qualifying bots that write to your CRM, and support bots that check orders and bookings, starting from $2,000. Everything runs on backend code with your keys in the Secrets Manager. See AI chatbot development or Book a Free Call and we'll scope it with you.

FAQ

Can I add ChatGPT to my Wix website?

Yes. Install an App Market chatbot that uses OpenAI's models, or build your own with Velo: a backend web module reads your OpenAI key from the Secrets Manager and calls the API with wix-fetch, exactly like the Claude example above with a different request body. Never call the API from page code.

Does Wix have a built-in AI chatbot?

Yes. Wix Smart Chat combines AI answers (trained on your site content) with manual live chat through Wix Inbox. It replaced Wix AI Site Chat for new sites in March 2026. Install it from the App Market; it's free to install, with limits that depend on your plan.

Is it safe to put an AI API key in Wix?

It's safe when the key lives in the Secrets Manager and is read only from backend .web.js code. It is not safe in page code, public files or an HTML embed, because visitors can read anything the browser downloads. Also keep input validation and rate limits on the backend.

How much does an AI chatbot for a Wix site cost?

Wix Smart Chat is free to install. App Market bots typically run $10–$100+ per month. A custom Velo chatbot with Wix Engine starts from $2,000 plus API usage, which for most small businesses is a few dollars a month. We'll publish a detailed cost guide soon.

Can the chatbot book appointments or check orders?

With a custom Velo build, yes. The backend can query Wix Bookings availability, look up a Wix Stores order by number (after verifying the customer), or create a CRM contact, then let the model respond with the result. This is the main reason clients choose a custom bot over an app, and it's the kind of work our Wix Velo development team does.