Search:     Advanced search
Browse by category:
Submit your own Question

Integrating Wiqet in your website in 6 steps.

Views: 28071
Votes: 98
Posted: 31 Aug, 2009
by:
Updated: 04 Aug, 2010
by:

Implementing Wiqet in 6 steps

Version: 3.2
Date: 17-11-2009

Testdrive the Wiqet here: This reference implementation contains the same code as described below.

Table of Contents

top

Step 1: Wiqet in action


top

See the Wiqet in Action

Go to http://www.wiqet.com and make your own Wiqet to give you an idea of how the Wiqet works.


top

Creating your own Wiqet

Creating your own Wiqet
To start, create your own Wiqet on (http://www.wiqet.com) in order to get a better understanding of the basic principles and implementation of the application. The Wiqet described in this document differs with the example-Wiqet to the extent that the latter can only be managed through e-mail. 
top

Optional: Support

General questions. Should you have any general questions about the use of Wiqet or about this document, please feel free to send an e-mail to info@wiqet.com or to call 0031  (0)2 4230500       
 
Technical questions. Should you have any technical questions about the implementation of a Wiqet, please feel free to send an e-mail to support@wiqet.com with a detailed description of your problem. If possible, please send us as much relevant information; code, url’s and possibly login data. In case of a urgent technical complication you can call Sequential Media on 0031 (0)33 4625067  
top

Step 2: Explanation how Wiqet works

The Wiqet consists of three flash-files ( The player.swf, the editor_photo.swf and the editor_video.swf) which are controlled via JavaScript. We advise you to create a separate page for the player and the editor (For example player.php and editor.php). The editor allows you to create a Wiqet, while the player allows for the Wiqet to be played on the pages of your choice. You do not need to download anything as the flash-files reside on Wiqet server.

Figure 1 gives a insight on how the Wiqet works.

 
top

Photo Editor

A photo wiqet consists of one or more pictures and possibly an audio file (recorder on a computer, telephone or mp3 upload). The photo editor allows the user to create the Wiqet. The data, which is available within a Wiqet, is stored on a webserver and can be moved, if wanted, to your own server. This move is obtained by the use of a XML connection. You need to specify to which URL this XML can be posted. In case you want pictures to be sent too, you need to take into account that the XML-file will be very big. Whenever you save data on your own server, you need to make it available for the Wiqet. For this communication it is essential to send a unique code along with which we can communicate. After that, you will get a Wiqet code from us, this is a unique code with which you can play the Wiqet.
top

Video editor

A video editor Wiqet consists of one video or webcam file. The video editor allows the user to create the Wiqet.
The data, which is available within a Wiqet, is stored on the streaming Wiqetserver. Because the video is streaming, meaning it will play continuously without the need of being loaded, it is impossible to transfer the files to your own server. In case it is needed to transfer the file to your own server you can contact Wiqet support to review the possibilities.
top

Step 3: Getting your API key

top Before you start implementing the editor you need to get a API key from http://www.wiqet.com/?pageid=165&lang=english.
After you filled in the form you will receive an email where you will find your API key. This enables you to integrate the Wiqet editors in your website.

note: The API key is linked with the url from your website. The Wiqet editor will not load if the url <-> API key combination is incorrect. Getting your API key is free so we make it easy for developers to integrate the Wiqet in their site.
 
top

Step 4 : Implementing the editor


top

Wiqet editor common

The Wiqet editor is loaded via javascript. The video and photo editor each use a seperate javascript class to load the Wiqet. Once the "save"button is clicked the Wiqet will initiate a callback function (standard called "callback") and give back the "wiqetCode" generated by the Wiqet server. You can save this "wiqetCode" to your own database so it is linked to your website and edit or play the specific Wiqet.

Figure 2: How the javascript controls the editor and receives a callback funtion.


The javascript contains a couple of important elements which we wil highleight.

Include Wiqet javascript path:

<script type="text/javascript" src="http://www.wiqet.com/wiqetapi/?api_key=b9532fc081ed7a2aa43f20a548cc9d8e"></script>

Place this snipped in the <head></head> section of your html and replace the bold API key with your own, generated from our website.


top

Photo editor: javascript

The photo editor is loaded by calling the following peice of javascript code:

<script type="text/javascript">

/**
          Photo editor
        */
        var photo = new wiqet.photo.Editor('wiqetphoto', {

            // 'wiqetCode':           'pkqmzkznqxw'  //wiqet code only when you want to edit a Wiqet

            ,  'uniqueId':       '1'       //id to identify a user, defined by you
          }
          , {
              //default flashplayer properties
              'width':              '450px'
            , 'height':             '375px'
            , 'bgcolor':            '#FFFFFF'
            , 'align':              'middle'

            , 'allowScriptAccess':  'always'

        }, 'callback');

</script>


The Wiqet editor needs to know in what element it can be loaded. So you need to implement the following code snipped in your <body></body> tag. You can control the id in your javascript function call above.
<div id="wiqetphoto">Wiqet is loading.....</div>

Once you push the "save" button in the Wiqet the callback function is initiated via an AJAX call to give back a "wiqetCode".

<script type="text/javascript">

//function that is used to save the Wiqet information in your database
function callback(wiqetCode) {
      
      //Implement javascript that saves the data to your database and if necesarry do a redirect.

</script>


Figure 3: callback function further explained



top

Video editor: javascript

The video editor is loaded by calling the following peice of javascript code:

<script type="text/javascript">

       /**
          Video editor
        */
        var editor = new wiqet.video.Editor('wiqetvideo', {
           // 'wiqetCode':           'w3-gpqctycn'  //wiqet code for editing only
              , 'uniqueId': '72a32060ec76091787f6c6ab7be31182'
          }
        , {
            //default flashplayer properties
            'width':              '450px'
          , 'height':             '375px'
          , 'bgcolor':            '#FFFFFF'
          , 'align':              'middle'
          , 'allowScriptAccess':  'always'
        }, 'callback');

</script>


The Wiqet editor needs to know in what element it can be loaded. So you need to implement the following code snipped in your <body></body> tag. You can control the id in your javascript function call above.
<div id="wiqetvideo">Wiqet is loading.....</div>

Once you push the "save" button in the Wiqet the callback function is initiated via an AJAX call to give back a "wiqetCode".

<script type="text/javascript">

//function that is used to save the Wiqet information in your database
function callback(wiqetCode) {
      
      //Implement javascript that saves the data to your database and if necesarry do a redirect.

</script>


As you can see the video editor is implemented much the same way as the photo editor.

top

Javascript examples to integrate in your site.

The following code snippets are examples of how to implement a editor using javascript. You can copy and paste these scripts and modify them to suit your needs.

Via post method (for photo editor)
Essentially you fill in the fields of a hidden form via javascript. Once the callback function is called the email field is checked for and the submit button is activated. Implementing video editor is very simular.
<!--Load javascript library from Wiqet server-->
<script type="text/javascript" src="http://www.wiqet.com/wiqetapi/?api_key=ee3b15d5736dc69bd748d544d01145e9"></script>
<div class="content">
<a href="/wtest/wiqetsglobal">List of made Wiqets</a><br>

<div class="text">
Please make a Wiqet and provide a email address to save the Wiqet.
</div>
<div id="wiqetphoto">Wiqet loading...</div>

<!--Form for posting the data to your server-->
<form method="post" action="/wtest/wsave/" name="wiqetForm">
<label>email address:*</label><br>
<input id="email" name="email" size="35" type="text" value="" onchange="check_valid_email_during(this.value)" /><br>
	<label>unique id generated by php (normally hidden)</label><br>	
<input id="unique_id" name="unique_id" type="text" value="72a32060ec76091787f6c6ab7be31182" size="35"/><br>
<label>player url (normally hidden)</label><br>
<input id="player_url" name="player_url" value="" size="35" type="text" /><br>
<label>wiqetCode (normally hidden)</label><br>
<input id="wiqet_code" name="wiqet_code" value="" size="35" type="text" /><br>

<button type="submit" value="submit" id="submit" name="Submit" disabled >submit</button>

</form>
</div>
<script type="text/javascript">
/**
Photo editor
*/
var photo = new wiqet.photo.Editor('wiqetphoto', {

'wiqetCode': '' //wiqet code only when you want to edit a Wiqet
,'uniqueId': '72a32060ec76091787f6c6ab7be31182' //id to identify a user, defined by you
}
, {
//default flashplayer properties
'width': '450px'
, 'height': '375px'
, 'bgcolor': '#FFFFFF'
, 'align': 'middle'
, 'allowScriptAccess': 'always'
}, 'callback');

//Function that gets called back by the Wiqet. You can use this function to fill the fields of the form or to save via AJAX
function callback(wiqetCode){

//set variables in form
document.getElementById('wiqet_code').value = wiqetCode;
document.getElementById('player_url').value = '/wtest/gview/' + wiqetCode; //location where player recides and pleople can play the Wiqet.

//get email and unique id
var email = document.getElementById('email').value;
var unique_id = document.getElementById('unique_id').value;

//email required and validate if yes enable submit button.
if(validate_email(email, true) == false)
{
return false;
}else{
alert('Click "submit" to continue and save your Wiqet to our database.');
document.getElementById('submit').disabled = false;
}
}

function check_valid_email_during(email)
{
var wiqetCode = document.getElementById('wiqet_code').value;
//alert(wiqetCode);
if(validate_email(email, true) == false || wiqetCode.length < 10)
{
return false;
}else{
document.getElementById('submit').disabled = false;
}
}

//email validation function
function validate_email(email, required) {
if(required)
{
if(email.length < 3)
{
alert('email required');
return false;
}
}
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var address = email;
if(reg.test(address) == false) {
alert('Invalid Email Address');
return false;
}else{
return true;
}
}
</script>

more to come....



top

Step 5: Implementing the player

The player can play both Wiqets created in the photo editor and in the video editor. The basic functions of the player are showing pictures, playing audio or playing video. Next to the automatic slideshow of the pictures in sync with the audio, a user can also view the pictures separately.

Picture: example of the player 
top

Adding the Wiqet player to your web page

Include Wiqet javascript path:

<script type="text/javascript" src="http://www.wiqet.com/wiqetapi/?api_key=b9532fc081ed7a2aa43f20a548cc9d8e"></script>

Place this snipped in the <head></head> section of your html.

Next, code needs to be implemented in the HTML page to load the player.
<script type="text/javascript">
/**
          Player
        */
        var player = new wiqet.Player('wiqetplayer', {
              'wiqetCode':           'pkqmzkznqxw'  //wiqet code

            , 'imageInterval':       '1600'         //interval of the slideshow in milliseconds
            , 'playUrl':             ''             //url location of the page which displays this movie
            , 'watermarkPosition':   ''            //watermark position 1 = top left, 2 = top right, 3 = bottom right, 4 = bottom left
            , 'watermarkLinkUrl':    ''            //url to the watermark image file
            , 'watermarkImageUrl':   ''            //link location of the watermark (url)
           
, 'tellAFriend':         'true'             //display tell a friend option
            , 'allowFullScreen': 'true'             //display full screen option
          }
          , {
              //default flashplayer properties
              'width':            '454px'
            , 'height':           '383px'
            , 'bgcolor':          '#FFFFFF'
            , 'align':            'middle'
          }
        );
</script>

The flash file will be placed within this element.

<div id="wiqetplayer">Wiqet is loading.....</div>


figure 4: how player implementation works



top

Code for mobile Wiqet player

Wiqet has a special mobile Wiqet player that uses flash lite. The following code loads the mobile player.

<script type="text/javascript" src="http://www.wiqet.com/wiqetapi/?api_key=b9532fc081ed7a2aa43f20a548cc9d8e"></script>

<script type="text/javascript">

/**
          Mobile Player
        */
        var mobileplayer = new wiqet.mobile.Player('wiqetmobileplayer', {
              'wiqetCode':           'w3-zldqyergxffu'  //wiqet code
            , 'imageInterval':       '1600'         //interval of the slideshow in milliseconds
            , 'highQuality' :       'false'               //You can set Highquality to true or false. Depending on connection expected. e.g. Broadband, UMTS etc
            , 'playUrl':             ''             //url location of the page which displays this movie
            , 'watermarkPosition':   ''            //watermark position 1 = top left, 2 = top right, 3 = bottom right, 4 = bottom left
            , 'watermarkLinkUrl':    ''            //url to the watermark image file
            , 'watermarkImageUrl':   ''            //link location of the watermark (url)

          }
          , {
              //default flashplayer properties
              'width':            '100%'
            , 'height':           '100%'
            , 'bgcolor':          '#FFFFFF'
            , 'align':            'middle'
          }
        );

</script>


The flash file will be placed within this element.

<div id="wiqetmobileplayer">Wiqet is loading.....</div>



top

Step 6: Displaying a Wiqet thumbnail.


One of the things that is requested often is a thumbnail to show when generating a list. Thumbnails are generated automatically at creation and you can request is at the following location: http://backend.wiqet.com/thumbnails/[wiqetCode].jpg. So if the wiqetCode of the Wiqet is xrckhtpjvdf the thumbnail location will be: http://backend.wiqet.com/thumbnails/xrckhtpjvdf.jpg
Use the <img tag in your html to request the thumbnail.



top

Optional: Your own house style.


top

Player and editor in your own house style

You get to use the neutral Wiqet player and editor. It is possible for us to design it to match the house style of your webpage. The color and design can be altered among other things. Additional costs are however charged for this. Also for future updates costs will be charged. In case you want to know more about this option, you can contact directly with Wiqet Media through support@wiqet.com or call to 0031 (0)20-4230500.  
top

Wiqet player logo

Whenever needed, you can put your own logo in the player on top of the photos. We advise a logo that has a maximum size of 50 x 50 pixels, as this is the optimal size for the logo in this player. You can also link a URL of your choice to the logo. This can be both static and dynamic. A static URL is www.yourdomain.com for example. A dynamic URL is a URL with a Wiqetcode in it, for example: www.yourdomain.com/playwiqet.php?wiqetCode=1223456. If you want to add the Wiqetcode to your URL you can let us know. We will make sure that the Wiqetcode will automatically be added to this URL. The advantage of this last method is that the Wiqet presentation always links to the webpage (source page) on which the Wiqet is originally played. You are free to put a URL of choice, but you are obliged to take care of the technical side, the interpretation of the page you submit and to show the correct presentation in the Wiqet player. You can send the logo, together with the URL to which it has to direct and the positioning (left, right, top or bottom) to info@wiqet.com. We will make sure the logo will be shown in the player. Tip: Don’t forget to empty your browser cache when creating a new logo to be able to view all the changes. 
top

Optional: XML connections


top

Using external photos

It is possible for the photo editor and player to load photos externally through XML. The XML-file that you need to place on the server side needs to have the layout as defined below. For the editor and the player the XML needs to be callable in a certain way:
  • in case of the photo editor by the use of a ‘uniqueid’.
  • in case of the player by the use of a introvoicecode or your ‘uniqueXMLid’.
A URL with which the XML is callable could be for example: http://www.uwdomein.nl/xml/photos.ph?id=&idxml= You need to provide this Url to Wiqet Media (info@Wiqet.com), in order for us to implement this in our system. IMPORTANT: The ‘uniqueXMLid’ can, for security reasons, under no circumstance be the same as the ‘uniqueid’for editing.
DO NOT ADD A: <?xml version="1.0" encoding="UTF-8" ?> at the top of the XML file.
But add a line in your code for php: header('Content-type: text/xml');
The layout of the XML-file:

<introvoice>

<images>

<image>http://www.yourcompany.com/media/1.jpg</image>

<image>http://www.yourcompany.com/media/2.jpg</image>

<image>http://www.yourcompany.com/media/3.jpg</image>

<image>http://www.yourcompany.com/media/4.jpg</image>

</images>

</introvoice>



The standard editor will have its own photo-upload button. If you don’t want users to upload photos themselves, but that uploading will only happen through the external loading of photos, we can remove this button. You can let us know this by sending an email to support@wiqet.com and you will receive a new editor without an upload button. The old editor_photo.swf can simply be overwritten the new one we send you.
top

Sending data to your own server.

If you want to save the data of the Wiqet on your own server you can make use of the following possibility. To implement this, knowledge of XML and server-side scripting is needed. As the order, adding and editing of the photos is done through the editor, it is important that the RAW data is being send to the server. This means that the order (which may be adapted) and the (edited) data of the photos are in the XML-file. When editing a Wiqet, you need to overwrite all the data. Both are being send in the XML. A URL can be for example http://www.yourdomain.com/xml/photos.php?id=12345. You need to provide the URL to Wiqet Media (support@wiqet.com), in order for us to implement it in our system. Written below is the layout of the XML that is sent to you.
Note: The CDATA tag for the data of the photos is encoded with the BASE64 method. This tag is only sent upon request.

<?xml version="1.0" encoding="UTF-8" ?>

<introvoices>

<introvoice>

<head>

<introvoiceCode>[[WiqetCode]]</introvoiceCode>

<uniqueId>[[uniqueId]]</uniqueId>

</head>

<files>

<images>

<file>

<url><![CDATA[http://www.yourcompany.com/xml/photos.xml.asp?adId=2&introvoicecode=dnddmgkmamy&img=25]]></url>

<data><![CDATA[DATAXXXXXXXXXXXXXXX]></data>

</file>

<file>

<url><![CDATA[http://www.yourcompany.com/xml/photos.xml.asp?adId=2&introvoicecode=dnddmgkmamy&img=28]]></url>

<data><![CDATA[DATAXXXXXXXXXXXXXXX]></data>

</file>

</images>

</files>

<introvoice>

<introvoices>



top

Appendices

top

Appendix 1 | Support

General questions. Should you have any general questions about the use of Wiqet or about this document, please feel free to send an e-mail to info@wiqet.com or to call 0031 (0)20-4230500        
 
Technical questions. Should you have any technical questions about the implementation of a Wiqet, please feel free to send an e-mail to support@wiqet.com with a detailed description of your problem. If possible, please send us as much relevant information; code, url’s and possibly login data. In case of a urgent technical complication you can call Sequential Media on 0031 (0)33-4625067       
 
Others in this Category
document Wiqet implementatie Document Nederlands
document Wiqet implementation document English