Designer (NEW)

Advanced Designer Embed Parameters

The InkSoft Designer Embed code can be copied from the Designer Embed Settings page. However, further customization can be made by changing the data being passed to the designer by the embed code.


For example, the Designer Embed will fill the width div.embed-container and have a height of 720px by default. You can add a width or height via CSS or inline-style to constrain the size of the designer on your page, and then update the div#inksoftEmbed height to be 100% so that the designer will fill and scale to the size of the embed container.


The default embed code is as follows:

Screen Shot 2019-08-08 at 10.18.15 AM

Embed Options


targetElementId: This is the element in which the designer will be placed. The default embed code includes an element to place the designer, so normally changes are not needed.

productId: If specified, the Designer Embed will skip the select product screen and load the specified product with the default style and no design.

productStyleId: If specified and productId is also specified, the Designer Embed will load the specified product style of the product.

designId: If specified, the specific design will load on the specified product. This setting requires a productId to be set.

disableCart: This can be set to true to disable the cart and remove all associated links that allow for checkout in the Designer Embed.


Embed Callbacks

Embed Callbacks are for more advanced implementation of the Designer Embed and are not required to be used.


onDesignerReady(): This function is called once the Designer Embed has loaded on the page. It is passed an object with the options that were passed into the Designer Embed.

onDesignSaved(): This function is called any time the user saves the design that they've created in the Designer Embed. It is passed an object that contains all of the data for the saved design. This includes, but is not limited to ProductStyleId, Name, DesignId, and associated data for each side of the design.

onCartTriggered(): This function is called once the user adds an item to the cart. It is passed an object which includes all cart data.