Print button
Our Print Button allows digital publishers to sell their content in print, by adding a single line of code to their website.
The button includes a complete checkout and payment module, that can be styled, is available in nine languages, supports 31 currencies and calculates prices based on available products.
1. Get started with the print button
2. Hosting your own files without uploading
10. Customizing the checkout per publication
11. Customizing the checkout branding
1. Get started with the print button
Sign up first. You can immediately upload your first document. A button code will appear. The code consists of two parts.
Your Javascript script should be inserted in either your HTML head section or somewhere in the HTML body. This snippet will grab all your settings, products and prices.
The Javascript is personalized for your account. The one below is an example.
<script type="text/javascript"> var p=document.createElement("script");p.type="text/javascript";p.async=true; var h=("https:"==document.location.protocol?"https://":"http://"); p.src=h+"d3aln0nj58oevo.cloudfront.net/button/script/13032875623450.js"; var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(p,s); </script>
The second part is a link (or anchor tag, as it is officially called). Add this link to your page, right where you want the button to appear.
<a title='Peecho Print Button' href='http://www.peecho.com/' class='peecho-print-button' data-filetype='pdf' data-width='210' data-height='297' data-pages='32' data-publication='67' data-thumbnail='https://peecho-assets.s3.amazonaws.com/storage/flight-images/demo/book.jpg'>Print book from PDF</a>
The result could look like this: Print book from PDF
Important: you can have as many print buttons on a page as you like, but you only need to include the JavaScript once!
2. Hosting your own files without uploading
If you host your own files or have files in a database, you might not want to upload your publications first. You can add a reference to the source file in your button anchor instead.
After you signed up, you can just skip the upload step and start playing around with the manual configurator to see how it works.
So, instead of using the ‘data-publication’ data element, you will have to set the source attribute. An example is the following.
<a title='Peecho Print Button' href='http://www.peecho.com/' class='peecho-print-button' data-filetype='pdf' data-width='210' data-height='297' data-pages='32' data-src='https://peecho-assets.s3.amazonaws.com/storage/flight-images/pdf/demo/peecho-book-portrait-297x210mm-32pages.pdf' data-thumbnail='https://peecho-assets.s3.amazonaws.com/storage/flight-images/demo/book.jpg'>Print book from PDF</a>
3. Live button feedback
Okay stateIn the okay state, the simple print button always shows the lowest price available for your publication.
Disabled state
The disabled state is shown only when there is no product available that fits the publication.
Error state
The error state is shown when the button is configured incorrectly.
4. Live product detection
Your file defines the look
The button responds to the nature of your digital file. If you have a photograph or document of only one page, it assumes that it must be an image product that your are selling. It changes the icon and texts accordingly. If your file has multiple pages, it assumes you are looking for a book or something similar.
The button detects an image
The icon changes to an image and the texts tells you about canvas and similar products.
<a title='Peecho Print Button' href='http://www.peecho.com/' class='peecho-print-button' data-filetype='jpg' data-width='1200' data-height='1600' data-pages='1' data-src='https://peecho-assets.s3.amazonaws.com/storage/flight-images/demo/image.jpg' data-thumbnail='https://peecho-assets.s3.amazonaws.com/storage/flight-images/demo/book.jpg'>Print book from PDF</a>
The button detects a document
The icon changes to a book, and the texts tell you about books and images.
<a title='Peecho Print Button' href='http://www.peecho.com/' class='peecho-print-button' data-filetype='pdf' data-width='210' data-height='297' data-pages='32' data-src='https://peecho-assets.s3.amazonaws.com/storage/flight-images/pdf/demo/peecho-book-portrait-297x210mm-32pages.pdf' data-thumbnail='https://peecho-assets.s3.amazonaws.com/storage/flight-images/demo/book.jpg'>Print book from PDF</a>
5. Localized texts
The button can be localized easily, by setting a button variable.
data-locale="de_DE"
In this case, the result will be that the text on the button, the tooltip texts and the subsequent checkout procedure will all be in German
- English (default)
- Dutch
- German
- Italian
- French
- Spanish
You may use ‘data-currency’ to match the right currency.
Demo in German
All texts are in German.
<a title='Peecho Print Button' href='http://www.peecho.com/' class='peecho-print-button' data-filetype='pdf' data-width='210' data-height='297' data-pages='32' data-src='https://peecho-assets.s3.amazonaws.com/storage/flight-images/pdf/demo/peecho-book-portrait-297x210mm-32pages.pdf' data-thumbnail='https://peecho-assets.s3.amazonaws.com/storage/flight-images/demo/book.jpg' data-locale="de_DE">Print book from PDF</a>
6. Scaling the button
The button contains vector graphics for the icons and is designed with relative CSS mark-up. This means that it will still look good if you scale it to anything larger.
You can do that by adding an inline style to the anchor.
style="font-size:200%"
The button will then render larger.
<a title='Peecho Print Button' href='http://www.peecho.com/' class='peecho-print-button' data-filetype='pdf' data-width='210' data-height='297' data-pages='32' data-src='https://peecho-assets.s3.amazonaws.com/storage/flight-images/pdf/demo/peecho-book-portrait-297x210mm-32pages.pdf' data-thumbnail='https://peecho-assets.s3.amazonaws.com/storage/flight-images/demo/book.jpg' style="font-size:200%">Print</a>
7. Colour schemes
data-theme="blue"
<a title='Peecho Print Button' href='http://www.peecho.com/' class='peecho-print-button' data-filetype='pdf' data-width='210' data-height='297' data-pages='32' data-src='https://peecho-assets.s3.amazonaws.com/storage/flight-images/pdf/demo/peecho-book-portrait-297x210mm-32pages.pdf' data-thumbnail='https://peecho-assets.s3.amazonaws.com/storage/flight-images/demo/book.jpg' data-theme="blue">Print</a>
8. Use your own styling
Switch off our styles first
The default button styles can be switched off by applying a button variable.
data-style="false"
Apply your own style
Now, you could apply your own CSS rules, based on the following HTML structure.
<a class="peecho-btn"> <span class="peecho-btn-outer"> <span class="peecho-btn-inner"> <span class="peecho-icon"></span> <span class="peecho-btn-text"></span> </span> </span> </a>
Button state CSS classes
In every state of the button, another class is added to the link tag to indicate that state. These are the state classes.
peecho-btn-okay
For example, you could hide the disabled button entirely by applying the following directive.
a.peecho-btn-disabled {display:none;}
9. Configuration
Additional features
To improve the user experience, you can add extra pieces of information to the button code. These will change the behaviour of the button itself or the subsequent checkout procedure.
For example, you may want to show a thumbnail image or a nice document title. If you tell us what these should be – using the data variables – we will show them in the checkout.
Button behaviour
data-width
width of document in mm (required)data-height
height of document in mm (required)data-pages
number of pages of document (required)data-publication
Id of publication if already uploaded in Peecho system.data-filetype
Typle of file. default: pdf.data-src
URL of file if not uploaded as publication in Peecho system.data-locale
Language (ie de_DE for german). default english.data-theme
Color of theme . default ‘green’.data-currency
Currency (e.g. EUR)data-style
String that overrides the button style property.data-text
String on the button. Default ‘ORDER PRINT’data-noprice
Boolean that sets if price should hidden from button. default: false.data-tooltip
Tooltip of the button.data-tooltip-disabled
Disable the button tooltip. (overrides data-tooltip)data-reference
Id at merchant side to define order call.
Checkout behaviour
data-title
The title of your publication.data-thumbnail
URL for a thumbnail image of your publication.data-redirect-error
URL with a custom error page.data-redirect-thankyou
URL to replace our thank-you-page..data-spine-color
This will give the spine of the printed book or magazine a solid color. Use hexadecimal notation (#ffffff).data-spine-text
Text in the center part spine.data-spine-text-top
Text in the top part spine.data-spine-text-bottom
Text in the bottom part spine.data-spine-text-size
Size of text on spine.data-spine-text-color
Color of text on spine. Use hexadecimal notation (#ffffff).
10. Customizing the checkout per publication
You can change the checkout behaviour by adjusting the publication settings in your dashboard for things like title, currency, thumbnail image or language. You can do this by logging into your dashboard and clicking ‘’publications’’ in the top menu. Then click the publication you want to change the settings for.
The screenshot below shows where you can change the publication title, the available product types, colors and sizes. By changing these settings, you can change what your customer sees in the checkout when ordering your publication.

The screenshot below shows where you can change the Price and Profit settings.

The screenshot below shows where you can change the currency your customer will see when ordering your publication and other advanced settings.
11. Customizing the checkout branding
Your personal dashboard allows you to customize the checkout design. To do this, login to your dashboard, click the cog in the right top corner, and then click "General Settings".
Note: If you have multiple Applications under your Account, then you can access the General Settings for each Application by clicking on the Applications button and then selecting the Application you wish to make changes to.
Click on "Checkout settings" on the menu on the left to change the brand name and default currency.
Click on "Branding" on the left menu to change the background image of the checkout, to add your own logo to the checkout and to change the font and the colours.
Comments
0 comments
Please sign in to leave a comment.