How to embed Twine on your WordPress website


Create twine and export it to html file.

Publish to File.


Upload html file on the server (eg. FTP with Filezilla).


Create a new page in your wordpress where you want to embed the twine.


Insert following code (be sure to switch to Text tab)

<div><iframe id="my_iframe" width="100%" height="400px" src="" scrolling="no"</iframe></div>

Replace url with path to your twine.


Now you have twine embedded on your website, however it has the wrong size. Oh noes! What now?!

Lets add some more code 🙂

<script type="text/javascript">
     var currentPassage = null;

    function CheckHeight() {

        if (currentPassage != document.getElementById("my_iframe").contentWindow.document.getElementsByTagName("tw-passage")[0]) {
            document.getElementById("my_iframe").style.height = "400px";
            document.getElementById("my_iframe").style.height = document.getElementById("my_iframe").contentWindow.document.body.scrollHeight + 'px';
            currentPassage = document.getElementById("my_iframe").contentWindow.document.getElementsByTagName("tw-passage")[0];
         setTimeout(CheckHeight, 500);

<div><iframe id="my_iframe" width="100%" height="400px" src="" scrolling="no" onload="CheckHeight()"></iframe></div>

Now the iframe changes height according to the current twine passage. 

But, it does not work in Firefox. In Firefox you get a blank page. Yeah, kids. Always test your website in all browsers.

In Firefox add fallback to fixed resolution and enable scrolling.
Like this:

 if(document.getElementById("my_iframe").contentWindow.document.body.scrollHeight == 0){
    document.getElementById("my_iframe").style.height = "1300px";
    document.getElementById("my_iframe").scrolling = "yes";}

WAIT! This tutorial is really complicated!!!

Allright – just go here. It is simple way how to get your Twine online for free.




Does your twine contain external links?

eg. to articles/any other website

Add attribute target and set it to _blank. This forces browsers to open the link in a new tab instead of opening it right in the twine iframe window.

<a href=”” target=”_blank”>Link</a>



Are you making changes to your twine and uploading new version on server?

User browser private mode/incognito mode. Or clear browser cache. Iframes are usually cached in browsers so you would only see old version of your twine.


Tagged with: , , , , , ,

Leave a Comment