Advanced Designer Embed Parameters

Brand your Designer Embed to build a better online presence!

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 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.

Note: For Desktop pages, the container you are embedding this into should have a pixel size greater or, equal to 1024 pixels. For mobile, it needs to be greater or, equal to 375 pixels.

Below is an example of the default embed code. Note: The embed code for your Designer will differ from this one. This should not be used for your 3rd party page; it is just an example.

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.

sessionToken: Whatever the user has done up to the point of getting to the Designer will be passed through.

disableLeavePrompt: This will allow you to control whether the leave warning notifications display when the customer is navigating throughout the designer.

EXAMPLE: If the user has signed in and/or has added products to the cart before arriving to the designer - the designer will then load the existing information and add to the session as the customer proceeds.

Custom Designer Interface Text

Editable text is nested under the customDesignerInterfaceText property. The following pieces of text can be changed:

buyNow: Buy Now button in the Price Summary dialog.

getPrice: Get Price button is in the bottom footer bar during product quantity entry.

nextStep: Next Step button in the bottom footer bar when viewing a design being edited.

saveDesign: Save Design button in the bottom footer bar when viewing a design being edited.

Embed Callbacks

NOTE: 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.