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.
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
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
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.
(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.
Enter a name for the folder, and click the Next button.
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.
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.
Specify which file to upload by using drag & drop from the Windows Explorer or clicking on the link to select documents from your computer.
Once the file's been uploaded, click the Continue button.
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.
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.
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:
Default HTML mark-up
with the highlighted text below:
Customized HTML mark-up
The code can be embedded into any HTML page that supports iframes.
If you're using
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.
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.
Customize how your Excel workbook is embedded for documentation on all the available customization options.
Links to other resources