How to embed a Construct 2 project into your website.

2

Index

Tagged

Stats

17,691 visits, 32,162 views

Tools

Share

Translations

This tutorial hasn't been translated.

Create a translation

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 15 May, 2012. Last updated 19 Feb, 2019

Understanding Iframes:

To embed your project onto your desired webpage. The usual protocol is to use html code to include an iframe. An iframe is a portal to another webpage, so that you are able to open up and display multiple webpages within one webpage. The iframe will bring your project's index.html page to the desired place and display/run it within the iframe [box]. The following diagram illustrates the concept.

.

.

For more information concerning iframes please click here click here.

Tutorial:

Step 1:

After completing your project, export it to your hard drive (I generally export it first to my desktop and move it after uploading it online).

Make sure you choose “Export for HTML5 website” when exporting. This should export your project with the following folders; images & media (depending upon the folder names you’ve chosen).

.

.

Step 2:

Assuming you have web hosting available. Either through renting it privately, or using another service. Upload your exported project to your website into the appropriate folder (e.g. public_html/site/html5/Your_Game).

Keeping the file and folder order as the exported to your desktop.

Most webhosting services provide a client or ftp service to allow you to create new folders and upload files to them. Record the address of where the index.html file (from the exported folder) has been uploaded.

Open up the index.html file to test to see if your project is working correctly is working. The url address to this file will be used when you embed your project on your main webpage.

.

.

Step 3:

If you have created your own website and want to embed your Contruct 2 project within it. You need an html editor to edit the webpage to add the following iframe code into it.

It is assumed you only want your project to show through the iframe and no extra text or web links.

Edit the width and height to the size of your project, then copy and paste the following code into the webpage where you would like your project to be seen.

<iframe src="<URL to your project's index.html>" name="<Name of your Iframe>" width="???" height="???" frameborder="0" scrolling="no" ><p>Your browser does not support iframes.</p> ></iframe>

For example:

<iframe src="http://englishacorn.com/html5/advert/frontpage/index.html" name="Englishacorn" width="760" height="200" frameborder="0" scrolling="no" ><p>Your browser does not support iframes.</p> ></iframe>

If you are creating your webpage with a CMS (Content Management System) or something similar. You should be able to use the same iframe html code to embed your game.

If you have any questions please contact me.

-

Adam

.

------------------------------------------------------------------------------------------------------

Edit:

1- Corrections by 'francoisdiotte' 28/05/2012

2-

  • 4 Comments

  • Order by
Want to leave a comment? Login or Register an account!
    • [-] [+]
    • 1
    • co3's avatar
    • co3
    • 1 points
    • (0 children)

    After embedding the game to my site, long pressing it on an iphone on safari causes it to highlight the game. Is there anyway to disable the highlight functionality on ios in the iframe code or the game?

  • I have iFrame using C2 session to display on my website. Within the session I have a button that I want to take the user out of the iFrame into the website login page. Tried Browser...self, parent, top but it all remains in the iFrame. How do I get out of the iFrame back to webpage??? Thank you :)

  • I have my game embedded in an iFrame on a PARENT webpage and I need to get a variable from the PARENT webpage into my construct game that lives inside an iFrame on the PARENT webpage? I need to SET a Construct Global Variable Value with the value of a variable located in the PARENT Window?

    • A simple solution could be to add a query parameter to the game page url/src of the iFrame, then use C3 to pick up that query parameter with the Browser object (See, en.wikipedia.org/wiki/Query_string).

      For example, http...my-website.com/my-game.html?variable_name=some_value

      However, if the variable is not present when the url is created. You may have to use postMessages to communicate information between the iframe and the parent page (See, developer.mozilla.org/en-US/docs/Web/API/Window/postMessage).

      Alternatively, data can be passed via other intermediaries such as iFrame element attributes, LocalStroage/IndexDB, AJAX requests.