Build an AI Customer Service Chatbot Without Coding

The most important thing before building a chatbot is organizing "what questions to answer and how." This data becomes the chatbot's "knowledge." The better your data is organized, the more accurately the chatbot will respond. [How to organize your FAQs] 1. Categorize questions customers have asked over the past month. 2. Write accurate answers for each question. 3. Use the template below as a reference and organize them in Notepad. [Essential items to organize] - Store/shop name - Business hours - Customer service contact info - Shipping FAQs (delivery time, shipping fees, tracking) - Exchange/return FAQs - Product inquiry FAQs - Other frequently asked questions

# === FAQ Data Organization Template (write in Notepad) ===

# Store information
# Name: MyStore
# Business hours: Weekdays 09:00-18:00 (closed weekends and holidays)
# Customer service: 02-1234-5678, cs@mystore.com

# Shipping FAQs
# Q: How long does shipping take?
# A: Ships within 1-3 business days after payment, delivered 1-2 days after shipment. Remote areas add 2-3 days.
#
# Q: How much is shipping?
# A: Free shipping on orders over $50, $3 for orders under $50.
#
# Q: How can I track my shipment?
...

For the chatbot to actually answer customers, you need the Claude API. An API is like "a communication channel between programs." An API key is the "password" that opens this channel. [What is an API? - Simple explanation] Think of it like a cafe: - You = the cafe owner (chatbot operator) - Claude API = the barista (the AI that actually creates responses) - API key = a membership card to place orders with the barista - Customer asks a question -> chatbot sends it to Claude via API key -> Claude generates an answer -> shows it to the customer [API key setup procedure - 5 minutes] 1. Go to console.anthropic.com in your web browser 2. Click "Sign up" -> register with your email (or Google account) 3. After logging in, click "API Keys" in the left menu 4. Click the "Create Key" button 5. Enter a key name (e.g., "my-chatbot") -> click "Create" 6. Copy the generated key (a long string starting with sk-ant-...) and save it somewhere safe If you need to register a payment method, use a card that supports international payments (Visa/Mastercard). You are only charged for what you use (prepaid credits are also available). [How much does it cost?] - Pay-as-you-go pricing - About $0.002 per customer inquiry (approximately 0.2 cents) - At 100 inquiries/day: about $0.2/day, $6/month

# === How to test your API key ===
# If you want to verify that your key works:
#
# 1. Send the following prompt to Claude (claude.ai):
#
# "Can I just replace the API key part in this curl command
#  and run it in the terminal?
#  Explain what this command does."
#
# curl https://api.anthropic.com/v1/messages \
#   -H "content-type: application/json" \
#   -H "x-api-key: sk-ant-enter-your-key-here" \
#   -H "anthropic-version: 2023-06-01" \
#   -d '{"model":"claude-haiku-4-5-20241022",
#        "max_tokens":100,
...

Now ask Claude (claude.ai) to create the chatbot code, including the FAQ data you organized in Step 1. [Key point: Put the FAQ into the "system prompt"] A system prompt tells the chatbot "this is your role, and this is what you know." By putting the FAQ from Step 1 here, the chatbot can provide accurate answers. [How to ask Claude] 1. Log in to claude.ai. 2. Copy the prompt below and paste it into the chat. 3. Replace the FAQ section with your actual store information from Step 1. 4. Press Enter and Claude will generate the complete chatbot HTML code. [Save the code] 1. Copy the code Claude generated using the "Copy" button 2. Paste it into Notepad 3. Save the file as chatbot.html (.html extension is important!) 4. Double-click the file to open it in your browser and check If the preview doesn't appear in Artifacts, ask Claude additionally: "Show me a preview of this code as an Artifact."

# === Paste into claude.ai - Chatbot code generation prompt ===

"Create a customer service AI chatbot as a single HTML file.
Include all CSS and JavaScript inside the HTML file.

[Chatbot settings]
- Store name: MyStore
- Chatbot name: MyStore AI Assistant
- Notice: 24/7 auto-reply | Live agent available weekdays 9AM-6PM

[Design]
- Clean chat UI (similar to a messaging app)
- Primary color: #2563eb (blue)
- Customer messages: right side, blue speech bubbles
- Bot messages: left side, white speech bubbles
...

