Getting started

Quickstart guide

With Peecho, you can show a print button to your visitors. Clicking this button allows them to buy your publication as a professionally printed product, like a hardcover book or magazine.

Cloud print button examples

In the okay state, the cloud print button always shows the lowest price available for your publication. If you click the button below, you can order our test publication.

Disabled state

The disabled state is shown only when there is no product available that fits the publication.

Sorry, no print

Error state

The error state is shown when the button is configured incorrectly.

Oops, error!

How to show the button on your website

You need a website and at least one PDF document that fits the following:

• Number of pages > 11 and < 500.
• Aspect ratio < 1.54.
• Aspect ratio > 0.34.

Aspect ratio is defined as width divided by height.

Now, you need to sign up.

This will get you an account, but also a line of Javascript and some HTML code. To make the cloud print button show up, you will need to paste these codes into your website.

See an example of the button code.

Advanced configuration

The following variables can be added to the button code, to configure your button.

• data-title - the title of your publication.
• data-thumbnail - a URL for a thumbnail image of your publication.
• data-redirect-error - a valid URL with a custom error page.
• data-redirect-thankyou - a valid URL to replace our thank-you-page.
• data-currency - an indicator for the preferred currency.
• data-locale - language en_EN (default), nl_NL, de_DE, it_IT, fr_FR or es_ES.
• data-style - boolean to invoke our stylesheet [true - default] or your own [false].
• data-text - string that overrides the button label (default: "Print").

Styling the button

The default button styles can be switched off by applying this button variable.

data-style="false"

The button will still show price information, but it will not show any styling whatsoever. In that case, you could apply your own CSS rules, based the following HTML structure.

<a class="peecho-btn">
	<span class="peecho-btn-outer">
		<span class="peecho-btn-inner">
			<span class="peecho-btn-text"></span>
			<span class="peecho-icon"></span>
		</span>
	</span>
</a>
		

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 style:

a.peecho-btn-disabled {display:none;}

Global options

Using your Peecho account information to log in, you can not only follow your orders through the production process, but also configure several options in the administration interface.

• Add or remove products from your portfolio.
• Set your own retail prices on top of our wholesale price. The difference is your margin.
• Decide on the button display price: including or excluding VAT (EU tariff), including or excluding shipping (US/EU fee).

Log in

Questions?

If you have any questions, feel free to send an e-mail to sander@peecho.com