Preview: Technical information – Peecho Knowledge Base

A publication's Preview allows your customers to browse through the first 8 pages of your publication on your own website before deciding to purchase it. You can add a Preview on your website with a simple unique piece of code.

Your Javascript code should be inserted either in 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/preview/14435173212106604.js";

   var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(p,s);

</script>

<div class='peecho-preview-button' data-publication='178430' >Print</div>

The second part is a div. Add this element to your page, right where you want the button to appear.

Important: you can have as many previews on a page as you like, but you only need to include the JavaScript once!

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 display them in the checkout.

Preview behaviour

data-thumbnail-width Preview width in pixels. default: 220.
data-text Text on print button. default: ORDER PRINT
data-noprice Hide price from print button. default: false.

Checkout behaviour

data-redirect-error URL with a custom error page.
data-redirect-thankyou URL to replace our thank-you-page..
data-currency Indicator for the preferred currency.
data-locale Language.

Configuration

Related articles