You must never put your API key directly in the chatbot code! Since anyone can view a web page's source code, an exposed API key means others can use the API at your expense. [Solution: Use a "proxy server"] A "proxy server" acts as a middleman between the chatbot and the Claude API. - Customer asks a question -> chatbot sends it to the proxy server -> proxy server attaches the API key and forwards it to Claude -> returns the answer - The API key is stored only on the proxy server, so it stays safe! [Create a proxy with Cloudflare Workers] Cloudflare Workers is a free server service. 1. Go to workers.cloudflare.com -> "Sign Up" -> register with email 2. After logging in, click "Workers & Pages" on the dashboard 3. Click the "Create Worker" button 4. Enter a name (e.g., "chatbot-proxy") -> click "Deploy" 5. Click the "Edit code" button -> the editor opens 6. Delete all existing code and paste the proxy code that Claude generates for you 7. Click "Save and Deploy" [Register your API key as an environment variable] 1. Workers dashboard -> click the Worker you just created 2. Click "Settings" -> "Variables" 3. Click "Add variable" 4. Name: CLAUDE_API_KEY / Value: sk-ant-api03-... (the key from Step 2) 5. Check "Encrypt" -> click "Save" [Connect the URL in your chatbot code] In the chatbot.html code, change the PROXY_URL to your Worker URL. Ask Claude: "Change the PROXY_URL to https://chatbot-proxy.my-id.workers.dev" If you get a CORS error, ask Claude: "I'm getting a CORS error. Set Access-Control-Allow-Origin to '*' in the proxy code."

# === Prompt to ask Claude for the proxy server code ===

"Create a Claude API proxy server code for Cloudflare Workers.

[Requirements]
- Allow only POST requests
- Forward requests to Claude API (https://api.anthropic.com/v1/messages)
- Read the API key from environment variable CLAUDE_API_KEY
- Set CORS headers (allow all domains, will restrict to specific domain later)
- Handle OPTIONS preflight requests
- Include error handling

Use the Cloudflare Workers export default format."

# ^ Claude will generate the proxy code.
...

Once the chatbot is working properly, embed it as a "floating button" on your existing website. A speech bubble icon appears in the bottom-right corner, and clicking it opens the chatbot. [How to embed] Add a small script to your existing website's HTML code. Ask Claude "Create a floating chatbot widget code for me." If the widget doesn't appear: - Make sure the code is inserted right before the </body> tag - Open the console with Ctrl+Shift+J in your browser to check for error messages - Send the error message to Claude and ask for a fix [How to embed on various platforms] - Shopify: Online Store > Themes > Edit code > theme.liquid (before </body>) - WordPress: Appearance > Theme Editor > footer.php - Squarespace: Settings > Advanced > Code Injection > Footer - Wix: Settings > Custom Code > Body - End

# === Prompt to ask Claude for widget code ===

"Create a floating chatbot widget code that can be embedded on an existing website.

[Requirements]
- A fixed round button in the bottom-right corner (blue, speech bubble icon)
- Clicking opens the chatbot window (380px wide, 500px tall)
- Loads the chatbot page inside an iframe
- Clicking again closes it
- Works well on mobile
- High z-index so it displays above other elements

Set the iframe URL to https://chatbot-proxy.my-id.workers.dev/chatbot.html.

Make it a code snippet that can be pasted just before the </body> tag of an existing website."
...

Once the chatbot is deployed, refer to the tips below to operate it more effectively. [Improving the system prompt] 90% of chatbot quality depends on the system prompt. If customers frequently ask questions the chatbot answers poorly, ask Claude "Add an answer about ~ to the system prompt." [Managing costs] - Keep only the last 10 messages in conversation history (default setting) - Limit response length to 400 tokens or less (default setting) - Check real-time costs at console.anthropic.com > Usage [Improving response quality] - Specify the tone: formal vs casual - Add empathetic expressions: "I'm sorry for the inconvenience. Let me help you right away." - Decide whether to use emoji - Ask Claude "Make the system prompt tone more friendly" [Escalation (connecting to a live agent)] For questions the AI cannot answer, you need to hand off to a human. Add these rules to your system prompt: - Order cancellation/modification -> "Please contact our support center at 02-1234-5678" - Payment errors -> direct to live agent - Damaged/defective products -> guide to submit photos - Same question repeated 3+ times -> direct to live agent [Adapting the system prompt for different industries] The chatbot can be used in various industries beyond online stores. Ask Claude "Create a chatbot system prompt for a cafe/restaurant" and it will automatically generate FAQs and response rules tailored to that industry.

# === Frequently used expansion prompts ===

# [Improve system prompt]
"Improve the chatbot system prompt:
- When a customer mentions 'refund', explain the refund process in detail
- When a customer seems upset, show empathy first before providing guidance
- When the same question is repeated 3+ times, direct to a live agent"

# [Automatic business hours notification]
"Check the current time and if it's during business hours, say
'A live agent is available for connection.'
Outside business hours, say 'AI is here to help with basic inquiries.
For complex issues, a live agent will respond during business hours.'"

# [Multi-language support]
...