The easiest way to import an Excel calculator, live chart or smart form into a Joomla blog or website is to use SpreadsheetConverter. This tutorial will show you how to publish live Excel spreadsheets and charts in Joomla using Publish to Cloud and an iframe.

Adding a live calculator or chart to your website adds value to your visitors and makes your website more interactive. SpreadsheetConverter converts Excel spreadsheets, charts and tables to standard Html web page, that can easily be imported into your Joomla blog or website.

 

Background

Most blogs and websites consist of just text and static images. A simple way to make it more interesting is to add a live chart, calculator or web form to it. Help your visitors solve their problems!

To create this tutorial, we took a simple calculator for sales tax and published it on the web. To be able to embed the Excel spreadsheet in a web page, we first converted it to HTML and JavaScript using SpreadsheetConverter HTML.

With this clever Excel plugin you can also create smart web forms, advanced tables, import interactive charts or open live graphs on your own website.

Before we converted the sales tax calculator spreadsheet to a web page, we had to open it in Excel.

Screenshot of the sales tax calculator in Excel

Create the web calculator

Converting the spreadsheet to an HTML file was simple with SpreadsheetConverter HTML. We just opened the calculator in Excel and pressed the Convert button in the SpreadsheetConverter ribbon. We enabled Live Preview to have the web page automatically refreshed every time we saved new changes in Excel.

Screenshot of the Convert section of the ribbon

Upload the calculator with Publish to Cloud

SpreadsheetConverter offers click-to-publish web hosting with Publish to Cloud, a built-in cloud service that is hosted on the globally distributed Amazon S3 infrastructure with superior performance, extreme reliability and massive scalability. Over a dozen server locations around the globe ensure that your calculator always is within easy reach of your global audience.

Publish to Cloud offers free 7-day test publishing for all users and permanent production publishing for paid users.

Once we had converted the spreadsheet to web format we could upload it to the web by clicking on the Publish to Cloud button on the SpreadsheetConverter ribbon.

Screenshot of the Publish to Cloud menu in the ribbon

Copy the link to the uploaded calculator

When the upload to Publish to Cloud finished, an option to open or copy the calculator web page appeared. We clicked on the Copy full link and it copied the link to the uploaded calculator to the clipboard.

Create a Wrapper Module for the published calculator

Now switch to your site at Joomla.

To embed the published calculator in Joomla, first you need to create a Wrapper Module. The wrapper module is used to add external content to your website. It is like iframe code but the way it is set up is bit different. But please do not worry even if you have not created any wrapper module before, the steps are simple.

To create a wrapper module, click on Extensions menu then click on Modules menu.

 

Now click on the New (with plus icon) button.

 

Scroll down in the list and click on Wrapper link.

 

It opens up the settings for the Wrapper Module.

 

First paste the calculator URL you copied from Publish to Cloud into the URL field.

Secondly change the Height value to any higher or lower number so that you can control how much of the calculator content to show. We know it is hard to find the correct height at first time so just enter a number, say 400 then tweak it later as you see fit.

On the right-hand of the same wrapper module settings, you should see Position dropdown. You must specify a position where the calculator should be shown.

 

That’s all you need for now. You can tweak other settings later.

Now we are ready to save this wrapper module, just give a proper Title and click on the Save button.

Insert the Wrapper Module into the Article

Now we can insert this wrapper module into any Articles.

Let’s create a new article. Place the cursor where you want to insert the calculator. Then click on Module toolbar item.

It will open up the Module selection pop-up. Click on the name of wrapper module you created for the calculator. In this tutorial, it is called Sales Tax Calculator Wrapper.

If you do not find the name of your wrapper module, it might be that the wrapper module was not created successfully or it is hidden down below so you need to search by typing in the Search box.

After that, you should see a piece of code inside the editor as shown below.

Finally enter a proper Title for this article, let’s say Sales Tax Calculator then click on Save button.

Now it is time to view the article where the calculator is embedded. An easy way to view the article is to create a menu item and point it to the article.  If you prefer other ways, please skip the next step.

Create menu to open up the article

Click on the Menus menu then click on New button. Choose Single Article as Menu Item Type. Click on Select button to choose the article that we created above. In this tutorial, the name of the article is Sales Tax Calculator.

Now just enter a proper name in the Menu Title then click on Save button.

View the result

We opened the web page in a browser and tested the calculator – it worked great. For every new value we entered into the Price field, it automatically calculated new amounts for VAT and Price, just like Excel.

Interested in learning more?

SpreadsheetConverter can publish almost any Excel calculator, chart, spreadsheet or electronic form on the web. For more examples, visit our Examples library.