# 01 - Widget `data-site-id` Configuration Concepts

Welcome to **Milestone 1, Step 1.6**: Widget `data-site-id` configuration reading.

---

## 1. What are `data-*` HTML Attributes?

HTML5 allows embedding custom dataset attributes on any HTML element using the `data-` prefix (e.g. `data-site-id="site_demo_123"`).

In JavaScript, browsers automatically expose all `data-*` attributes of an element on its `.dataset` property in camelCase format:
- HTML attribute: `data-site-id`
- JS Property: `element.dataset.siteId`

---

## 2. Reading `data-site-id` in the Widget

When a customer website embeds the chatbot script:

```html
<script src="https://api.chatbot.com/widget.js" data-site-id="site_ee3ee68c5b4a"></script>
```

The widget reads its own `siteId` upon script execution:

```javascript
const currentScript = document.currentScript || document.querySelector("script[data-site-id]");
const siteId = currentScript ? currentScript.dataset.siteId : null;
```

- **`document.currentScript`:** Returns the exact `<script>` element whose primary code is currently executing.
- **`.dataset.siteId`:** Extracts the string `"site_ee3ee68c5b4a"`.

---

## 3. Data Extraction Flow Diagram

```text
  Customer Website HTML
  <script src="..." data-site-id="site_demo_123"></script>
                        │
                        ▼
             document.currentScript
                        │
                        ▼
             .dataset.siteId
                        │
                        ▼
         siteId = "site_demo_123" (Widget Runtime Variable)
```

---

## 4. Handling Missing `siteId` Gracefully

If a customer forgets to include `data-site-id` on their script tag:

```html
<script src="https://api.chatbot.com/widget.js"></script>
```

- **No Crashes:** The widget logs a clear warning (`console.warn(...)`) and displays a visual setup warning inside the panel header without throwing unhandled exceptions.
- **No Hardcoding:** The widget never hardcodes or guesses a site ID.

---

## 5. Why M1.6 Does NOT Call the Backend Yet

M1.6 strictly identifies the tenant at widget runtime. In **Milestone 1.7**, the widget will use this `siteId` to send an HTTP `POST /api/v1/session/init` request to initialize a visitor session.