Add an AI Customer Service Chatbot to Your Website with Dify: Knowledge Base, Embed Code and Daily Operation

A support chatbot on your website can answer the same questions your team answers every day, such as plans, prices, delivery, payment methods and setup steps, at any hour and in the visitor's language. Dify is an open-source platform for building AI applications with a visual editor, a built-in knowledge base and ready-made website embedding. This guide uses a self-hosted Dify to build a chatbot that answers from your own documents, embeds it on your website as a chat bubble, and covers the day-to-day work that makes it good: reviewing conversations, improving answers and keeping the knowledge current.

Step 1: Set Dify's Public Address

The embed code and file links use the addresses configured in Dify. If they still point to an IP address or localhost, the chat bubble will not load on your website. Set them to your HTTPS domain and restart:

# In dify/docker/.env, set your HTTPS domain:
CONSOLE_API_URL=https://dify.example.com
CONSOLE_WEB_URL=https://dify.example.com
SERVICE_API_URL=https://dify.example.com
APP_API_URL=https://dify.example.com
APP_WEB_URL=https://dify.example.com
FILES_URL=https://dify.example.com

# Then apply the change:
cd dify/docker && docker compose up -d

Step 2: Connect the Models

In Settings > Model Provider, install the provider you want to use. For a local model, install the Ollama provider and add two models: a chat model and an embedding model.

ollama pull qwen2.5:7b
ollama pull nomic-embed-text

# Dify runs in Docker, so Ollama must accept connections from containers
# (OLLAMA_HOST=0.0.0.0 plus the firewall rules from the Ollama guide). Check:
curl -s http://172.17.0.1:11434/api/tags | head -c 300; echo

# In Dify, add both models with the base URL:  http://172.17.0.1:11434
#   qwen2.5:7b        model type: LLM
#   nomic-embed-text  model type: Text Embedding

The Ollama side is covered in running a local LLM with Ollama. Then set both as defaults in the system model settings. You can add a cloud provider as well and choose per app which model to use.

Step 3: Build the Knowledge Base

1. Open Knowledge, create a knowledge base and upload your FAQ, product pages, pricing, shipping and payment information, and setup guides.
2. Keep the default general chunking for normal documents. For an FAQ file, put one question and its answer per paragraph so each pair becomes one chunk.
3. Choose the high-quality index with your embedding model and hybrid or vector search, then save and let Dify process the files.
4. Use the retrieval test to type real customer questions and check that the right passages come back.

Clean, current documents matter more than any setting: remove old price lists, and write important answers out in full instead of relying on scattered mentions. For architecture choices for larger deployments, see building a private AI support knowledge base on a dedicated server.

Step 4: Create the Chatbot

In Studio, create a new Chatbot app. In its editor, add the knowledge base as context, select the chat model with a low temperature (around 0.3) and write the instructions:

You are the online assistant of ACME Hosting.
Answer only with information from the context. If the context does not contain
the answer, say you are not sure and suggest contacting support at [email protected].
Keep answers under 120 words and reply in the visitor's language.
Never promise discounts, refunds or delivery times that are not in the context.
If the question is unrelated to our products and services, politely decline.

Also add a conversation opener with three or four suggested questions, and turn on citations so you can see which document each answer used. Test with at least 20 real questions from your tickets and chats in the preview panel before publishing.

Step 5: Publish and Embed It on Your Website

Publish the app, then choose the option to embed it into your site and pick the chat bubble. Dify generates the exact code for your app; it looks like this:

<script>
  window.difyChatbotConfig = {
    token: 'your-app-token',
    baseUrl: 'https://dify.example.com'
  }
</script>
<script src="https://dify.example.com/embed.min.js" id="your-app-token" defer></script>
<style>
  #dify-chatbot-bubble-button { background-color: #009aff !important; }
</style>

Paste it before the closing </body> tag of your site template. In WordPress, a header-and-footer code plugin does this without editing the theme. The same app also has a public web page and an API if you want a full-page chat or your own front end.

Step 6: Run It Day to Day

• Review conversations weekly in the app's logs. Look for questions it could not answer and answers that were wrong, then fix the documents.
• Use annotations for frequent questions: save an approved answer, and with annotation reply enabled the bot returns it whenever a similar question is asked.
• Watch the monitoring page for message volume, active users and token usage, especially if a paid model is connected.
• Update the knowledge base whenever prices, plans or policies change, and delete the outdated files.
• Offer a human: mention your support contact in the opener, and keep refunds, complaints and account changes with your team.
• Limit abuse: a public chatbot can be spammed. Rate-limit Dify's API paths per IP in Nginx or with your CDN if you see unusual traffic.

FAQ

Dify or AnythingLLM?

Dify is built for publishing AI apps: public chat bubbles, APIs, workflows, logs and annotations. AnythingLLM is the quicker choice for an internal document assistant for your own team, see building a private RAG chatbot with AnythingLLM.

The chat bubble does not appear on my website

Open the browser's developer console. Most often the URLs from Step 1 still point to an IP address or http://, so the browser blocks the script on an HTTPS site, or a security plugin or content security policy blocks scripts from another domain.

Can the same bot answer on Telegram?

Yes. Dify apps have an API that other tools can call. Alternatively, build the Telegram bot directly in n8n, see building an AI customer service Telegram bot with n8n.

Still stuck after following these steps? Open a support ticket and the IMIDC 24/7 technical team will help. Include the server IP, your Dify version and domain, the output of docker compose ps in the dify/docker folder and any browser console errors so we can pinpoint the issue faster.