=====================================================================
  YourSiteWithAI STARTER KIT  -  Add an AI chatbot to your website
=====================================================================

This folder contains everything you need:

  index.html   Your web page, with the AI chat circle already built in.
  server.js    A tiny Node.js server that runs your site and securely
               talks to YourSiteWithAI using your API key.
  readme.txt   This file.


---------------------------------------------------------------------
 WHAT YOU NEED
---------------------------------------------------------------------

  1. Node.js version 18 or newer   ->  https://nodejs.org
     (Check with:  node --version)
  2. An YourSiteWithAI API key  ->  sign in to your YourSiteWithAI dashboard,
     open "API keys" and click "Create key".

No "npm install" is needed - the server has zero dependencies.


---------------------------------------------------------------------
 STEP 1 - ADD YOUR API KEY
---------------------------------------------------------------------

Open server.js in any text editor and find this line near the top:

    const YSWAI_API_KEY = process.env.YSWAI_API_KEY || "PASTE_YOUR_API_KEY_HERE";

Replace PASTE_YOUR_API_KEY_HERE with your key, e.g.:

    const YSWAI_API_KEY = process.env.YSWAI_API_KEY || "ysw_sk_abc123...";

The kit connects to https://yoursitewithai.dev by default. Only if you were
given a different service address, change YSWAI_URL on the next line.

(Alternative: leave the file alone and set environment variables
 instead - see "ENVIRONMENT VARIABLES" below.)

IMPORTANT: Never put your API key inside index.html. Anything in the
HTML can be seen by your visitors. The key belongs in server.js only.


---------------------------------------------------------------------
 STEP 2 - START YOUR WEBSITE
---------------------------------------------------------------------

Open a terminal / command prompt in this folder and run:

    node server.js

You should see:

    Your website is running at http://localhost:3000

Open http://localhost:3000 in your browser and click the green circle
in the bottom-right corner. A chat box opens above it with your
greeting message. Type a question and the AI will answer.

To stop the server press  Ctrl + C.


---------------------------------------------------------------------
 STEP 3 - CUSTOMISE YOUR CHATBOT
---------------------------------------------------------------------

Option A - From the YourSiteWithAI dashboard (recommended)
  Go to "Chatbot settings" in the dashboard. You can change:
    - Bot name            (shown at the top of the chat box)
    - First message       (the greeting visitors see when they open it)
    - Personality         (tell the AI about your business, products,
                           opening hours, tone of voice, etc.)
  Click "Save changes". Refresh your website to see the new greeting.

Option B - In index.html
  Find the YSWAI_WIDGET settings block near the bottom of index.html:

    window.YSWAI_WIDGET = {
      endpoint: "/api/chat",
      configEndpoint: "/api/widget-config",
      greeting: null,
      botName: null,
      accent: "#16a34a",
      position: "right"
    };

  - greeting : set to text like "Hi! Welcome to my shop!" to override
               the dashboard greeting. Leave as null to use the dashboard.
  - botName  : same idea for the name in the chat header.
  - accent   : any colour, e.g. "#2563eb" for blue.
  - position : "right" or "left" corner of the screen.

  Settings in index.html always win over the dashboard.


---------------------------------------------------------------------
 ADDING THE CHATBOT TO YOUR OWN EXISTING PAGE
---------------------------------------------------------------------

Copy everything between these two comments in index.html:

    <!-- YourSiteWithAI CHAT WIDGET ... -->
    ...
    <!-- END YourSiteWithAI CHAT WIDGET -->

and paste it just before the closing </body> tag of your own page.
Put your page in this folder (or point server.js at it) so that
server.js can answer the /api/chat requests.

If your site already has its own Node.js / Express backend, you can
copy the two routes from server.js ("/api/widget-config" and
"/api/chat") into it instead of running server.js separately.


---------------------------------------------------------------------
 ENVIRONMENT VARIABLES (optional)
---------------------------------------------------------------------

  YSWAI_API_KEY   Your API key (instead of editing server.js)
  YSWAI_URL       Address of the YourSiteWithAI service  (default https://yoursitewithai.dev)
  PORT            Port for your website          (default 3000)

  Mac / Linux:
      YSWAI_API_KEY=ysw_sk_abc123 node server.js

  Windows PowerShell:
      $env:YSWAI_API_KEY="ysw_sk_abc123"; node server.js

  Windows Command Prompt:
      set YSWAI_API_KEY=ysw_sk_abc123 && node server.js


---------------------------------------------------------------------
 TROUBLESHOOTING
---------------------------------------------------------------------

  "Invalid API key" / "Missing API key"
      Check the key in server.js matches the one in your dashboard,
      and that the key is not disabled.

  "Could not reach the AI service"
      The YourSiteWithAI service is not running, or YSWAI_URL is wrong.

  "The AI model is unavailable right now"
      The YourSiteWithAI service is up but its llama3.2 model is not running.

  The greeting did not change after I edited it in the dashboard
      Refresh the page. Also check greeting is null in index.html,
      otherwise the HTML value is used.

  "node is not recognized"
      Install Node.js from https://nodejs.org and reopen your terminal.
