Access / Website URL's

SSL Support is available for all url's. If you want to use ssl then replace "http" with "https" in url.

Integration Steps

1. Include JS File:
This file is required to render the personalization interface in your website.

IMPORTANT NOTE: Due to the frequency with which enhancements and changes are made to our API and our javascript files, Melco cannot support local instances of the melco.js file. Please do not download and use this file locally. Rather, include a reference to our file on our servers. Our Javascript API methods provide callbacks and functions that allow you to customize the behavior of our personalization functionality within your site without the need for modifying the core melco.js file. 
				<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
				<script type="text/javascript" src="http://client.livedesignerfusion.com/Scripts/melco.js"></script>

Debug Version JS File:
This file is uncompressed version of melco.js, only include this file for debugging purposes. Include of this file is not recommended for production enviornment. 
				<script type="text/javascript" src="http://client.livedesignerfusion.com/Scripts/melco-debug.js"></script>

2. Include CSS File:
Our system requires one of the following stylesheets. To further alter the appearance of the personalization functionality within your site, we recommend augmenting these stylesheets with custom css files of your own, rather than altering these source css files as the source files may change over time. 
				 
				<link rel="stylesheet" type="text/css" href="http://client.livedesignerfusion.com/Themes/Light/Css/Style.css" />

3. Call Javascript Method on "Personalize" Click:
In this example, we are using the "Melco" javascript object to load the Personalization popup. This object is available in the page after including melco's javascript file. When the user hits the done button, the CompletePersonalization function is called. 
				<script type="text/javascript">
					Melco.LoadPersonalization('username', 'readyToken');
					Melco.CompletePersonalization = function (result) {
						alert('Personalization Complete. The token is: ' + result.Token);
					};
				</script>

4. Create Composite image when the user is finished:
The result.Token object is then used to download fullfillment files and generate composite images for your site or shopping cart. 
				Melco.CompletePersonalization = function (result) {
					// Set the source of a product image (i.e. <img id="ProductImage"... />) to the newly created composite image
					var url = 'http://client.livedesignerfusion.com/' + username + '/Token/GetImage?Token=' + data.Token + '&Width=400';
					$('#ProductImage').attr('src', url);
				
					// Add the token value to a hidden field so it gets submitted when an 'Add to Cart' button is clicked. 
					$('#TokenHiddenField').val(result.Token); 
				});

5. Create a shopping cart thumbnail when the user hits an 'Add to Cart' button:
 

Javascript

				var SetThumbnail = function(imageid, token) {
					var url = 'http://client.livedesignerfusion.com/' + username + '/Token/GetImage?Token=' + token + '&ThumbnailWidth=50&Thumbnail=1'
					$(imageid).attr('src', url);
				}

PHP

				<a href="<?php echo $this->getProductUrl() . '#token=' . $instancetoken ?>">
					<img src="http://client.livedesignerfusion.com/melcodemo/Token/GetImage?Token=<?php echo $instancetoken; ?>&ThumbnailWidth=50&Thumbnail=1" 
					alt="<?php echo $this->htmlEscape($this->getProductName()) ?>" width="50" height="50" />
				</a>
Version: 3.6.277.0