Blastness Logo
Guida rapida

Istruzioni per l'integrazione delle offerte BlastQR

Copia lo snippet, incollalo nella pagina offerte e personalizza lo stile tramite le classi CSS dedicate.

1

Copia il seguente codice

Questo snippet carica in modo asincrono il widget delle offerte nella pagina.

Codice integrazione offerte
<!-- BlastQR Offerte -->
<div id="blastqr-offers"></div>
<script src="https://blastqr.blastdemo.com/offers.js" async></script>
<!-- Incolla questo codice nella sezione offerte del tuo sito -->
2

Incolla il codice nella pagina offerte

Modifica il codice della tua pagina delle offerte e incolla lo snippet all'interno della sezione in cui vuoi che le offerte vengano mostrate.

  • Individua il blocco della pagina dove oggi mostri le offerte (es. lista card, box promozioni, ecc.).
  • Assicurati che lo script sia caricato nella stessa pagina dove è stato inserito il contenitore
    <div id="blastqr-offers"></div>
    in modo che il contenitore venga popolato correttamente.
4

Modifica lo stile delle offerte con le classi CSS

Puoi personalizzare completamente l'aspetto delle offerte usando le classi CSS esposte dal widget.

Classi disponibili
.blastqr-offers-list
Tipo elemento: ul

Contenitore principale della lista di offerte generate dinamicamente.

  • Gestire layout generale della lista (padding, margin, gap).
  • Impostare display grid/flex per l’impaginazione delle card.
.offerte-list
Tipo elemento: ul

Classe aggiuntiva per lo stesso <ul> delle offerte, utile come alias o per stili specifici del progetto.

  • Usala per sovrascrivere o estendere gli stili di .blastqr-offers-list.
  • Mantieni compatibilità con eventuali versioni precedenti del markup.
.blastqr-offer
Tipo elemento: li

Rappresenta un singolo elemento/offerta nell’elenco.

  • Imposta spaziatura interna, bordi, ombre e sfondo.
  • Definisci layout responsive o effetti hover.
.blastqr-offer-wrapper
Tipo elemento: div

Wrapper interno che contiene tutti gli elementi dell’offerta (titolo, testo, immagine, link).

  • Gestisci qui il layout interno della card.
  • Allinea h4, p, img e link secondo lo stile del tuo sito.
.offerta
Tipo elemento: div

Classe aggiuntiva associata al wrapper dell’offerta.

  • Condividi stili generali con altri elementi 'offerta' del progetto.
  • Applica regole globali o stili di default alle offerte.
Controlla la resa

Dopo l'integrazione, verifica che testi, immagini e link delle offerte vengano caricati correttamente.

Serve aiuto?

Scrivi a assistenza@blastness.com e ti aiuteremo con l'integrazione.