How Twisto works page

A ready-to-embed http://cz.twisto.live/how-it-works that explains Twisto to your customers. Instead of building your own explainer page, you can embed the Twisto landing page directly in your e-shop using an <iframe> — or redirect customers to it directly.

You can see a live example at the bottom of this page ⬇️

How to embed

Step 1: Add the iframe to your page ⬇️

<iframe
  id="twisto-widget"
  src="http://cz.twisto.live/how-it-works"
  title="Twisto Widget"
></iframe>

Step 2: Add the resize listener so the iframe height stays in sync ⬇️

<script>
  window.addEventListener('message', function(event) {
    if (
      event.data &&
      event.data.type === 'twisto-widget-resize' &&
      typeof event.data.height === 'number'
    ) {
      document.getElementById('twisto-widget').style.height = event.data.height + 'px'
    }
  })
</script>

And there you have it. The page sends a postMessage with its height to the parent — the listener in Step 2 catches it and keeps the iframe sized correctly.