Widget & Embed

Integra VaperCalc nel tuo sito e-commerce con una sola riga di codice.

Come funziona

Includi widget.js nella pagina e aggiungi un elemento HTML con i dati del prodotto tramite attributi data-*. I widget usano Shadow DOM — nessun conflitto con il tuo CSS.

Includi lo script (una volta per pagina)

<!-- Incolla prima della chiusura </body> -->
<script src="https://tuodominio.it/vapercalc/widget.js"></script>

Widget 1

Shot Calculator

Ideale nelle pagine prodotto di basi, longfill e nicokit. L'utente vede quanti shot servono e la nicotina risultante in tempo reale. I parametri del prodotto vengono passati direttamente nell'HTML — zero configurazione JS.

Anteprima

Codice da incollare

<!-- Longfill 60ml, aroma 10ml -->
<vapercalc-shot
  data-bottle="60"
  data-flavor="10"
  data-shot-conc="20"
  data-shot-vol="10"
  data-src="https://tuodominio.it/"
></vapercalc-shot>

Colore personalizzato

<vapercalc-shot
  data-bottle="60"
  data-flavor="10"
  data-shot-conc="20"
  data-shot-vol="10"
  data-accent="#e91e8c"
></vapercalc-shot>

Sintassi alternativa (data-vapercalc)

<div
  data-vapercalc="shot"
  data-bottle="60"
  data-flavor="10"
  data-shot-conc="20"
  data-shot-vol="10"
></div>

Widget 2

Tabella Nicotina

Mostra una tabella statica: da 0 a N shot, con la nicotina risultante per ogni combinazione. Perfetto come riepilogo nella scheda prodotto di un longfill o di una base.

Anteprima

Codice da incollare

<vapercalc-nic-table
  data-bottle="60"
  data-flavor="10"
  data-shot-conc="20"
  data-shot-vol="10"
  data-max-shots="5"
></vapercalc-nic-table>

Widget 3

Calcolatrice Completa (iframe)

Incorpora l'intera calcolatrice VaperCalc dentro qualsiasi pagina tramite iframe. Sostituisci l'URL con quello del tuo server.

Custom Element

<vapercalc-full
  data-src="https://tuodominio.it/vapercalc/"
  data-height="750"
></vapercalc-full>

iframe diretto (senza widget.js)

<iframe
  src="https://tuodominio.it/vapercalc/"
  width="100%"
  height="750"
  style="border:none;border-radius:12px"
  loading="lazy"
  title="VaperCalc"
></iframe>

Tutti i parametri disponibili

Ogni attributo ha un valore di default — puoi omettere quelli che non ti servono.

Attributo	Default	Descrizione
data-bottle	60	Capacità bottiglia (ml)
data-flavor	10	Volume aroma già presente (ml)
data-shot-conc	20	Concentrazione shot nicotina (mg/ml)
data-shot-vol	10	Volume per shot (ml)
data-max-shots	4	Righe massime nella tabella nicotina (solo nic-table)
data-accent	#7c6fff	Colore principale (HEX) — adatta al brand del tuo sito
data-src	—	URL calcolatrice completa (mostra link "VaperCalc ↗")
data-lang	auto	Lingua (it\|en\|fr\|de\|es) — auto-rilevata se omessa
data-height	700	Altezza iframe in px (solo widget full)