Deadline Engine

Countdown personalizzati con polling adattivo (1s ultimo minuto, 30s altrimenti), 4 template visivi e supporto A/B nativo.

1. Installa lo snippet

html
<script
  src="https://project--YOUR_PROJECT.lovable.app/snippets/deadline.js"
  data-campaign-id="YOUR_CAMPAIGN_ID"
  data-email-param="lvbl_email"
  data-hide-on-expire="true"
  defer></script>

Banner HTML personalizzato

Nella scheda Aspetto della campagna attiva il banner HTML personalizzato e inserisci HTML e CSS. Il segnaposto {{timer}} diventa un countdown aggiornato ogni secondo con il tempo restituito da Deadline. Gli script interni non vengono eseguiti.

html
<div class="banner-offerta">
  La tua offerta termina tra <strong>{{timer}}</strong>
  <a href="/checkout" data-lvbl-deadline-cta>Acquista</a>
</div>

Alternativa: banner direttamente nell'HTML del sito

Usa un solo script per campagna. Con data-render="inline" non viene aggiunto il banner automatico; il tempo viene scritto negli elementi della stessa campagna. Il banner resta nascosto finché Deadline non restituisce il tempo e si nasconde alla scadenza, salvo data-hide-on-expire="false".

html
<div data-lvbl-deadline-banner="YOUR_CAMPAIGN_ID" hidden>
  Offerta termina tra <strong data-lvbl-deadline-timer="YOUR_CAMPAIGN_ID"></strong>
</div>
<script src="https://funnel-artisan-toolkit.lovable.app/snippets/deadline.js"
  data-campaign-id="YOUR_CAMPAIGN_ID" data-render="inline" defer></script>

2. CTA di conversione

Marca il CTA con data-lvbl-deadline-cta per tracking automatico:

html
<a href="/checkout" data-lvbl-deadline-cta>
  Approfitta dello sconto
</a>

3. Template disponibili

  • bar-top — Barra fissa in alto, ideale per offerte sitewide.
  • inline-card — Card inline, perfetta sopra il CTA di prodotto.
  • floating-pill — Pillola flottante in basso a destra, non invasiva.
  • fullscreen-overlay — Overlay fullscreen per momenti drammatici.
Template, colori, font e copy sono configurabili dalla UI "Aspetto" nel detail della campagna — nessuna modifica al codice è necessaria.

4. A/B test su durata o copy

html
<script
  src=".../snippets/deadline.js"
  data-campaign-id="CAMPAIGN_ID"
  data-ab-experiment="EXPERIMENT_ID"
  defer></script>

Dalla detail di una campagna, click su "Crea esperimento A/B": vengono generate due varianti con override automatici. Lo snippet applica l'override della variante assegnata via data-ab-experiment.

Attributi disponibili

  • data-campaign-id — ID della campagna deadline (obbligatorio)
  • data-email-param — query param da cui leggere l'email (default lvbl_email)
  • data-hide-on-expire — nasconde l'elemento alla scadenza (default true)
  • data-ab-experiment — collega un esperimento A/B per override
  • data-lvbl-deadline-cta — marca un elemento come CTA per tracking