There are two ways to integrate ColorizeIt into your website, simple and advanced integration. Style authors can use it to allow users change color schemes of styles without leaving style author's website.
You can use both methods at the same time.
This simple comparison table should help you understand the differences between integration methods.
|Style data is taken from:||ColorizeIt styles database||your website|
|Styles can be accessed:||by everyone||by current visitor|
|Can be used for commercial styles:||no||yes|
|Preparation required:||add iframe to your page||add iframe to your page, create callback script, create sample images|
|Account requirements:||no special requirements||you must log in and verify your email address before being able to subscribe to integration|
Easiest way to integrate ColorizeIt into your website is by adding ColorizeIt editor in iframe or frameset.
Use collection feature to add styles to your collection, then link to style or to whole collection in html frame or iframe. By doing so, page will not contain any colorizeit.com menu items, it will not contain links to anywhere other than your collection. Your visitors will be able to change color scheme without even knowing that they are not on your website.
If you are using iframe, it is recommended to set min-width to 900px and min-height to 700px to avoid scroll bars. Height may vary from style to style, depending on amount of extra options.
This only works for styles in your collection. If you want to link to any style on colorizeit.com that is not in your collection, you can use "colorizeit" as collection id instead of your id.
Read more about collections.
You can only add styles from colorizeit.com styles database to your collection, so simple integration is limited to styles available on colorizeit.com and cannot be used for commercial or custom styles.
Simple iframe integration (hosted on a third party website)
This is a sample HTML code to integrate phpBB 3 style "prosilver se" into your website. Because that style has optional files, frame will have scrollbars.
<iframe style="min-width: 900px; width: 99%; min-height: 1000px; border: solid 1px #ccc;" src="http://www.colorizeit.com/collections/colorizeit/19.prosilverse.html"></iframe>
This is a sample HTML code to integrate phpBB 3 style "artodia: deluxe" into your website. Unlike previous example, this style does not have optional files, so height is smaller and there is no scrollbar.
<iframe style="min-width: 900px; width: 99%; min-height: 1000px; border: solid 1px #ccc;" src="http://www.colorizeit.com/collections/colorizeit/188.deluxe.html"></iframe>
This is a sample HTML code to integrate a whole collection. It can be used to list all your styles.
<iframe style="min-width: 900px; width: 99%; min-height: 850px; border: solid 1px #ccc;" src="http://www.colorizeit.com/collections/colorizeit.html"></iframe>
For more complex integration, use advanced integration feature.
Unlike simple integration, colorizeit downloads files directly from your website, not from colorizeit.com styles database. All data is securely sent from your server to colorizeit and is associated only with current session, so you have full control over who can download files and what is in those files.
Why would you want to use advanced integration:
(*) ColorizeIt can parse anything that uses typical website files: html, css, gif/png/jpeg images. ColorizeIt does not parse:
If you are not sure if ColorizeIt can parse your templates, you can ask about it via contact form.