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: sample SDK index.html on GitHub

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',	//Kindly provide your own APIKey
	designId: '3d8f3899904ef2392795c681091600d0',	//Change this to your designId
	custom: true,
	isvx: 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 variable 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. The designer opened from the Launch Designer button

The designer opened from the Launch Designer button

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. Open the configuration tab of the design which you would like to use. Go to the history tab and you’ll see the designId please have a look below for reference:

History tab of a design's configuration, showing where the designId appears

Use the designId inside the code snippet as shown above. Save, reload page and ensure everything works fine. Next, we will explain what happens next when the customer saves their design.

Introduction

Overview of what PitchPrint is and how it works.

Generate your auth keys

Create the API and Secret keys needed to integrate the app.

After Save

Handle the project-saved event and use the returned data.

My Account - Saved Projects

Add a My Account page so customers can view their saved projects.

Overview

Custom Integration

Designer API

Runtime API

Developer Knowledge Base

Let’s get a reference to our UI elements

Initialize PitchPrint client

Define our event handler functions

Attach events to the app

Test our app

Introduction

Generate your auth keys

After Save

My Account - Saved Projects

​Let’s get a reference to our UI elements

​Initialize PitchPrint client

​Define our event handler functions

​Attach events to the app

​Test our app

​Related articles

Introduction

Generate your auth keys

After Save

My Account - Saved Projects

Let’s get a reference to our UI elements

Initialize PitchPrint client

Define our event handler functions

Attach events to the app

Test our app

Related articles