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 will direct customers to a complete checkout and payment module. The look of the checkout can be customized, and is available in 9 languages and 31 currencies.
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
First, sign up for an account at https://www.peecho.com/ and upload the PDF file for the print. It will turn into a Publication with a series of Settings.
By clicking on the button Sell print on the left-hand side of the page, a pop-up window appears where you find the Javascript code that will create the Print Button on your website. You copy the code and add it on your page.
The code consists of two parts.
The Javascript code 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.
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>In 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.
The button detects a document
The icon changes to a book, and the texts tell you about books and images.
The button can be localized easily, by setting a button variable.
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.
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.
The button will then render larger.
Apply your own style
Now, you could apply your own CSS rules, based on the following HTML structure.
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.
For example, you could hide the disabled button entirely by applying the following directive.
a.peecho-btn-disabled {display:none;}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-widthwidth of document in mm (required) -
data-heightheight of document in mm (required) -
data-pagesnumber of pages of document (required) -
data-publicationId of publication if already uploaded in Peecho system. -
data-filetypeTyple of file. default: pdf. -
data-srcURL of file if not uploaded as publication in Peecho system. -
data-localeLanguage (ie de_DE for german). default english. -
data-themeColor of theme . default ‘green’. -
data-currencyCurrency (e.g. EUR) -
data-styleString that overrides the button style property. -
data-textString on the button. Default ‘ORDER PRINT’ -
data-nopriceBoolean that sets if price should hidden from button. default: false. -
data-tooltipTooltip of the button. -
data-tooltip-disabledDisable the button tooltip. (overrides data-tooltip) -
data-referenceId at merchant side to define order call.
Comments
0 comments
Article is closed for comments.