How to Embed Twine on Your WordPress Website

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