API Documentation

How to offer your own graphic templates to your users



Introduction :
Integrating a white label graphic creation tool into your product is great. But we will all agree it will be even better if you could enrich your Studio integration providing your own custom graphic templates to your users to ease their creative process and make them more efficient right away.




1 ) Create your template with Pixelixe studio


Once logged-in, from the top right dropdown menu, click on "Create new graphic" or "Saved files".



If you clicked on "Create new graphic" you will end up directly in the Studio. If you clicked on "Saved files" you will get the list of your saved files and folders. By the way, with folders, you can easily organise your templates into format or categories.



From there, click on "Create new graphic" to start creating your first template. Be aware that once you save a template from the studio, you can find your document anytime in the "Saved files" section.



From the studio, you can create and edit your first template. Start choosing the format, then add content.


Once you finish editing, save your work clicking on the "Save" button (see below). Saving is not mandatory but it will allow you to update your template in the future if required.




Now that you work is safe. You just have to download/export your final template as HTML. To do so, click on the blue "Download" button from the top toolbar.



Then click on "Download as HTML". This HTML document can be imported again in the Studio anytime you want. In fact, you can see those files as external graphic backup. This is this exact same document that is stored in your "Saved files" section on our cloud servers (Pixelixe import/export engine is compatible with HTML document).


WARNING : As a reminder, the Studio can import and edit HTML templates only if they have been exported/downloaded (this way) from Pixelixe Studio. (You cannot import external HTML files.)




Finally, you can optionally download the PNG image of your template if you would like to display the preview of each of your templates to your customers into a dedicated area of your product




Maybe you noticed we used a preview image on our our Online DEMO, when you click on the image, the studio opens with the template preloaded. This is the same kind of user experience you can do with "preview" images.






2 ) Display your templates list to your customer


Once you download your templates, you can do whatever you want with them. The most common way to offer templates to your customer is by creating your own template listing page on your website or webapp.

To do so, use the PNG images (the one you downloaded from the studio) as previews and create a link from those previews to a script that will call the API passing the correponding HTML document as parameter. That way, as soon as someone will select/click on one of the preview listed on your template pages, it will open the related HTML document with the Studio (See documentation here to open a remote HTML document with the API)


Ex :
<iframe
    width="1200"
    height="1080"
    allowfullscreen
    frameborder="0"
    src="https://studio.pixelixe.com/#api?apiKey=YOUR_API_KEY&graphicUrl=https://yourwebsite.com/URL_TO_HTML_DOCUMENT.html&graphicName=NAME+OF+YOUR+DOCUMENT&uid=yourinternalid" >
</iframe>

WARNING: URLs exposing Pixelixe exported HTML documents (stored on your server) must allow Cross-Origin Resource Sharing (CORS).

Add the following element in your HTTP request header to make it downloadable in the studio : Access-Control-Allow-Origin: https://studio.pixelixe.com



To help you during the integration process, you can check out the code source of our online demo on our GitHub repository : https://github.com/pixelixe/Pixelixe-API-Demo