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

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 Joomla blogs consist of just text and static images. A simple way to make your blog or website more interesting is to add a live chart, calculator or web form to it. Help your visitors solve their problems or visualize their situation!

To create this tutorial, we took a simple calculator for UK sales tax (value-added tax, VAT) and published it in a Joomla website. To be able to embed the Excel spreadsheet in a web page, we first converted it to Html web page using SpreadsheetConverter Html flavor.

With this clever Excel plugin you can also create advanced tables, import complex charts or open live graphs in Joomla.

 

Creating the 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.

 

Share the calculator with Publish to Cloud

SpreadsheetConverter offers click-to-publish sharing with Publish to Cloud, a built-in cloud service. Publish to Cloud offers free 7-day test publishing for all users and permanent production publishing for paid users.

Once you’ve converted a spreadsheet to web format you can make it immediately available on the web by clicking on the Publish to Cloud button on the SpreadsheetConverter ribbon inside the Sharing group.

 

Click on the Upload and get test link for 7 days button (light blue) if you need to test the calculator further, or click on the Upload and get Production link button (golden yellow) to replace the production version of the page.

 

If you’re unfamiliar with Publish to Cloud, you may want to read the tutorial on how to publish Excel spreadsheets on the web using Publish to Cloud before you continue.

 

Copy the Calculator URL

When the upload to Publish to Cloud finishes, the options to open or copy the calculator link and other options should appear right there. Click on the Copy full link and it should copy the calculator URL of published calculator to your clipboard which can be pasted anywhere.

 

Now switch to your site at Joomla.

 

Create a Wrapper Module for the published calculator

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 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.

 

Viewing 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.