twisto-widget-modal | Twisto Documentation

Standalone modal. Visibility is controlled by the is-opened attribute — set to "true" to show.

Step 1: Add this script to the page ⬇️

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

Step 2: Insert the modal and a trigger button ⬇️

<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>

The modal also supports combination="bnpl+pay-in-3" to display Pay in 3 + Pay in 30 days content together.

Attributes

The modal has two variants:

Static — displayed when amount and currency are not provided. Always shows all services.
Dynamic — displayed when amount and currency are provided. Shows calculated amounts per service.

Attribute	Description	Type	Default value
product	Name of Twisto product. Options: `pay-in-30-days`, `pay-in-3`, `paid-bnpl`.	String	`null`
combination	Use `bnpl+pay-in-3` to explicitly show BNPL + Pay in 3 together. Optional.	String	`null`
amount	Product price. When provided together with `currency`, enables the dynamic variant with calculated amounts.	Number	`null`
currency	Currency of amount. Required with `amount`. For example, `CZK`, `EUR`, `PLN`, etc.	String	`null`
language	Language. Options: `cs`, `en` or `pl`.	String	`en`
theme	Theme. Options: `light` or `dark`.	String	`light`
width	Modal width. Options: `auto` or `full`.	String	`auto`
merchant-name	Your e-shop name. Optional.	String	`null`
is-opened	Controls visibility. Set to `"true"` to show, `"false"` to hide.	Boolean	`"false"`

For a full list of available attributes, see How to edit Twisto widgets.

Examples

Pay in 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>