Plugin Directory

Edge Suite

Manage and view your Adobe Edge Animate compositions on your website.

Dev version

When experiencing any problems, please always try the latest dev version (http://downloads.wordpress.org/plugin/edge-suite.zip). Manual installation is needed. New features and bugfixes are always tested first in the dev version before they are being merged into the stable version.

Manual integration

Animation with newer versions of Edge Animate can easily be integrated manually without depending on the plugin. Consider that as an option when running into problems.

Publish your composition with option "Animate Deployment Package" and rename the .oam to .zip. Unpack it and upload the "Asset" folder to your server under "myproject" (maybe /wp-content/uploads/myproject). Open the contained main project .html file. Copy the

<div id="Stage" class="EDGE-11111111"></div>

line into your desired template. Also copy everything in between the 'script' tags (including the tags) and insert it into the same template. The first line after the opening script tag should read

var custHtmlRoot="";

Adjust that so it matches the relative project directory. E.g.:

var custHtmlRoot="/wp-content/uploads/myproject";

Save the template. The animation should come up.

General things to check when problems occur

  • Open the debug console in Chrome (mac: alt + cmd + j) or Firefox and check for JavaScript errors.

jQuery issues

Try to enable jQuery no conflict mode in the settings page, this might resolve conflicts between Edge Animates version of jQuery and other plugins.

Animations don't show up

Uploading worked but nothings shows up on the page. Things to check:

  • Look at the source code of the page and search for:

  • "stage" - You should find a div container, if so HTML rendering went fine.

  • "_preloader" - You should find a script tag, if so JS inclusion went fine.

  • If "stage" or "_preloader" are not found, disable other plugins for testing to check if they might interferer.

  • For testing remove all other fancy JavaScript like galleries, slideshows, etc. that are placed alongside the animation, the JS might collide.

  • Enable the JS debug log in the settings

  • Enable jQuery no-conflict mode in the settings

Custom JavaScript

When using custom JavaScript code make sure you reference the Stage through


$('#Stage') or sym.$('#Stage') will not work. The reason is that Edge Suite needs to alter the Stage Div Id, so '#Stage' does not exist. When using sym.$('Stage') Edge Animate will use its internal reference to get the stage.

Head Cleaner: Animations don't show up

Head Cleaner basically skips the processing of edge_suite_header() which is needed to inject the Edge Javascript. Under Settings > Head Cleaner > Active Filters check the box "Don't process!" for "edge_suite_header" and click "Save options". This stops Head Cleaner from "processing" ede_suite_header(), which basically means allowing edge_suite_header() (reverse logic).

PHP ZipArchive not found

zip.so needs to be installed as a PHP library

Background animation

If you want to use your composition as a background animation, try the following CSS on your stage id, e.g. #Stage_mycomp

    position: absolute !important; /* That is not pretty, but no way around it. */
    top: 0px; /* Aligns the animation with the top of the header (can be removed or changed) */
    z-index: -5; /* Places animation in the background, set to a positive value for an overlay */

    /* Only use the following if you want to center the animation */
    left: 50%;
    margin-left: -346px; /* Half the width of the stage */
    top: 50%;
    margin-top: -200px; /* Half the height of the stage */

Requires: 3.6 or higher
Compatible up to: 3.8.11
Last Updated: 4 months ago
Active Installs: 3,000+


4.7 out of 5 stars


0 of 5 support threads in the last two months have been resolved.

Got something to say? Need help?


Not enough data

0 people say it works.
0 people say it's broken.