Integration

To start with, you need at least an html page loaded from your site where you will load the app unto. If you already have a website in place, this will naturally be your products page template.

The code you are about to create can be downloaded here: https://github.com/pitchprint/pitchprint/blob/master/sdk/index.html

The PitchPrint app relies on a few libraries and we have made efforts to bundle them all into a single file.

So for a start, let's assume you are starting with an empty html page like this:

<html>
	<title>PitchPrint Sample SDK </title>
	<head>
		
	</head>
	<body>
		
	</body>
</html>

PitchPrint relies on jQuery Blueimp uploader for file upload. So at the header, first load your jQuery, then add the PitchPrint client file as follows..

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://pitchprint.io/rsc/js/client.js"></script>

Now load your page in a browser and check the browser console that there is no error whatsoever from PitchPrint and also check the resources > scripts tab and ensure the files are loaded. We suggest using Chrome developer tool for this.

Next, we just created the html elements that we need to interact with... A loader indicator, the launch button and a div to place our final preview images once the customer has finished customizing their design.

After that, we write out javaScript code to do the magic..

Let's get a reference to our UI elements

First, we need to get our elements into variables so we can use them later on, as follows:

var _launchButton = document.getElementById('launch_btn'),
	_previewDiv = document.getElementById('pp_preview_div'),
	_loaderDiv = document.getElementById('pp_loader_div');

Initialize PitchPrint client

Next, we need to initialize the PitchPrint client class, which will return us a reference () to interact with the app..

var ppclient = new PitchPrintClient({
	apiKey: 'f80b84b4eb5cc81a140cb90f52e824f6',		//Kinldy provide your own APIKey
	designId: '3d8f3899904ef2392795c681091600d0',	//Change this to your designId
	custom: true
});

Define our event handler functions

These are the two functions we are going to define to handle the app validated and project saved events..

//Function to run once the app is validated (ready to be used)
var appValidated = () => {
	_launchButton.removeAttribute('disabled');				//Enable the Launch button
	_launchButton.onclick = () => ppclient.showApp();		//Attach event listener to the button when clicked to show the app
	_loaderDiv.style.display = 'none';						//Hide the loader
};

//Function to run once the user has saved their project
var projectSaved = (_val) => {
	let _data = _val.data;									//You can console.log the _data varaible to see all that's passed down
	if (_data && _data.previews && _data.previews.length) {
		_previewDiv.innerHTML = _data.previews.reduce((_str, _prev) => `${_str}<img src="${_prev}">`, '');		//Show the preview images
	}
};

Attach events to the app

So here, we are going to attach events to the PitchPrint client class, such that if any of the events happen, it calls out functions

ppclient.on('app-validated', appValidated);
ppclient.on('project-saved', projectSaved);

Test our app

Ok, so far so good, you can test the page in a browser and see that it loads properly and that there are no errors thrown.

To test, click the Launch Designer button. And your designer should show like this. If not, please open a ticket and let us know.

Using your own credentials

For simplicity, we have used our own demo-credentials, that is API key and designId. Now you should change these to yours, the one you created in the previous topic.

So in the variables definition, change the apiKey value to your own apiKey.

To get your designId, navigate to the designs page. And check against your category, you should find the button labelled More options. Open it and click "Export Design List" as shown:

When you click this, it will generate all the designs under that category for you as a JSON file. Download the file and you will see "id" value against your design. Get that value and change your designId from ours to your own.

Save, reload page and ensure everything works fine.

Next, we will explain what happens next when the customer saves their design.

Still need help? Contact Us Contact Us