Provide an Interactive Estimate Calculator

Let your site visitors run the numbers

+ Take advantage of the power of Excel

+ Web-based viewing experience

+ No code required

Excel Embed Tutorial
Watch How-to Video

Rather than requiring potential customers to request initial quotes by email, why not provide a way for them to calculate it themselves, directly on your Web site?

It's easier for potential customers to move on to the next company in their search results than to send you an email inquiry and wait for your reply. By providing your site visitors with an interactive estimate calculator, they're more likely to at least consider your offering. And when they do contact you, it's likely to be a more qualified lead.

But estimates can be complex, involving a number of frequently changing business rules and interrelated parameters, making custom-code implementations hard to keep up-to-date. Why not lay out your data in a spreadsheet, and take advantage of built-in data calculations and formatting capabilities? And it makes updating your pricing logic as easy as updating your spreadsheet.

How-to Guide

This tutorial shows you how to use the Microsoft Excel Web App to provide an interactive estimate calculator on a Web page. Of course, Excel can be used for a much wider range of solutions than just estimate calculators. Regardless of the purpose of your workbook, the steps to embed it on a Web page will be the same.

The Microsoft Excel Web App is an online companion application to the Excel desktop client that allows you to view and edit Excel workbooks directly within a Web browser. Storing an Excel workbook on Windows Live SkyDrive (an online service that provides 25 Gb of free storage) enables it to be embedded and viewed directly within a Web page, using the Excel Web App embed functionality.

By using Excel to build your estimate calculator, you can take advantage of Excel's rich calculation engine and graphing capabilities. Creating the workbook represents the bulk of the effort, as you'll probably want to populate it with initial data, set up formulas, do some formatting, and maybe add a chart or a graph. (If you're using the Excel desktop client to set up your workbook, check out Differences between using a workbook in the browser and in Excel, especially the sections Features that prevent a workbook from being opened in the browser and Unsupported interactions.)

Once you've created the Excel workbook, embedding it on a Web page is as easy as saving it to the Web, grabbing the embed code and pasting it onto your page - no code required. Visitors to your site will then be able to view the workbook and interact with it directly on your Web page, from within the browser and without having to have Excel installed.

Click on each of the steps below for step-by-step instructions.

Step 1 - Create a public folder on Windows Live SkyDrive

Go to Windows Live SkyDrive. Sign in with your Windows Live ID. [Show screenshot]
(Skip ahead to Step 2, if you have an existing public folder you want to use.)

Create a new folder for public documents, by clicking on the New menu and selecting Folder from the drop-down list.

Example

Enter a name for the folder, and click the Next button.

Example

Make the folder public by dragging the Share with slider control up to Everyone (public), and click the Next button. Everything you upload to this folder will be accessible to anyone on the Web.

Example

Step 2 - Upload your Excel workbook to Windows Live SkyDrive

From within your previously created public folder, upload your workbook by clicking on the Add Files menu item.

Example

Specify which file to upload by using drag & drop from the Windows Explorer or clicking on the link to select documents from your computer.

Example

Once the file's been uploaded, click the Continue button.

Example

There are a number of other ways to upload files to Windows Live SkyDrive. See Store a file for Office Web Apps in Windows Live for more information.

Step 3 - Copy the embed code and paste it on your web page

Hover over the document you want to share, and you'll see a number of options appear on the right.

Click on the More drop-down menu, then on the Share sub-menu, and select Embed.

Example

To copy the embed code, select the text box containing the HTML mark-up, or click on the Copy link above it, and click on the Done button.

Example

The default embed experience prevents the user from interacting with the workbook and from entering any text; not exactly the kind of behavior one expects from an interactive estimate calculator. Fortunately, the embed experience can be customized (more on this in the Beyond the basics section below).
To enable interactivity and allow input, replace the highlighted text in the default embed code:

Example

Default HTML mark-up

with the highlighted text below:

Example

Customized HTML mark-up

The code can be embedded into any HTML page that supports iframes.

If you're using Wordpress, Joomla, Drupal, BlogEngine.net, DotNetNuke, or ScrewTurn Wiki, you can get more detailed instructions and how-to videos by visiting the Code Snippet Embedding Tutorial.

Save it and view your page to see your workbook embedded on your website! Your visitors can interact with it directly on your page. Try it - the workbook at the top of the page is live so you can test it out for yourself.

Example

Final Page With Embedded Excel App

Beyond the basics

Customizing the embed experience
The Excel Web App provides customization options for you to control how your workbook gets embedded.

At the end of Step 3 above, we modified the following two attributes:

  • &AllowInteractivity=True enables users to interact with the workbook. This parameter must be set to True in order to allow typing.
  • &AllowTyping=True enables users to type in the cells of a workbook. (Note that this doesn't necessarily mean they can save their changes.)

Other customizations to call out:

  • To display only part of a workbook, define a named region in Excel (e.g. WebView) and add &Item=WebView (or whatever your name happens to be) to the embed code.
  • To specify the size of the frame in which your workbook is displayed, change the iframe width and height attributes in the embed code.

See Customize how your Excel workbook is embedded for documentation on all the available customization options.

Links to other resources