You can interact with Customily and add your own functionality on top of our javascript preview API.
This API will let you use Customily's most popular functionalities such as setting a personalization template on the preview canvas, updating the preview, and generating production files based on the preview.
This API will let you use Customily's most popular functionalities such as setting a personalization template on the preview canvas, updating the preview, and generating production files based on the preview.
Before getting started
If you plan to integrate our software into a custom e-commerce platform, we recommend using the iframe method. This documentation is intended for users that want to build their own personalization logic from scratch or use some of Customily's features programmatically.
If you are not familiar with Customily's admin panel, this video will be a great introduction that will help you understand the building blocks that you'll be using with our API.
API Introduction:
This video shows a basic example of how our API works on a simple HTML website.
It's a good starting point if you are already familiar with Customily's admin panel.
It's a good starting point if you are already familiar with Customily's admin panel.
The HTML file used in this example can be obtained here
Set up
To use Customily Javascript API just include our script and create an HTML canvas within a div:
<script src="https://app.customily.com/customily.js"></script>
<div id="container">
<canvas id="preview-canvas">
</div>
This will create and give you access to the 'engraver' object.
API Reference
init(canvasId)Initializes the engraver. This function must be always called first (before calling any other functions)
• parameter {String} canvasId: Canvas tag id to use
• return {Number} Returns 0 if initialization completed correctly, -1 otherwise
• return {Number} Returns 0 if initialization completed correctly, -1 otherwise
setProduct(templateGuid) Loads the specified template from Customily and displays it on the canvas
• parameter {String} templateGuid : Customily product guid
• return {Promise} Returns a promise when the product was successfully loaded
• return {Promise} Returns a promise when the product was successfully loaded
setText(textId,text)Sets the string 'text' on the Customily's text placeholder textId
• parameter {Number} textId : Customily id for the text to be set
• parameter {String} text : String to set
• return {Number} Returns 0 if the text was successfully set, -1 if there was some error
• parameter {String} text : String to set
• return {Number} Returns 0 if the text was successfully set, -1 if there was some error
setFont(textId,fontOption) Sets the font stored on fontOption on Customily's text placeholder textId
• parameter {Number} textId : Customily id for the font to be set
• parameter {Number} fontOption: Customily option number where the font was stored
• return {Number} Returns 0 if the text was successfully set, -1 if there was some error
• parameter {Number} fontOption: Customily option number where the font was stored
• return {Number} Returns 0 if the text was successfully set, -1 if there was some error
setFontColor(textId,fontColorOption) Sets the font color stored on fontColorOption on Customily's text placeholder textId
• parameter {Number} textId : Customily id for the font to be set
• parameter {Number} fontColorOption: Customily option number where the font
• return {Number} Returns 0 if the text was successfully set, -1 if there was some error
• parameter {Number} fontColorOption: Customily option number where the font
• return {Number} Returns 0 if the text was successfully set, -1 if there was some error
setImage(imageId,image) Sets an image in the image placeholder imageId
• parameter {Number} imageId : Customily id of the image to set
• parameter {String} image: The image's base64 string or URL
• return {Promise} Returns a promise when the image was loaded on the preview
setPresetImage(imageId,imageOption) Sets a Customily-stored image in the dynamic image placeholder imageId
• parameter {Number} imageId : Customily id of the dynamic image placeholder
• parameter {Number} imageOption: Customily option number where the image was stored
• return {Promise} Returns a promise when the image was loaded on the preview
• return {Promise} Returns a promise when the image was loaded on the preview
setVector(vectorId,vector) Sets a vector in the vector placeholder vectorId
• parameter {Number} vectorId: Customily id of the vector placeholder
• parameter {String} vector: SVG string, URL to SVG file to download or javascript File object for EPS, PDF or SVG file
• return {Promise} Returns a promise when the vector was loaded on the preview
• return {Promise} Returns a promise when the vector was loaded on the preview
exportFile(fileURL) Generates the Production file for the current preview.
• return {Promise} Returns a promise with the URL to download the Production file, -1 if you don't have your production file features enabled
getAvailableImageIds()Gets the product metadata for image placeholders
• return {Array} Returns an array containing the id's for the image placeholders (both regular image placeholders and dynamic images).
getAvailableTextIds();Gets the product metadata for text placeholders
• return {Array} Returns an array containing the id's for the text placeholders
Share
Was this article helpful?
Have more questions? Submit a request