Skip to content

Mode flottant

Cap peut masquer automatiquement le CAPTCHA jusqu'à ce qu'un bouton soit pressé. Pour cela, ajoutez l'attribut data-cap-floating à votre déclencheur, avec le sélecteur de l'élément cap-widget que vous voulez utiliser.

html
<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">
  Déclencher le mode flottant
</button>

Vous devrez aussi importer la bibliothèque Cap et le script du mode flottant depuis JSDelivr :

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

Ou depuis le serveur standalone :

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

Les attributs suivants sont pris en charge :

  • data-cap-floating : le sélecteur CSS de l'élément cap-widget à utiliser.
  • data-cap-floating-position : la position du widget flottant. Valeurs possibles : top ou bottom.
  • data-cap-floating-offset : le décalage du widget flottant par rapport à l'élément déclencheur.