Embedding PatternCooler on your site

PatternCooler can be easily embedded on any website with a choice of modifiable user interfaces for different types of application.

Default user interface option


Product user interface option


Method 1: Launching PatternCooler in auto sizing lightbox

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" ></script>

Lightbox external script requires jQuery, paste in html head tag if jQuery is not already present.

<link rel="stylesheet" type="text/css" href="https://patterncooler.com/css/embed_pCoolr.css" />	
<script src="https://patterncooler.com/js/embed_pCoolr.js" ></script>

Lightbox files: Paste within html head tag, both files very light weight, less than 3kb

<a class="launch_pCoolr" href="" data-return_url="http://yourDomain.com/returnScript.php" data-ui_mode="ui_default">Launch Patterncooler in lightbox with default UI</a>

To create a trigger to launch the lightbox simply apply class launch_pCoolr to the clickable html element(s) you want to use. Specify the URL of the script you want to use to retrieve the generated pattern images using data-return_url. Use data-ui_mode to set the PatternCooler display mode. Display options: ui_default; ui_product; (Your partner subscription username)

<div id="pCoolr_mask">
	<div id="iframe_lightbox">
		<div id="iframe_container"><iframe id="patternCoolerIframe" style="width: 100%; height: 100%;" src="" frameborder="0" ></iframe></div>
		<div id="iframe_lightbox_close">X</div>
	</div>
</div>

Paste this HTML at the bottom of your page right before the '</body>' closing tag.

Method 2: Basic PatternCooler iframe hardcode

<iframe style="width: 100%; height: 800px;" scrolling="no" frameborder="0" src="https://www.patterncooler.com/ui_default?return=http://yourDomain.com/returnScript.php"></iframe>

To hardcode a PatternCooler iframe, you will need to determine a fixed height, where as the width can be fixed or set as a percentage. The interface will adapt to any aspect ratio. Specify the URL of the script you want to use to retrieve the generated pattern images using the URL param return in the iframe src. The display mode is determined by what comes after 'patterncooler.com/' and before '?' in the src. Display options: ui_default; ui_product; (Your partner subscription username)

Retrieving generated pattern images

Clicking the 'Apply Pattern' button in the bottom right of the interface will generate a PNG or JPG seamless tile image identical to the pattern seen in the interface. Patterncooler will automatically determine which format to create based on the set opacity of the image and optimization of file size. For Product Partners this image can be generated to high-res specifications required by their printing application. The path to retrieve a generated file is passed as a URL parameter to a file on your server specified when launching the interface. It is recommended that you copy across the generated image to a permanent location as all outputted files are only stored on our server for one week.

Retrieval demo:

Returned URL parameters

patURL: Temporary (7 days) location of generated pattern image on the PatternCooler server.
editState: Unique pattern ID string required to edit pattern.
patName: PatternCooler pattern name and texture name.
productID: ID of product selected by user if applicable. (Returns 0 if no product selected).

Example PHP code used to display generated pattern

<?php
	// Display pattern
	if(isset($_GET["patURL"])) echo '<div class="patThb" style="background-image:url('.$_GET["patURL"].')"></div>';
	// Display edit link
	if(isset($_GET["editState"])) echo '<a class="launch_pCoolr" href="" data-return_url="http://dev.patterncooler.com/embed" data-ui_mode="ui_default" data-edit_state="'.$_GET["editState"].'">Edit pattern</a>';
	// Display pattern name
	if(isset($_GET["patName"])) echo '<div class="patName">'.$_GET["patName"].'</div>';
?>

Partner Subscriptions

If you are interested in a Partner subscription, please contact me with a brief outline of your application and requirements. I am happy to advise you to find the best solution for your needs. Each application is different and additional customization may be possible or alternative payment plans may be negotiated depending on your monetization model.

Non-Commercial Embed Low Resolution Commercial Embed High Resolution Commercial Embed
Free $60
$60/mo
1 month
Buy 1 month
 $160
$160/mo
1 month
Buy 1 month
$270
$45/mo
6 months
Buy 6 months
 $720
$120/mo
6 months
Buy 6 months
$360
$30/mo
12 months
Buy 12 months
 $960
$80/mo
12 months
Buy 12 months
Interface customization No Yes Yes
Print file API for print job automation No No Yes
Max raster file resolution 300px x 300px 1000px x 1000px 7000px x 7000px
SVG pattern area print files for unlimited print size No No Yes
Product viewer No No Yes
License to use as part of commercial project No Yes Yes
License to use as part of digital product commercial project No Yes Yes
License to use as part of printed product commercial project No No Yes
Pre-launch integration support No Yes Yes
Default and product UI options Yes Yes Yes
X