twisto-widget-modal | Twisto Documentation

Samostatný modální dialog. Viditelnost je řízena atributem is-opened — nastavte na "true" pro zobrazení.

Krok 1: Přidejte tento skript na stránku ⬇️

<script src="https://cdn.twistopay.com/widget/twisto-widget.js" async></script>

Krok 2: Vložte modální dialog a tlačítko pro jeho otevření ⬇️

<button id="open-twisto-modal">Open Twisto info</button>

<twisto-widget-modal
  product="pay-in-3"
  language="cs"
  theme="light"
  is-opened="false"
></twisto-widget-modal>

<script>
  document.getElementById('open-twisto-modal').addEventListener('click', function() {
    document.querySelector('twisto-widget-modal').setAttribute('is-opened', 'true');
  });
</script>

Modální dialog také podporuje combination="bnpl+pay-in-3" pro zobrazení obsahu Zaplaťte ve 3 + Zaplaťte za 30 dní dohromady.

Atributy

Modál má dvě varianty:

Statická — zobrazuje se, když nejsou zadány amount a currency. Vždy zobrazí všechny služby.
Dynamická — zobrazuje se, když jsou zadány amount a currency. Zobrazí vypočítané částky pro každou službu.

Atribut	Popis	Typ	Výchozí hodnota
product	Název produktu Twisto. Možnosti: `pay-in-30-days`, `pay-in-3`, `paid-bnpl`.	String	`null`
combination	Použijte `bnpl+pay-in-3` pro zobrazení BNPL + Pay ve třech splátkách společně. Volitelné.	String	`null`
amount	Cena produktu. Pokud je zadána spolu s `currency`, aktivuje dynamickou variantu s vypočítanými částkami.	Number	`null`
currency	Měna částky. Povinné s `amount`. Například `CZK`, `EUR`, `PLN` atd.	String	`null`
language	Jazyk. Možnosti: `cs`, `en` nebo `pl`.	String	`en`
theme	Motiv. Možnosti: `light` nebo `dark`.	String	`light`
width	Šířka modálu. Možnosti: `auto` nebo `full`.	String	`auto`
merchant-name	Název vašeho e-shopu. Volitelné.	String	`null`
is-opened	Řídí viditelnost. Nastavte `"true"` pro zobrazení, `"false"` pro skrytí.	Boolean	`"false"`

Úplný seznam dostupných atributů najdete na stránce Jak upravit widgety Twisto.

Příklady

Zaplaťte ve 3

<button id="open-twisto-modal">Open Twisto info</button>

<twisto-widget-modal
  product="pay-in-3"
  language="cs"
  theme="light"
  is-opened="false"
></twisto-widget-modal>

<script>
  document.getElementById('open-twisto-modal').addEventListener('click', function () {
    document.querySelector('twisto-widget-modal').setAttribute('is-opened', 'true')
  })
</script>