Conduit API
Case Study
Mini-Games -> Creating an HTML component
 
In order to embed our game in the engine, we will have to set up a custom HTML component.
 
Let’s create our first HTML component that will display the phrase Hello World:

  1. Sign into your account and go on to the “toolbar” section. This is where you edit and customize your toolbar. You will see a categorized list of featured components.
  2. Under “Advanced”, click “Your Component (HTML)”.
  3. This will take you to a new page with two options – “Create a new HTML Component”, and “Create a new HTML Component with an external URL hosted on your site”.
  4. For this first example, we will choose the first option, as we need no external files to be included. Go on and click “Create a new HTML Component”.
  5. You will get to a page with some fields to edit your new component. Notice that the first field contains some HTML text. Here you will add your content.
  6. Inside the HTML text, look for the line that says: Replace that line with text Hello World!
  7. You can click the “Preview HTML” button to see how your component will look. The text you entered should appear in the preview.
  8. Give your component a name and width in the matching fields.
  9. Now scroll down and hit the “Save” button.
  10. Two things should happen is this stage –
    • You will return to the “Toolbar” page, where you should see that your new component was added. Roll over the component area in the editor, and notice the several editing options that are available
    • If you already installed your toolbar, it should refresh automatically and you should see your new component up there. If not, install your toolbar now. If for some reason your toolbar did not refresh, click the little arrow near your toolbar logo to open the toolbar menu, and choose “Refresh Toolbar”.
  11. And that’s it!
 
For our actual game, we will have to have our game files stored on a hosting server of our choice.

In this example, we will create another custom component, which we will upload to our hosting server.

  1. Download and unzip the tutorial files folder. In there you will find all the HTML, Flash, JavaScript and PNG files of a sample flash game.
  2. Upload the entire content onto a dedicated directory on your server.
  3. Repeat steps 1 – 3 of the previous example.
  4. This time, choose “Create a new HTML Component with an external URL hosted on your site”.
  5. Enter the URL that points to “index.html” in the folder you uploaded.
  6. Set the width to 250, and give a label for your component
  7. Click the “Save” button
  8. Now you should be able to see the game inside your toolbar!


The rest of this tutorial will go into the details of the component we just created.