Smoothly integrate your web applications with PosterOven.
Linking to PosterOven
Add your Affiliate ID ("affid") as a query parameter to all
www.PosterOven.com domain links, e.g.:
http://www.PosterOven.com/path/to/page/?affid=YOUR_AFFID
Consider using one of our convenient button images:
...more PosterOven buttons & graphics
Integration: Pre-populate the PosterOven GUI with Custom Data
Allow your users to create a poster in a single click with all
their relevant information from your database already filled in.
Create a starting poster and Export the JSON representation
Step 2
Create a poster that your users will customize.
Step 3
Activate Import / Export tool in "Download / Print / Share".
Step 4
Click "EXPORT" to export poster design as JSON in textbox.
Step 5
Copy & Paste your exported JSON for safe-keeping.
About Poster JSON Representation
GUI Poster Wizard state can be represented by a simple JSON object
(a flat dictionary with Unicode strings for all keys and values).
You can import this example JSON into the GUI by copy/pasting and clicking "IMPORT".
Note: GUI contents will be overwritten.
{
"pomy_version": "1",
"po_version": "1.012",
"template_product_slug": "poster3",
"template_template_slug": "ripped_orange",
"design_base_color": "#ffffff",
"design_backgrounds": "ripped_top_orange,ripped_social_orange,ripped_bottom_orange",
"design_user_image": "",
"design_text_color_heading": "#a35c00",
"design_text_color_textbox": "#6e3e00",
"design_text_color_midbar": "#a35c00",
"design_text_color_bottombar": "#a35c00",
"design_customize_text_colors": "0",
"text_heading": "This is an example",
"text_textbox": "Do you like the API docs so far?",
"text_midbar": "Keep reading - it gets better.",
"text_bottombar": "Import me if you dare.",
"social_count": "2",
"social0": "facebook",
"social0_page_url": "www.facebook.com/example-page-for-apidocs",
"social1": "twitter",
"social1_username": "APIExample"
}
Automatic Import
The GUI will, on startup, automatically import any
JSON design contained in the HTTP POST request parameter "import"
as if it had been manually pasted into the textbox and the "IMPORT" button clicked.
Option 1: Basic Preloading (HTML only, no JavaScript)
This basic approach works even when JavaScript is not permitted.
Step 6
Encode your design JSON for HTML (" → " etc.)
e.g. using http://htmlentities.net/
Step 7
Copy the following HTML snippet to your page, replacing
the "import" value with your encoded JSON.
<form action="http://www.PosterOven.com/gui/product/poster3/?affid=YOUR_AFFID" method="post" target="_blank">
<input type="hidden" name="import" value="{"pomy_version":"1","template_product_slug":"poster3","template_template_slug":"ripped_orange","design_user_image":"","design_base_color":"#ffffff","design_backgrounds":"ripped_top_orange,ripped_social_orange,ripped_bottom_orange","design_text_color_heading":"#a35c00","design_text_color_textbox":"#6e3e00","design_text_color_midbar":"#a35c00","design_text_color_bottombar":"#a35c00","design_customize_text_colors":"0","text_heading":"This is an example","text_textbox":"Do you like the API docs so far?","text_midbar":"Keep reading - it gets better.","text_bottombar":"Import me if you dare.","social0":"facebook","social0_page_url":"www.facebook.com/example-page-for-apidocs","social1":"twitter","social1_username":"APIExample","social_count":"2","po_version":"1.012"}" />
<input type="image" src="http://www.posteroven.com/static_v/1.013/images/public/PosterOven-Button-130x45.png" />
(Click to create a Poster - HTML only Example)
</form>
Option 2: Customized Preloading (JavaScript Required)
For more personalization, use this technique to preload additional user-specific data into the design.
Step 6
Copy the following HTML+JavaScript snippet to your page, replacing
the "po_data" value with your actual JSON.
Step 7
Override po_data fields desired with your user's data,
using JavaScript or your own HTML template language.
<form action="http://www.PosterOven.com/gui/product/poster3/?affid=YOUR_AFFID" method="post" target="_blank">
<input type="hidden" name="import" id="posteroven_import_2" value="" />
<input type="image" src="http://www.posteroven.com/static_v/1.013/images/public/PosterOven-Button-130x45.png" />
(Click to create a Poster - HTML+JavaScript Example)
</form>
<script type="text/javascript">
var po_data = {"pomy_version":"1","template_product_slug":"poster3","template_template_slug":"water_abstract","design_user_image":"","design_base_color":"#2460c2","design_backgrounds":"abstract_bubbles,abstract_smoke,textbox_white_wide","design_text_color_heading":"#ffffff","design_text_color_textbox":"#000000","design_text_color_midbar":"#ffffff","design_text_color_bottombar":"#ffffff","design_customize_text_colors":"0","text_heading":"Second Example","text_textbox":"Now we're getting fancy.","text_midbar":"Look at the customized data in the social hooks below:","text_bottombar":"So amazing! You can do it too!","social0":"www","social0_page_url":"www.mydomain.com/my-api-example-page","social1":"twitter","social1_username":"APIExample","social_count":"2","po_version":"1.012"};
po_data['text_heading'] = "User's Business Name";
po_data['social0_page_url'] = "http://www.user-specified.com/custom-url/";
po_data['social1_username'] = "MyUserTwitterName";
document.getElementById('posteroven_import_2').value = JSON.stringify(po_data);
</script>
WARNING: Make sure to properly escape all user-supplied strings for JavaScript.
Writing out incorrectly escaped user strings
opens your application up to session hijacking, cross-site request forgery,
and other serious security problems.
Clarify language and graphics
The PosterOven GUI is easy to use but can be intimidating if a user doesn't know
its purpose.
Choose the right button image and annotate your links so the
transition is meaningful and appreciated.
Other Integrations
Contact us if you're interested in other integrations, including custom branding, custom designs, social hooks specific to your products, affiliate linking, and more.
