FREE PRACTICAL AI LEARNING · LEARN BY DOINGNO SIGNUP NEEDED · YOUR WORK STAYS YOURS
Open PracticePRACTICAL AI ENGINEERING
FREE TOOL · BUILD APPS

Add a help chat widget to your website

Many “AI chatbot” scripts paste a secret key into public website code. This one does not. Start with FAQ-matching mode (no AI, no key, free forever), then optionally switch to AI answers through your own Cloudflare Worker that keeps the key server-side and answers only from your FAQ.

⏱ 20–40 min · Download a ZIP · Deploy free · No signup

You will practise

  • Why API keys must never be in front-end code
  • Grounding AI answers in your own content
  • Embedding a script on any website

No AI key needed. The code comes from a reviewed template.

  1. 1Brief

    Answer a few questions. The generator writes the code; you will read and change it.

    5–15 lines formatted as question? answer
    faq: free keyword matching, no key · ai: answers via your own Worker + Groq key

  2. 2Make

    Generate the project, then open every file. Comments explain each part. You can edit files right here.

  3. 3Check

    Automatic checks for the mistakes that break real projects: invalid config, leaked keys, missing security steps.

    • 4Improve

      1. Run the check first.
      Your change: Ask your widget 5 questions phrased differently from your FAQ. For each miss, add or reword an FAQ line until it answers correctly.

    • 5Ship

      Upload widget.js to your site. AI mode also deploys a small Cloudflare Worker (free plan). Step-by-step instructions are inside README.md.

    Questions people ask

    Is there a free version with no AI?

    Yes — FAQ mode matches questions to your answers in the browser. No key, no cost, no data sent anywhere.

    Can visitors steal my AI key?

    Not with this design: the key is a Worker secret, and the Worker only answers requests from your own site address.

    Do I need an AI key to use this?

    No. The guided template teaches the same skill with no AI at all. If you add your own free key (Groq, Google Gemini, OpenRouter, Mistral or Cerebras), the tool can also draft and revise. The key stays in your browser and requests go straight to that provider.

    Where is my work saved?

    In this browser only (local storage), until you copy or download it. Nothing you type is sent to Open Practice.

    Keep building

    WritingFAQ GeneratorBuild an FAQ from real customer questionsBuild appsTelegram Bot CreatorCreate a Telegram bot on Cloudflare Workers (free)Build appsWebsite GeneratorGenerate and publish a one-page website for freeACADEMY COURSEYour first business assistantGo deeper: a full project course with fixtures, a capstone and a handbook.