Documentation

Below are links to documents that explain how advanced integration works.

If you have any questions, please ask them on support forum.

Tools

Examples

Below are several examples of advanced integration, all hosted on external website.

First one is a basic example, followed by more complex examples. Download its code to see how integration is implemented. Each example uses its own advanced integration subscription.

Read documentation above (How does it work, Callback function) to understand how these examples work.

Simple tutorial: one style, no security checks. [download]
This is a basic tutorial showing integration that uses 1 style without any security checks. Download source code to see how it is done.
Simple tutorial: one style, callback security check. [download]
Same as #1, but with security check in callback script.
Tutorial: two styles. [download]
Same as #2, but with selection of two styles and javascript buttons that open editor.

How does advanced integration work?

	On your website on style download page you will add an iframe that links to a custom colorizeit page like colorizeit.com/custom/example.html?style=1
	When iframe loads, ColorizeIt will send a request to your server (callback URL can be configured in subscription settings), asking for information about requested style. It will POST all parameters you sent to iframe, so you can tell which style is being requested or verify user's permissions. This is a direct request from server to server, without visitor's browser, so all information sent is safe. Visitor will never know real location of zip file or sample image. Your server will reply with a style name, location of sample image, location of zip file and some other parameters (see XML reply tutorial).
	ColorizeIt parses your website's reply, download sample image from your website and shows color editor to visitor.
	When user clicks "download" button inside iframe, scrip will send request to colorizeit to download file. ColorizeIt will download zip file that contains style from your server, change colors in files in zip file, send parsed zip file to visitor.

Advantages of advanced integration:

Visitors do not know that they are not on your website. ColorizeIt editor opens in iframe and you can select a layout, making it look like a part of your website.
All information (zip file location, sample image) is being sent by your website directly to colorizeit.com without visitor's browser, so information is secure. You have full control over what data to show and who to show it to. This means you can use advanced integration to edit commercial and custom styles. There are hidden parameters you can use to verify that callback url was requested by colorizeit, not by some visitor. Also colorizeit will post you visitor's ip address, so you could identify your customer.
You will not have to submit any files to colorizeit.com for approval. Your styles will not be listed on colorizeit.com home page. There will be no such thing as a style, there will only be sets of data (download name, sample image, zip file) associated with a session. All files will be requested only while parsing and then will be automatically deleted from colorizeit (unless you tell colorizeit.com to cache those files).

What do you need to do:

You will need to created a sample image for each style. See this tutorial for details.
You will need to write a callback script on your website that will output XML file. Add some variable to track sessions or styles. For example, if you open iframe with parameter style=1, that parameter will be posted to your callback script, so you can do a check like this to show correct xml data: if($_POST['style'] == 1) { show data for style #1 }. Or you can send a session id to iframe, like this: colorizeit.com/custom/yourname.html?sid= and in callback script assign session via session_id($_POST['sid']). See code examples in menu on the right side for examples.

That is all. While integration description is long and complex, implementation is very simple.

Examples and sample code: see "examples" section on the right below "documentation" section.

Scheme

If description above was not clear enough, scheme below should help you.

Your Website	Visitor (browser)	ColorizeIt.com
Your website shows a page where visitor can download a style with a link to change color scheme.
	Visitor clicks link to change color scheme, browser opens iframe pointing to colorizeit.com: http://www.colorizeit.com/custom/example.html?style=1 Parameter "style=1" is optional and you can use anything instead of it.
	Sample code for link (javascript, using jQuery): <a href="javascript:void(0);" onclick="$('#content').html('<iframe src=\'http://www.colorizeit.com/custom/example.html?style=1\' style=\'border-width: 0; width: 100%; min-height: 950px;\'></iframe>'); return false;">Change Colors</a>
		ColorizeIt.com connects to your website to retrieve style details: sample image URL, zip file location, default color scheme and style name. URL it connects to is set in subscription settings: http://www.example.com/sample/callback.php ColorizeIt POSTs all parameters that you used to open iframe, so you can use it to identify style.
Your website replies with XML document that contains link to editor sample image, link to zip file, style name, editor defaults.
		ColorizeIt retrieves sample image and shows color editor to user.
	User changes color scheme, clicks "Download" link.
		ColorizeIt downloads zip file that contains style from your website, parses it to change colors as user requested, sends parsed zip file to user.
	User downloads zip file, unpacks it, installs style on his website. User is happy because style matches his website's color scheme!