Last modified: August 29, 2011 12:46:39.

Embedding CU3ER in web page

Once you are satisfied with your CU3ER buildout you can download all files directly from cManager by using export command or from your projects page.

To embed CU3ER to your actual page, you need to:

  1. Download CU3ER project zip package.
  2. Extract .zip project on your hard disk.
  3. View "embed_example.html" in your browser.
  4. Upload all provided files in your package to your web server based on instructions in "embed_example.html".
  5. Insert provided embed code to your actual page based on instructions in "embed_example.html".
  6. Upload your page to server.
  7. Enjoy.

To deploy created CU3ER on your actual page you simply need to copy/paste embedding code from the sample page to your actual page and upload related files to the server.

Embedding code example

In your page place following code where you want your CU3ER to appear (please note, below is just a sample code - actual paths / file names may vary depending on your settings made in cManager):

Pro users:

<div id="CU3ER">   
   <!-- modify this content to provide users without Flash or enabled Javascript with alternative content information -->
   <p>Click to get Flash Player<br /><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
   <p>or try to enable JavaScript and reload the page
   </p>
</div>

<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cu3er.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
  jQuery(document).ready(function($) {
    $("#CU3ER").cu3er({
      vars: {
        width: 620,
        height: 700,
        flash_version : "10.0.0",
        xml_location : 'CU3ER-config.xml',
        swf_location: 'CU3ER.swf'
      },
      params: {
        wmode: 'transparent'
      },
      attributes: {
        id: "CU3ER",
        name: "CU3ER"
      }
    });
  }); 
</script>

Lite users:

<div id="CU3ER">   
   <!-- modify this content to provide users without Flash or enabled Javascript with alternative content information -->
   <p>Click to get Flash Player<br /><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
   <p>or try to enable JavaScript and reload the page
   </p>
</div>

<script type="text/javascript" src="js/CU3ER.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
  // add your FlashVars
  var vars = { xml_location : 'CU3ER-config.xml' };				
  // add Flash embedding parameters, etc. wmode, bgcolor...
  var params = { bgcolor : '#ffffff' };
  // Flash object attributes id and name
  var attributes = { id:'CU3ER', name:'CU3ER' };
  // dynamic embed of Flash, set the location of expressInstall if needed
  swfobject.embedSWF('CU3ER.swf', "CU3ER", 640, 480, "10.0.0", "js/expressInstall.swf", vars, params, attributes );
  // initialize CU3ER class containing Javascript controls and events for CU3ER
  // var CU3ER_object = new CU3ER("CU3ER");  
</script>

SWFObject.js (JavaScript file for embedding flash on web page) is provided within the CU3ER downloadable package, but you can freely download your own script.

For further information on embedding flash files and on additional setting of the SWFObject script, visit http://code.google.com/p/swfobject/. There’s also a nifty AIR application, which guides you through the whole process and generates all codes for you as well. Sweet!

You might be also ineterested to check following articles about CU3ER embedding: