> ## Documentation Index
> Fetch the complete documentation index at: https://knownledge.feezless.cloud/llms.txt
> Use this file to discover all available pages before exploring further.

# ฝังเอกสารใน Overlay ขอความยินยอม

> แสดงข้อกำหนดการใช้งานและนโยบายความเป็นส่วนตัวใน Overlay เพื่อขอความยินยอมก่อนผู้ใช้ทำรายการในแต่ละ Use case

ใช้หน้านี้เพื่อแสดง [ข้อกำหนดการใช้งาน](https://knownledge.feezless.cloud/th/legal/terms-of-use.md) และ [นโยบายความเป็นส่วนตัว](https://knownledge.feezless.cloud/th/legal/privacy-policy.md) ใน Overlay ก่อนผู้ใช้กดดำเนินการ เช่น ชำระเงิน สมัครสมาชิก หรือเรียกใช้ API แบบคิดค่าบริการ

## ตัวอย่าง Overlay

เลือก Use case แล้วลองกดปุ่ม ปุ่มดำเนินการจะเปิดใช้งานเมื่อผู้ใช้ยอมรับเอกสารที่จำเป็นครบ และจะแสดงตัวอย่างบันทึกความยินยอมที่ควรเก็บ

หน้าจอแอปของคุณ ()

## เอกสารที่ต้องแสดงในแต่ละ Use case

ตารางนี้เป็นตัวอย่างการจับคู่ ให้ฝ่ายกฎหมายยืนยันก่อนใช้งานจริง

| Use case | ช่วงที่แสดง Overlay | ข้อกำหนดการใช้งาน | นโยบายความเป็นส่วนตัว | ความยินยอมเพิ่มเติม (ไม่บังคับ) |
| - | - | - | - | - |
| [ชำระเงินต่อคำขอ](https://knownledge.feezless.cloud/th/solutions/pay-per-request/index.md) | ก่อนเปิดใช้ API key หรือชำระคำขอแรก | บังคับ | บังคับ | ไม่มี |
| [ลิงก์ชำระเงิน](https://knownledge.feezless.cloud/th/solutions/checkout/index.md) | ก่อนกดชำระเงิน | บังคับ | บังคับ | รับข่าวสารการตลาด |
| [เมนูสินค้า](https://knownledge.feezless.cloud/th/solutions/product-menu/index.md) | ก่อนยืนยันตะกร้าและชำระเงิน | บังคับ | บังคับ | รับข่าวสารการตลาด |
| [ระบบขายหน้าร้าน](https://knownledge.feezless.cloud/th/solutions/pos/index.md) | ก่อนลงทะเบียนอุปกรณ์ร้านค้า | บังคับ | บังคับ | ไม่มี |
| [ระบบสมาชิก](https://knownledge.feezless.cloud/th/solutions/membership/index.md) | ก่อนตั้งรหัส PIN | บังคับ | บังคับ | รับข่าวสารการตลาด |
| [ใบแจ้งหนี้และการชำระบิล](https://knownledge.feezless.cloud/th/solutions/invoice-bill-payment/index.md) | ก่อนกดชำระบิล | บังคับ | บังคับ | ไม่มี |

## URL สำหรับฝัง

| เอกสาร | รหัสเอกสาร | URL |
| - | - | - |
| ข้อกำหนดการใช้งาน | `terms-of-use` | `https://knownledge.feezless.cloud/th/legal/terms-of-use` |
| นโยบายความเป็นส่วนตัว | `privacy-policy` | `https://knownledge.feezless.cloud/th/legal/privacy-policy` |

> [!WARNING]
>
> โดยค่าเริ่มต้น เว็บไซต์เอกสารนี้ไม่อนุญาตให้โดเมนอื่นฝังหน้าผ่าน `<iframe>` (ส่ง `Content-Security-Policy: frame-ancestors` ที่อนุญาตเฉพาะโดเมนของตัวเอง) ก่อนใช้ iframe ในแอปของคุณ ต้องส่งรายการโดเมนที่จะฝังไปขออนุญาตจาก Mintlify ที่ `support@mintlify.com` ระหว่างรอ ให้ใช้แบบเปิดลิงก์ในแท็บใหม่แทน ดูรายละเอียดที่ [Docs site refuses to load in an iframe](https://mintlify.com/docs/help-center/embed-docs-site-in-iframe)

## ติดตั้ง Overlay ในแอปของคุณ

**1. แสดง Overlay ก่อน action**

ดักการกดปุ่มที่ต้องขอความยินยอม แล้วแสดง Overlay พร้อมเอกสารที่ Use case นั้นกำหนด

```html consent-overlay.html theme={null}
<div id="consent-overlay" role="dialog" aria-modal="true" aria-labelledby="consent-title" hidden>
  <h2 id="consent-title">ก่อนดำเนินการต่อ</h2>

  <!-- ใช้ได้หลังจากโดเมนของคุณได้รับอนุญาตให้ฝัง iframe -->
  <iframe
    src="https://knownledge.feezless.cloud/th/legal/terms-of-use"
    title="ข้อกำหนดการใช้งาน Feezless"
    sandbox="allow-scripts allow-same-origin allow-popups"
    referrerpolicy="strict-origin-when-cross-origin"
    loading="lazy"
    style="width:100%;height:320px;border:0"></iframe>

  <label><input type="checkbox" name="terms-of-use" required />
    ฉันยอมรับ <a href="https://knownledge.feezless.cloud/th/legal/terms-of-use" target="_blank" rel="noopener noreferrer">ข้อกำหนดการใช้งาน</a></label>
  <label><input type="checkbox" name="privacy-policy" required />
    ฉันรับทราบ <a href="https://knownledge.feezless.cloud/th/legal/privacy-policy" target="_blank" rel="noopener noreferrer">นโยบายความเป็นส่วนตัว</a></label>
  <label><input type="checkbox" name="marketing" />
    ยินยอมรับข่าวสารการตลาด (ไม่บังคับ)</label>

  <button type="button" id="consent-accept" disabled>ยอมรับและดำเนินการต่อ</button>
  <button type="button" id="consent-cancel">ยกเลิก</button>
</div>
```

**2. ส่งบันทึกความยินยอมไปที่เซิร์ฟเวอร์ของคุณ**

เมื่อผู้ใช้ยอมรับครบ ให้ส่งบันทึกไปที่ backend ของคุณเอง ห้ามส่ง secret key หรือข้อมูลรับรองใด ๆ จากฝั่งเบราว์เซอร์

```js consent-overlay.js theme={null}
const REQUIRED = ['terms-of-use', 'privacy-policy'];
const DOC_VERSIONS = { 'terms-of-use': '1.0.0-draft', 'privacy-policy': '1.0.0-draft' };

function requireConsent(scenario, action) {
  const overlay = document.getElementById('consent-overlay');
  const accept = document.getElementById('consent-accept');
  const boxes = overlay.querySelectorAll('input[type="checkbox"]');

  const sync = () => {
    accept.disabled = !REQUIRED.every(
      (name) => overlay.querySelector(`input[name="${name}"]`).checked
    );
  };
  boxes.forEach((box) => box.addEventListener('change', sync));
  sync();
  overlay.hidden = false;

  accept.onclick = async () => {
    const accepted = [...boxes].filter((b) => b.checked).map((b) => b.name);
    // endpoint นี้อยู่บนเซิร์ฟเวอร์ของคุณ ไม่ใช่ API ของ Feezless
    const res = await fetch('https://your-app.example.com/consents', {
      method: 'POST',
      credentials: 'include',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        scenario,
        documents: accepted
          .filter((id) => DOC_VERSIONS[id])
          .map((id) => ({ id, version: DOC_VERSIONS[id] })),
        marketing_opt_in: accepted.includes('marketing'),
        locale: 'th',
      }),
    });
    if (!res.ok) {
      alert('บันทึกความยินยอมไม่สำเร็จ กรุณาลองใหม่');
      return;
    }
    overlay.hidden = true;
    action();
  };

  document.getElementById('consent-cancel').onclick = () => {
    overlay.hidden = true;
  };
}

// ตัวอย่าง: ขอความยินยอมก่อนตั้งรหัส PIN สมาชิก
document.getElementById('set-pin').addEventListener('click', () =>
  requireConsent('membership', () => startPinSetup())
);
```

**3. ตรวจสอบและบันทึกฝั่งเซิร์ฟเวอร์**

เซิร์ฟเวอร์ต้องเป็นผู้กำหนดเวลา (`accepted_at`) และผูกบันทึกกับผู้ใช้ที่ยืนยันตัวตนแล้ว ห้ามเชื่อค่าดังกล่าวจากเบราว์เซอร์

```json ตัวอย่างบันทึกความยินยอม theme={null}
{
  "subject_id": "usr_8f3a…",
  "scenario": "membership",
  "documents": [
    { "id": "terms-of-use", "version": "1.0.0-draft" },
    { "id": "privacy-policy", "version": "1.0.0-draft" }
  ],
  "marketing_opt_in": false,
  "locale": "th",
  "accepted_at": "2026-11-02T12:00:00Z",
  "ip_hash": "sha256:…"
}
```

* เก็บเฉพาะข้อมูลที่จำเป็น และ hash หรือ mask ค่าอย่าง IP address ก่อนบันทึก
* ห้าม log เนื้อหา PIN ข้อมูลบัตร หรือข้อมูลส่วนบุคคลแบบเต็มลงในบันทึกความยินยอม
* ให้ผู้ใช้ถอนความยินยอมได้ และเก็บประวัติการถอนไว้คู่กัน

## เมื่อเอกสารเปลี่ยนเวอร์ชัน

1. ปรับเลขเวอร์ชันในตารางท้ายหัวเรื่องของเอกสาร และใน `DOC_VERSIONS` ของแอป
2. เมื่อผู้ใช้ทำ action ครั้งถัดไป ให้เทียบเวอร์ชันที่บันทึกไว้กับเวอร์ชันปัจจุบัน หากไม่ตรงกัน ให้แสดง Overlay อีกครั้ง
3. การแก้คำผิดหรือจัดรูปแบบที่ไม่เปลี่ยนสาระ ไม่จำเป็นต้องขอความยินยอมใหม่ ให้ฝ่ายกฎหมายเป็นผู้ตัดสิน


## Related topics

- [ข้อกำหนดการใช้งาน](https://knownledge.feezless.cloud/th/legal/terms-of-use.md)
- [นโยบายความเป็นส่วนตัว](https://knownledge.feezless.cloud/th/legal/privacy-policy.md)
- [ระบบสมาชิกและสิทธิประโยชน์](https://knownledge.feezless.cloud/th/solutions/membership/index.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.