Migrating From Legacy Flash-Only Embed Codes

If you are using Issuu’s old Flash-only embed code format, your users will not be able to read your embedded content unless they have Flash installed in their browsers.

This article explains how to update your embed code so readers can still view your content without Flash installed.

Follow the instructions below to ensure your readers can still read your embedded publications without Flash installed.

The old embed code made use of the embed and object tags.

• Here is an example of how the old embed code looks using the embed tag:

<embed style="width: 300px; height: 193px; z-index: 0; display: block;" type="application/x-shockwave-flash" src="https://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf" allowfullscreen="true" menu="false" flashvars="mode=embed&amp;layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&amp;showFlipBtn=true&amp;proShowMenu=true&amp;documentId=100318163929-24d2670dcbd84b368afec3f0ee73325c&amp;docName=fullbook_lowres_3&amp;username=stratton&amp;loadingInfoText=Learning%20By%20Design&amp;et=1275935260482&amp;er=59" id="2_embed" wmode="transparent" width="300" height="193"></embed>

• Here is another example of the old embed code using the "object" tag:

<object style="width: 420px; height: 560px;" width="320" height="240" data="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf" type="application/x-shockwave-flash"><param name="allowfullscreen" value="true" />

<param name="menu" value="false" />

<param name="allowscriptaccess" value="always" />

<param name="src" value="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf" />

<param name="flashvars" value="mode=embed&amp;viewMode=presentation&amp;layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&amp;backgroundColor=FFFFFF&amp;showFlipBtn=true&amp;documentId=100318163929-24d2670dcbd84b368afec3f0ee73325&amp;docName=zeiss_nuovo_cannocchiale_v8_ita_fly&amp;username=testing&amp;loadingInfoText=Zeiss%20nuovo%20cannocchiale%20v8%20ita%20flyer%202014&amp;et=1397564036921&amp;er=41" /></object>

Customizing Embeds

With our old Flash reader, you had the ability to customize your embeds by skinning them using a Flash-based markup language. This is no longer supported going forward.

You still have many customization options available when setting up your embed using the Embed Widget, such as changing the background color, adding a background image and using your logo. Read more about Embedding an Issuu publication

Recommended Action: Create a New Embed Code

To create a new embed code, select a publication from your Publication List page, navigate to EMBED ON WEBSITE and you'll be able to customize your embed. Learn how to customize your embed and get a new embed code.

Alternative Action: Migrate the Embed Code

If you have many embed codes that need to be replaced, we support a more automated migration path that will work in all non-Flash browsers.

In the example of the old embed code above, the parameter called documentId is a reference to the embedded document:

documentId=100318163929-24d2670dcbd84b368afec3f0ee73325c

You can then take this value from the existing old Flash embed code and use it with the following special migration embed code:

<iframe width="525" height="679" src="//e.issuu.com/legacy.html?documentId=100318163929-24d2670dcbd84b368afec3f0ee73325c" frameborder="0" allowfullscreen></iframe>

This will not support all embed customization options from the embed page as described in the previous section, but it can be a solution if you want an automated way to migrate the old embed codes automatically. The following additional parameters are supported:

• pageNumber is a positive integer specifying the starting page number
• viewMode controls if the embed should be shown with a single page or double page (default). To force double-page, set this to doublePage (or the legacy magazine). To force a single page, set this to singlePage (or the legacy presentation)
• backgroundColor is a hex triplet setting the background color of the embed itself (not the full-screen reading experience).

Apply these using standard URL parameter notation like in the example below:

<iframe width="525" height="679" src="//e.issuu.com/legacy.html?documentId=150412172205-7972b382a2eadfbf3f52225007919cd2&pageNumber=2&viewMode=presentation&backgroundColor=00ff00" frameborder="0" allowfullscreen></iframe>