An inline frame (<iframe>) allows you to display the Impact Designer Designer Tool directly within a CMS page of your store. This way, all customization options are available in one place for your customers.
Add an iframe to your CMS page.
Example: <iframe src=”https://APP_URL/installed_folder/index.html? nplyaG1tW6uemXJpaGtbpZepnnJlW6aprnJmW6ippKealJ6ZcmaInIqgjaVnqGqrba5kd3R6XX1ggpeGmomdjKKOpmipa6xur5N4W3tef3WDmIebip+No2enaapsrVZ2WnlffGKA”></iframe>
► Some required parameters need to be set on the iframe src element, which is in an encrypted format for security purposes. To convert the parameters to an encrypted format, please contact support.
The above-encrypted parameters are given below. Please follow the same steps to implement the iframe one.
Encrypted Parameters:
| Parameters | Description |
| Id (integer) | 312 The selected product id. |
| qty (integer) | 1 The quantity of the product that is selected on the product detail page. |
| vid (integer) | 215 – variation/variant id of the respective product. or 312 – If the variant id is not present, send the product id. |
| customer | Respective id of the customer in case of a logged-in customer, otherwise this value will be sent as zero(0). |
| pbti (integer) | default:0 1 – in case the product is associated with a template/design(template – preset/predesigned product) |
| dpid (integer) | 23 – The designed id of a pre-decorated product (i.e, predesigned products) |
| store_id (integer) | default:1Store id |
► From the above-mentioned parameters between ‘pbti’ and ‘dpid’, only one value can be set in the URL.
To go to the cart page from the iframe section, the cart page redirect URL has to be set on the internal add_to_cart function.
For showing custom-preview images:
To show the customized or designed product on the cart page of your e-commerce store, an API needs to be used. You need to call the below API on the cart page of the store theme file.
API: Get Custom preview images
GET: https://APP_URL/installed_folder/api/v1/preview-images?token=amt1aWtpbGllbmZsZ2pmaWp1iJyKoI2lZ6hqq22uZHd0el19YIKXhpqJnYyijqZoqWusbq+TeFt7Xn91g5iHm4qfjaNnp2mqbK1Wdlp5X3xigA==
► Some required parameters need to be set on the iframe’s src element, which is encrypted for security purposes. To convert the parameters to an encrypted format, please contact support.
Encrypted Parameters:
| Parameters | Description |
| custom_design_id (integer) | 298 The design reference ID created by Imprintnext during add to cart must be associated with the line item through some meta field property, as per your store support. |
| Product_id (integer) | 137 Variant id of the line item in the cart. If the variation is missing, then pass the product id. |
Sample API Response:
{
“298”: [
{
“design_status”: 1,
“customImageUrl”: [
“https://APP_URL/202303281251038663.png”,
“https://APP_URL/202303281251038663_1.png”,
“https://APP_URL/202303281251038663_2.png”,
“https://APP_URL/202303281251038663_3.png”
],
“productImageUrl”: “”,
“printid”: 5,
“nameAndNumber”: 0,
“display_edit”: 1,
“colorAttr”: “color”,
“sizeAttr”: “size”,
“simpleProductId”: 4098,
“parentProductId”: 0,
“variableDecorationSize”: “10 x 30”,
“variableDecorationUnit”: “inch”,
“refId”: 7
}
],
“product_id”: 137,
“cart_id”: “850dcdf4-58b7-4358-a475-fc14788832e5”
}
| Key | Description |
| 298 (integer) | 298 reference id/custom design id. |
| design_status (integer) | 1 Success status of the customized product. |
| customImageUrl (integer) | The https://APP_URL/202303281251038663.png file path of the customized image (the number of image files depends on the number of image sides of the product). |
| productImageUrl (string) | the https://APP_URL/235615452332.png store product URL(without customization). |
| printid (integer) | 5 id of the print profile assigned to the product. |
| nameAndNumber (boolean) | by default : 0 If the team jersey option is used during product design, then this option will be enabled on the cart page in case of 1 value and disabled in case of 0. |
| display_edit (boolean) | by default : 0 The redesign option will be visible on the cart page if the value is 1. |
| colorAttr (string) | color name of the product option. |
| sizeAttr (string) | size name of the product option. |
| simpleProductId (integer) | 4098 |
| parentProductId (integer) | 0 |
| variableDecorationSize (string) | 10 x 30 In the case of banner products, if a user selects a custom size inside the designer, then a custom decoration size option will be shown on the cart page for the product. |
| variableDecorationUnit (string) | inch In the case of banner products, if a user selects a custom unit inside the designer, then a custom decoration unit option will be shown on the cart page for the product. |
| refId (integer) | 298 custom design id. |
| product_id (integer) | 137 Product id of the customized/designed product. |
| cart_id (string) | default : 0 850dcdf4-58b7-4358-a475-fc14788832e5 If any product is already in your cart, then that cart-item id will be set here. |
In the above response, the customized images will come in the “customImageUrl” key. All the image URLs in this key would be replaced with the original product image to preview cart items.
Generate print files on order success?
To generate print files on order success, an API has to be implemented on the store order webhook/observer event, as per your store support.
API: Create order files
GET : APP_URL/api/v1/orders/create-order-files/amZubWdsaW1nZ2htZnVm
► The parameter after “create-order-files ” in the above endpoint is order_id, which is encrypted. To get the function to implement encryption, please contact support.
Encrypted Parameter:
| Parameter | Description |
| id (integer) | 23652 Order id of the placed order |
| store_id (integer) | default:1Store id |
► The response of this endpoint will be used for internal use only.