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 websites 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 US sales tax and published it in various blogs and websites as an HTML “iframe”, an inline frame that shows a web page within another web page. 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 advanced tables, import complex charts or open live graphs in websites.

Creating and uploading the HTML 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 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 iframe code

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 iframe… link and it should copy the iframe code of published calculator to your clipboard which can be pasted anywhere.

With the help of an iframe, we can now show our calculator in almost any other web or blog page. The iframe is a ”viewport” that shows the content of another page.

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

This technique works even if you have uploaded the converted web page to another web server. Just replace the calculator URL in the example above with a link to your web calculator.

 

Inserting the calculator into Blogger

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

import-excel-blogger-iframe-600-400

Inserting 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

Inserting 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

Inserting the calculator into Squarespace

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

import-excel-squarespace-iframe-600-491

Inserting the calculator into TypePad

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

import-excel-typepad-iframe-600-446

Inserting the calculator into WordPress

In WordPress, we inserted the iframe source code directly in the HTML view. We then clicked Update without going to the Visual view, which otherwise would have removed the iframe.

import-excel-wordpress-iframe-600-405

Viewing the result

We opened each 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.

convert-excel-flash-2-600-344

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.