How to embed a Construct 2 project into your website.

Index

Stats

9,507 visits, 19,083 views

Translations

This tutorial hasn't been translated.

Tools

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-

  • 0 Comments

  • Order by
Want to leave a comment? Login or Register an account!