Skip to main content

Print Button: Technical information

Marina Satriano
  • 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 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

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

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

 

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.

settings.png
 

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

price_settings.png
 

The screenshot below shows where you can change the currency your customer will see when ordering your publication and other advanced settings.

advanced_settings.png

 

 

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.

checkout_settings.png

 

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.

branding.png

 

 

 

 

Related articles

Comments

0 comments

Please sign in to leave a comment.

Powered by Zendesk