Pasting Third Party HTML Code into the InstantPro Builder
Adding additional HTML code is an easy way to add extra functionality to your InstantPro web site. Many web sites offer add-ons and mini-applications for your web site, if these addons are all simply HTML code then they will likely work with the InstantPro builder.
HTML is a programming language that is used by nearly every web site on the Internet, and is the code behind all of the objects that you find on web sites. This includes the background colours, the placement of images, text, sounds any many more! You can manually edit this code on your InstantPro web site.
Currently the InstantPro builder does not support adding in additional Javascript or PHP code. If you would like to include features that utilizes these coding languages, we would suggest hosting them at an external location and linking to them from your InstantPro site.
Using this guide you will be shown how you can add your Third Party HTML code into your InstantPro web site, a little knowledge of HTML code may help you along the way, however is not necesary. The InstantPro builder provides an HTML editor for the Standard page type.
For this tutorial, I will show you how to insert a HTML image into your InstantPro web site. Obviously this task is acheiveable without using the HTML editor, but adding an image via HTML is an easy way to learn how the HTML editor works.
Our Test HTML Code
In this example I will be using a small section of HTML code which contains the Google Calender mini-applicaton. You can generate your own HTML code for this from the following web site address:
http://www.google.com/calendar/embedhelper
It is recommended that if you wish to make a personalised calender that you create one through your account, alternatively if you would rather just place a calender on your web site you can use the code below.
<iframe src="http://www.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&ctz=Pacific%2FApia" style=" border-width:0 " width="800" height="600" frameborder="0" scrolling="no"></iframe>
Adding the code into InstantPro
Now that we have our HTML code, we are ready to add it into the InstantPro builder.
1. To do so, we need to launch the InstantPro builder, you can do this by logging into your MyFreeola account.
2. Once the InstantPro builder is ready, select the 'Page Manager' button from the Site Overview.
You will now be shown all of the pages that you have in your InstantPro web site. You will need to click the 'Edit' button next to the page you wish to use with your HTML code.
We would advise that if you do not have a good understanding of HTML code, that you create a 'Work In Progress' page. This can be acheived by selecting the option 'Create a copy to edit' once you have pressed the 'Edit' button.
Click image to view full-size
3. You will now be shown the editor for your individual page, this is where you would have originally designed your web site. To add our HTML code, you will need to press the 'HTML' Symbol towards the top right of your Toolbar.
After you have selected the 'HTML' button, you will be shown the HTML code that makes up that specific page of your InstantPro web site, this is where we will need to place our additional HTML code.
Click image to view full-size
If you do not have any specific knowledge of HTML code, then it is best add your code underneath all of the currently existing HTML code for your web page, this way we are unlikely to disturb any of your current content. For most objects that you add in via the HTML Editor, you will be able to move them around freely after you have Updated your code.
You should now see your HTML object at the bottom of the page, you can now use the editor to move it to wherever you wish it to go. To do this you can simply drag and drop.
Click image to view full-size
