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 Buy 1 month |
$160 $160/mo Buy 1 month |
|
$270 $45/mo Buy 6 months |
$720 $120/mo Buy 6 months |
||
$360 $30/mo Buy 12 months |
$960 $80/mo 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 |