Skip to main content

Print Button: Technical information

Maro Lazarou
  • Updated

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

3. Live button feedback

4. Live product detection

5. Localized texts

6. Scaling the button

7. Colour schemes

8. Use your own styling

9. Configuration

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. 

sell_print.png

 

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.

javascript.png

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.
 
<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>
 

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 state

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. 

<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
peecho-btn-disabled
peecho-btn-error
 

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-currencyCurrency (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).
 

Related articles

Comments

0 comments

Please sign in to leave a comment.

Powered by Zendesk