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

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 HTML web pages, that can easily be imported into almost any 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 iframe code

One of the most convenient HTML structures is the iframe. Think of an iframe as an embedded window on one web page that shows the content of another web page.

Illustration of what an iframe is

With the help of an iframe, we can embed our calculator web page in almost any other web or blog page.

When the upload to Publish to Cloud finishes, a group of options appears at the bottom of the window. We clicked on the Copy iframe… link to copy the iframe code for the published calculator to the clipboard.

In the iframe code,  we can adjust the height and width of the iframe to avoid scrolling. The iframe statement finally looked like this:

<iframe src='https://ssccust1.spreadsheethosting.com/1/59/226a21cef25ec5/Sales_tax_calculator/Sales_tax_calculator.htm' width='960' height='720' border='0' frameborder='0'>
<p>Your browser does not support iframes.</p>
</iframe>

The iframe technique works just as well regardless of where you have uploaded the converted web page. Just replace the link to the calculator in the example above with a link to where you uploaded your web calculator.

Insert the calculator into Blogger

In Blogger, we inserted the iframe source code directly in the HTML view.

import-excel-blogger-iframe-600-400

Insert the calculator into Drupal

In Drupal, we had to set the input format to “Full HTML” before we inserted the iframe source code directly in the HTML view.

import-excel-drupal-iframe-600-508

Insert the calculator into Joomla

In Joomla, the HTML editor removes the iframe tag by default. We had to turn this feature off to be able to insert the iframe tag. We went to “Extensions > Plugin Manager > Editor > TinyMCE“ and located the “Code cleanup on save” option, which we set to “Never”.

import-excel-joomla-iframe1-517-436 (1)

We could then paste the iframe source code into the HTML Source Editor, click Update and save the article.

import-excel-joomla-iframe2-600-523

Insert the calculator into Squarespace

In Squarespace, we inserted the iframe source code directly in the “Raw HTML” view.

import-excel-squarespace-iframe-600-491

Insert the calculator into TypePad

In TypePad, we inserted the iframe source code directly in the “Raw HTML” view.

import-excel-typepad-iframe-600-446

Insert the calculator into WordPress

In WordPress, we inserted the iframe source code directly in the HTML view. It is important to click Update before you return to the Visual view, because otherwise WordPress may remove the iframe.

import-excel-wordpress-iframe-600-405

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