UnityWorks! Media Wiki

UWM jQuery Integration - Window Pop-Up

Modified: 2010/10/20 15:27 by admin - Categorized as: Integration
   Integration Information:

The jQuery integration for UnityWorks! Media consists of various code snippets to generate the working product. The service is composed of JavaScript, jQuery functionality and Web Services hosted by UnityWorks! Works. The service will automatically display content for the known criteria provided in the snippets below. If the criteria does not match our records, no content nor notification will be displayed at the user level.

   Integration Process:

The following code is recommended to be place within the HEAD tags of the html document. The highlighted ###### ID will be provided to you by UnityWorks! Media as a CTX id.

Integration Code 
<!-- UWM - Window Pop-up Integration -->
<script type="text/javascript" src="http://www.dealervideos.com/scripts/jquery.js"></script>
<script type="text/javascript" src="http://www.dealervideos.com/scripts/jquery-ui-dialog.js"></script>
<script type="text/javascript" src="http://www.dealervideos.com/scripts/swfobject.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.dealervideos.com/css/uwm.dialog.css" />
<script type="text/javascript" src="http://www.dealervideos.com/integration.svc/script/######"></script>
<script type="text/javascript">
    var uwmWidth = 384;
    var uwmHeight = 288;
    function uwmVideoAvailableHandler(vehicle, ele) {
       ele.append('<img src="http://www.dealervideos.com/css/fdIcons/0004.png"></img>');
       uwmExternalPopUp(vehicle, ele);
    }
    function uwmVideoUnavailableHandler(vehicle, ele) {
       ele.hide();
    }
</script>

Once the code above has been implemented, please apply the following code anywhere within the BODY tags of the html document. The highlighted ¤¤¤ represents the VIN id for the particular video.

Content Notification 
<div id="uwm_¤¤¤" style="width:150px; height:54px; cursor:hand"></div>

If a list of vehicles are present, multiple object are required. This will notify the user a video is available for each of the vehicles.

Content Notification 
<div id="uwm_¤¤¤" style="width:150px; height:54px; cursor:hand"></div>
<div id="uwm_¤¤¤" style="width:150px; height:54px; cursor:hand"></div>
<div id="uwm_¤¤¤" style="width:150px; height:54px; cursor:hand"></div>
<div id="uwm_¤¤¤" style="width:150px; height:54px; cursor:hand"></div>

In addition, any valid html object is available for use. The only requirement is to use an ID with the following value "uwm_" + vin .

   Player Video Resize Option:

Player size will automatically adjust to the size of the original video content. However, the player integration is completely customizable by declaring the following variables within the Integration Code snippet.

Integration Code Option 
var uwmWidth = ###;
var uwmHeight = ###;

Please note: There is a minimum limit of 320 by 240. If these variables are wrongfully set, integration may not function correctly.

   Additional Icons:

The following icons are available for use for your UnityWorks! Media integration. Save the image or simply replace the image src with the URLs below. For a complete set of icons please refer to the Complete Integration Icon Sets Page.

Example:
http://www.dealervideos.com/css/fdIcons/0004.png

http://www.dealervideos.com/css/fdIcons/0004.png









   Integration Notes:

If a jQuery build is already in use within the host website. Please remove the jQuery sources from the snippet above to reduce downloading times and any script conflicts. If the latest jQuery 1.3.2 is currently not in use, UnityWorks! Media suggests to download the latest build to prevent any script conflicts. You can find more information at jQuery.com

2008 UnityWorks! Media