Login Try It For Free
Custom Integration

PitchPrint custom integration

Embed the PitchPrint designer into your own storefront or product page with the client SDK, launch controls, validation events, and saved project previews.

Install PitchPrint Book a Demo

Developer setup

From product page
to embedded designer

Load the PitchPrint client, wire up launch and save events, initialize with your API key and designId, then test the editor inside your own storefront.

  1. Page

    Start from a product page

    Use an HTML page from your own site, typically the product page template where the editor will launch.

  2. Scripts

    Load dependencies

    Load jQuery, then load the PitchPrint client file from https://pitchprint.io/rsc/js/client.js.

  3. UI

    Create launch elements

    Add a loader, launch button, and preview container for showing saved project previews.

  4. Client

    Initialize PitchPrintClient

    Create a PitchPrintClient instance with your apiKey, designId, custom setting, and VX setting.

  5. Events

    Handle app validation

    Listen for app-validated, then enable the launch button and call showApp when the customer clicks it.

  6. Save

    Handle project saved

    Listen for project-saved and render the returned preview images into your page preview container.

  7. Keys

    Use your own credentials

    Replace demo credentials with your own API key and the designId copied from the design configuration history.

  8. Test

    Reload and test

    Reload the page, check the browser console for errors, launch the designer, and confirm the save flow works.

FAQ

Shopify integration questions

What do I need before a custom integration?

You need at least an HTML page on your own site where the PitchPrint app can be loaded, usually a product page template.

Which script loads the PitchPrint client?

The integration guide loads https://pitchprint.io/rsc/js/client.js after jQuery.

What does PitchPrintClient need?

The example initializes PitchPrintClient with an apiKey, designId, custom: true, and isvx: true.

How do I know the app is ready?

Listen for the app-validated event. The docs use it to enable the launch button, hide the loader, and attach showApp to the click handler.

How do I display saved previews?

Listen for project-saved, read the returned data.previews array, and render the images into your preview container.

Where do I find the designId?

Open the design in PitchPrint Admin, go to the configuration area, then the history tab, where the designId is shown.