Wiqet Implementation Document
Version: 2.4.4
Date: 10-07-2009
Table of Contents
top
Starting with Wiqet
top
What do you need?
In order to start with the implementation of Wiqet you need to have received the following items from us:
- player.swf: A flash file which can play Wiqets.
- editor_photo.swf: A flash file which can make/edit foto/voice Wiqets.
- editor_video.swf : A flash file which can make/edit video/webcam Wiqets
- Client ID: A unique hashcode (IVCustomerID), which looks something like "2f9c7ee0ba3340041864f7e4d9709168". This code is an encryption of your client identification number.
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
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
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 powered through 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.
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
Implementing the editor
The editors (editor_photo.swf and editor_video.swf) allow you to create Wiqet within your own website and to connect these to your own database. The created Wiqet can be edited from within the editor at a later time.
top
Uploading the Wiqet editor to your web server
Upload the editor_photo.swf and the editor_movie.swf on your webserver in order to be able to load these pages.
top
Adding the Wiqet editor to your web page
Next, the code should be implemented in the HTML-page to make the connection between the flash file and the Wiqet server. Picture: example of the photo-editor Picture: example of the video-editor.
Determining the location. You determine the location of the editor by implementing the following div-element in your web page:
<div id="flashWiqet">loading Wiqet...</div>
The flash file will be placed within this element. For a good handling of the Wiqet you also need to implement the following element on your web page:
<div id="flashWiqet">loading Form...</div>
This element must be placed between <form></form>. Hidden fields will be placed in this element. Whenever you submit the form the following codes will be shown to you:
- the Wiqetcode created
- the two codes which are needed to remove a Wiqet from the Wiqetserver.
When the form is sent an extra variable is being sent along with it. This variable is filled with the data from the element described above. This name “IVFormName” (see: the script code for the editor) is adaptable. It is important that you save the data of this variable together with the unique code that you sent to the editor.
top
The script code for the editor
To show the editor on your web page, you can add the code shown below to your page. You need to replace everything between brackets ([ ]), including the brackets themselves. An example of a form is placed in the code shown below. After recording the Wiqet, the information will be placed from editor into the form.
IMPORTANT:
- You can only fill in the [WiqetCode] if a Wiqet is already created. If this is not the case, a new Wiqet is created and the variables remain empty. If this is the case, your old Wiqet is retrieved and ready for you to edit.
- The [uniqueid] has to be filled in. For testing you can fill in ‘test’ for example.
- The IVplayerUrl has to contain a URL that refers to the same server. A relative URL is recommended.
- In case you use a ssl-certificate, you need to change the reference of the editor to https://
- For good handling of the Wiqet a unique code is necessary. You need to create this code yourself. The combination of the Wiqetcode, the customerid and the uniqueid (your created code) is needed to start editing a Wiqet.
the Wiqet is public and the customerid on your website is always the same. The [uniqueid] is also visible for the user making the Wiqet. This means you should ‘hide’ the uniqueid with which you communicate to us in a hash (for example: http://nl2.php.net/manual/en/function.hash.php). This hash is not predictable which will make sure user with id 101 can’t edit the Wiqet of id 102 and 103.
You can copy and paste the example below to your HTML web page editor.
<!---start copy paste here-->
<div id="flashWiqet">Wiqet is loading...</div>
<div id="linkWiqet"></div>
<form method="post">
<div id="formWiqet">Form is loading...</div>
</form>
<script src="http://backend.wiqet.com/2.0/Wiqet.js" type="text/javascript"></script>
<script type="text/javascript">
var IVcustomerId = '[customerid]';
var IVuniqueId = '[uniqueid]'; //Cannot be empty!
var IVWiqetCode = '[WiqetCode]';
var IVplayerUrl = 'editor.swf';
var IVDisplayUrl = '[displayurl]';
var IVwidth = '450px';
var IVheight = '375px';
var IValign = 'middle';
var IVbgColor = '#ffffff';
var IVdivForm = 'formWiqet';
var IVdivPlayer = 'flashWiqet';
var IVdivLink = 'linkWiqet';
var IVFormName = 'Wiqet';
var IVFormnameType = 'text'; //or hidden
var error = play_wiqet(IVDisplayUrl,IVplayerUrl,'editor',IVWiqetCode,IVcustomerId,IVuniqueId,IVwidth,IVheight,IValign,IVbgColor,IVdivLink,IVdivForm,IVdivPlayer,IVFormName,IVFormnameType, '', '');
if (error) document.write(error);
</script>
<!---end copy paste here-->
When you don’t want the output fields of the form (Wiqet player url, Wiqet code, delete code & delete pincode, also see Appendix 2.) to be visible with the information of the editor after recording the Wiqet, you can change the variable "
IVFormnameType" to hidden. The text fields will be sent as a hidden field along with the form.
The div-element
<div id="linkWiqet"></div>
Can be left out when it is not needed.
top
Saving Wiqet
top
Wiqet photo
You can save a Wiqet photo in two ways; through the Wiqetserver (method 1) or through your own server (method 2). The photo editor is normally designed to show the save button in the editor. In case you chose method 2 you can let us know and we will send you a new editor file, without the save button.
top
Method 1: Saving through the Wiqet server (standard)
The standard way to save a Wiqet is to save within the editor. The editor saves all the data in the Wiqet database. This data are being back linked by means of a Get statement (URL with variables). After the user has saved the Wiqet that is just created, the Wiqetserver sends back the necessary data for the Wiqet. This happens in the form of an array with the use of a Url, specified by you. You can get the data from the array by using the following PHP notation:
$_GET['Wiqet']['IVWiqetCode'] This is the Wiqet code with which you can specify which Wiqet you want to play.
$_GET['Wiqet]['IVDeleteCode'] This is the delete code
$_GET['Wiqet]['IVDeletePinCode'] This is the delete pincode
$_GET['Wiqet]['IVCustomerUniqueId'] This is your unique code.
You can save all these data in your own database, in your own way. In the chapter ‘implementing the editor’ you can see how to use these code to edit a Wiqet that is already created.
top
Method 2: Saving through your own server
If you want to, you can save the Wiqet on your own server. In that case, the editor puts an amount of necessary data (hidden) in a HTML form, generated by you. It is important that whenever you submit this form, the JavaScript function publish(); is called on, before the form is actually sent. In this way it is made clear to the Wiqetserver that the Wiqet is ready. This can be done in the following ways:
<a href="javascript:publish();">Save Wiqet</a>
<input type="button" onClick="javascript:publish();" value="Save Wiqet" name="save_wiqet" />
Note: If you use the code below, you make an actual button which sends the form, the tag should have the type ‘button’ and not the type ‘submit’. The advantage of this function is that you can generate a form with which you can ask for extra data (for example: name, e-mail address and gender) and add this to your system. In this way you can integrate a Wiqet in a user profile for example. The codes mentioned above will make sure the Wiqet is saved, but the form will not be sent. You have to generate this code yourself. To integrate the saving and sending in one form, you can also use the following code:
<input type="button" onClick="javascript: publishAndSubmit(this.form);" value="Save Wiqet" name="save and send form" />
The variables that are being sent along are:
IVWiqetCode
IVDeleteCode
IVDeletePinCode
top
Wiqet video
The Wiqet video is saved in one way: on the Wiqet streaming server. Because the video is streaming 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
Feedback when a Wiqet is saved
In case you want to execute JavaScript code after your Wiqet is saved, you can create the function “onWiqetSaved” in your JavaScript.
<script type="text/javascript">
<!---start copy paste here-->
function onWiqetSaved(){
//evoke event
}
</script>
top
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
Uploading the Wiqet player to your web server
upload the player.swf to your web server in order to load these pages.
top
Adding the Wiqet player to your web page
Next, code needs to be implemented in the HTML page to realize the connection between the flash file and the Wiqetserver. Determine Location You determine the location of the editor by implementing the following div-element in your web page:
<div id="flashWiqet">loading Wiqet...</div>
The flash file will be placed within this element. The Wiqetcode should be placed within the script of the player. This code is being sent in the URL with the use of a variable ‘code’ and needs to be read out by serverside scripting. PHP can be used for this for example:
IVWiqetCode =' <?php echo $_GET['code'];?>';
top
The script code for the player
To show the Wiqetplayer on your web page, you can add the following code to your web page. You need to replace everything between brackets ([ ]), including the brackets themselves.
<!---start copy paste here-->
<div id="flashWiqet">loading Wiqet...</div>
<script src="http://backend.wiqet.com/2.0/Wiqet.js" type="text/javascript"></script>
<script type="text/javascript">
var IVWiqetCode = '[WiqetCode]';
var uniqueXMLid = '[uniqueXMLid]';
var IVplayerUrl = 'player.swf';
var IVwidth = '454px';
var IVheight = '383px';
var IValign = 'middle';
var IVbgColor = '#ffffff';
var IVdivPlayer = 'flashWiqet';
var error = play_wiqet("", IVplayerUrl, 'player', IVWiqetCode, "","",IVwidth, IVheight, IValign,IVbgColor, "", "",IVdivPlayer, "", "", "", "");
if (error) document.write(error);
</script>
<!---end copy paste here-->
top
Optional
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
Deleting Wiqet
Deleting Wiqet can only be done through a page on the website of the Wiqetserver. We advise to only use this option when you want to physically remove the Wiqet. If you want to delete data from your own database, you can do this yourself. To disable a Wiqet within for example a user profile this would suffice. To physically delete a Wiqet u need to visit the following URL:
http://www.introvoice.nl/2.0/?d=[code]. You need to replace [code] with the ‘deletecode’ that is generated after creating a Wiqet. Consequently, you need to fill in your pincode, after which the Wiqet is completely deleted (to obtain these codes, see chapter ‘Savind Wiqet’). Deleting the Wiqet is final and cannot be undone. We therefore advise you to not remove the Wiqet, but to create a new one.
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
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.
The layout of the XML-file:
<xml>
<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>
</xml>
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
Data naar uw eigen server sturen.
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
Appendix1 | Debugging
In order to debug you can put the following div-element anywhere in the editor or player page. Certain information will be shown on the website in this way. This can come in handy when searching for debug information.
<div id="infoWiqet"></div>
In case of complications we request you to send these codes in combination with the documents you work with and possible JavaScript errors.
top
Appendix 2 | Overview of the Variables
IVFormName This variable is included in the form. It contains four values:
- Wiqet-code;
- player url (for example: player.swf);
- deletecode;
- delete pincode.
You can save this data and if possible connect it to other data like for instance a user profile or an advertisement.
IvuniqueId This variable allows editing a previously created Wiqet. It is important that only the person allowed to change this Wiqet can use this code. When using a user profile or advertisement for example you can use the user id or advertisement id. It is recommended to code this with for example MD5. If you are making use of a XML connection to Wiqet it is important that you supply the string variable ‘IVuniqueld’ with a unique id with which the Wiqet player can call the right XML connection. The player will call for a file on your server with the initiated variable in it.
uniqueXMLid If you are making use of a XML connection to a Wiqet player, in order to send already existing photos to the Wiqet player for example, it is important that you supply the string variable ‘
uniqueXMLid’ with a unique id with which the Wiqet player can call the right XML connection. The player will call for a file on your server with the initiated variable in it.
IVDisplayUrl This variable is mainly for support purposes when you are debugging. A link is generated to the Wiqet in order to be able to play it directly.
IVWiqetCode,
IVdeleteCode,
IVdeletePinCode If you fill these variables with a previously created Wiqet, the Wiqet will be retrieved and you will be able to edit it. This can only be done in combination with the variable ‘Ivuniqueid’.
IVplayerUrl,
IVwidth,
IVheight,
IValign,
IvbgColor These variables make sure that the editor or player are shown correctly. If you want the swf to have another name, you need to change the variable ‘IvplayerUrl’ to the name of the swf that is concerned.
top
Appendix 3 | 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
