AIMRAN
-15 %en tu pedidoTu códigoVERANO26
HTML + CSSNotifications

Toast coupon de réduction

Un toast en forme de coupon découpé avec le code de réduction et un bouton pour le copier.

Réglages

16px
1x

Code

<div class="uv-qpc"><button type="button" class="fire">Afficher à nouveau</button><div class="tt" role="status"><span class="lf"><b>-15 %</b><small>sur ta commande</small></span><span class="rt"><small>Ton code</small><code>VERANO26</code><button type="button" class="cp"><span class="a">Copier</span><span class="b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Copié</span></button></span></div></div>

Prompt pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Plus dans Notifications

Voir tout : Notifications

Toast de notification animé

NotificationsReact + Motion

Toast de succès élastique

NotificationsHTML + CSS

Toast avec annulation

NotificationsHTML + CSS

Toast de progression d'envoi

NotificationsHTML + CSS

Toast d'erreur qui tremble

NotificationsHTML + CSS

Toast de nouveau message

NotificationsHTML + CSS

Toasts empilés

NotificationsHTML + CSS

Toast pilule façon île

NotificationsHTML + CSS

Où l’utiliser

Les offres de sortie, les récompenses d'inscription et les remises sur la première commande paraissent plus concrètes quand elles ressemblent à un coupon. Ce toast a un talon coloré avec le pourcentage, des encoches découpées par masques CSS, une ligne pointillée et le code en police à chasse fixe. Le bouton copie le code et confirme avec une coche.

Le code est le texte modifiable, facile à changer pour chaque campagne. Affiche le toast une fois par visite pour qu'il ressemble à un cadeau.