โหมดลอย

Cap สามารถซ่อน CAPTCHA ไว้โดยอัตโนมัติจนกว่าจะมีการกดปุ่ม วิธีใช้คือเพิ่มแอตทริบิวต์ data-cap-floating ให้กับตัวกระตุ้นของคุณ พร้อมระบุ query selector ของอิลิเมนต์ cap-widget ที่ต้องการใช้

<cap-widget
  id="floating"
  onsolve="console.log(`token: ${event.detail.token}`)"
  data-cap-api-endpoint="<api endpoint>"
></cap-widget>

<button data-cap-floating="#floating" data-cap-floating-position="bottom">
  เรียกใช้โหมดลอย
</button>

คุณต้องนำเข้าทั้งไลบรารี Cap และสคริปต์โหมดลอยจาก JSDelivr ด้วย:

<script src="https://cdn.jsdelivr.net/npm/cap-widget"></script>
<script src="https://cdn.jsdelivr.net/npm/cap-widget/cap-floating.min.js"></script> 

หรือจากเซิร์ฟเวอร์ standalone:

<script src="https://<server url>/assets/widget.js"></script>
<script src="https://<server url>/assets/floating.js"></script>

แอตทริบิวต์ที่รองรับมีดังนี้:

• data-cap-floating: CSS selector ของอิลิเมนต์ cap-widget ที่ต้องการใช้
• data-cap-floating-position: ตำแหน่งของวิดเจ็ตลอย ใช้ได้เป็น top หรือ bottom
• data-cap-floating-offset: ระยะห่างของวิดเจ็ตลอยจากอิลิเมนต์ที่เป็นตัวกระตุ้น