Web Delivery: Embedded and Full-Screen CDF

CDF files can be embedded as objects within web pages or viewed as full-screen documents within a browser. Embedding CDF objects can be as simple as pasting a snippet of code provided by Mathematica when saving the file or by manually entering an <embed>-tagged object in your HTML.

The example above can be expressed as simply as with the following single line of HTML code, indicating file name and image size:

<embed src="VoronoiDiagram.cdf" width="588" height="380">

The same method works for blogs, but we also offer a WordPress Plugin for easy access to the same JavaScript referenced by Mathematica's embedding code and as used throughout this site, which guarantees cross-platform compatibility and directs viewers to the Wolfram CDF Player when needed. Watch the video in the How to Deploy section to see how it works.

How to Deploy

Additional Embedding Details

In order to guarantee compatibility with every type of browser, embedded content should be nested within <object> tags, as illustrated by the following template:

<object classid="clsid:612AB921-E294-41AA-8E98-87E7E057EF33" width="500" height="300" type="application/vnd.wolfram.cdf.text">
<param name="src" value="MYFILENAME.cdf">
<embed width="500" height="300" src="MYFILENAME.cdf" type="application/vnd.wolfram.cdf.text">
</object>

Wolfram CDF Embed Script

For greater flexibility we recommend using the Wolfram CDF Embed Script, which is a free open source JavaScript library. It requires no other libraries and guarantees cross-browser compatibility, provides a way to check that the CDF plugin is installed, displays a CDF Player logo and link when the plugin is missing, and offers a means to display static images in place of the interactive content. This same JavaScript is used by Mathematica's copyable embed code block. For the purposes of customization, the same code block is shown here as a template:

<script type="text/javascript" src="http://www.wolfram.com/cdf-player/plugin/v2.1/cdfplugin.js"></script>
<script type="text/javascript">
	var cdf = new cdfplugin();
	cdf.embed('/path/to/filename.cdf', width, height);
</script>

Coding multiple instances

The Wolfram JavaScript is a "print in place" method and can be repeated throughout the same HTML document, but it's more efficient to code multiple instances without repeating the JavaScript source or the plugin check:

<script type="text/javascript">
	cdf.embed('/path/to/additional.cdf', width, height);
</script>

Providing alternate content

It's good practice to provide a static image of your CDF content in case the CDF Player is not available to some of your site visitors. It could also provide a link to our CDF Player download site. Whatever you choose to display in this scenario is indicated by the addition of the setDefaultContent() function:

<script type="text/javascript">
	cdf.setDefaultContent('<p>Your replacement content</p>');
	cdf.embed('/path/to/additional.cdf', width, height);
</script>

Indicating that JavaScript should be enabled

If there are any concerns your viewers might not have JavaScript enabled, include the following additional line at least once for any HTML page containing CDF content embedded via JavaScript:

<noscript><p>Please turn on JavaScript</p></noscript>

See the Embedding CDF Examples page for a CDF that you can use for testing. Contact us for additional information about using the Wolfram CDF Embed Script.

Formatting Your Content for Embedding

The CDF Web Deployment Wizard will format content and create embed code automatically.

When formatting manually, interactive diagrams in your CDF file should be configured with the "PluginEmbeddedContent" cell style in Mathematica. To set this cell style, select the cell, choose Format > Style > Other from the menu, and type "PluginEmbeddedContent" into the dialog. This sets the following options:

ShowCellBracket->False,
CellMargins->{{0, 0}, {0, 0}},
ShowCellLabel->False

Additionally, once all other settings have been applied, use Mathematica's Option Inspector to set Deployed->True for the entire file. This prevents the CDF from being edited and hides the cursor.

Interactive diagrams created with Mathematica's Manipulate function are scalable and will adjust their size to the dimensions set by the embed code. For fixed dimensions, configure your content with ImageSize or ContentSize set to an explicit value or size specification. ImageSize->Medium will preserve Mathematica's default dimensions.

To determine the overall dimensions of the Manipulate object for specifying the embedding parameters, convert your Manipulate to a bitmap—select the cell bracket and choose the Cell > Convert To > Bitmap menu item. Then click the resulting image within the cell to select it, open the Option Inspector, and search for ImageSizeRaw. That will give you the width and height of the Manipulate.

Non-embedded Full-Screen CDF

Besides being embedded, CDF files can be viewed in a browser in full-screen mode when selected via hyperlinks. In order for anchor tags to display CDF content on-screen rather than downloading the file, your server's configuration files (.htaccess on Apache) need to specify the following MIME types for .cdf and related file extensions:

application/vnd.wolfram.player nbp
application/vnd.wolfram.mathematica nb
application/vnd.wolfram.cdf cdf
application/vnd.wolfram.cdf.text cdf