Embed Alter Product on your website: WordPress + WooCommerce or API

The plugin provides ready-made WordPress and WooCommerce functionality. The API lets you build a custom connection to another platform, a headless application or an existing order management system.

Choose the tool based on what customers need to do on your website. Prepare the design and personalization rules in Designer beforehand.

Embedding Alter Product on your own website requires an active Business subscription or a higher plan that includes this feature. This applies to both the WordPress + WooCommerce plugin and custom API integrations. Personal FREE and Personal plans do not include embedding in your store.

For the plugin approach, you need WordPress with WooCommerce installed and active, plus an Alter Product account. Hosting files yourself does not replace the required subscription: Alter Product still provides the application and authorizes its launch.

Alter Product runs inside an iframe embedded in your store. Browsers restrict access to some features used by the application when the page does not provide a secure context. HTTPS encrypts the connection, and a valid certificate lets the browser verify the domain.

The browser also checks the page surrounding the iframe. An HTTPS address for the Alter Product application is therefore not enough if the store runs over HTTP. Your page embedding the tool must also use HTTPS. This follows browser security rules for embedded applications.

Automatic connection guides you through Alter Product account authorization and store setup. You do not need to transfer API keys manually with this approach.

In the WooCommerce product editor, open the Alter Product tab. Create a new design or choose an existing one, then open Designer. Set the artwork, available options and print areas for this product.

The plugin saves model, library, design, mockup and order files in your WordPress storage. Generator project data and revisions are also saved in that installation's database.

Add your own materials and import selected assets from Alter Product. After downloading, you use a local copy. Importing, checking for updates and downloading new versions are separate actions.

Manage the library and designs in WordPress with the appropriate permissions. Customers use the tools and materials available in your store without access to administrative library editing.

You decide which design to assign to a product, where to display the embedded tool and which personalization options to offer. Also check the assets available in the embedded Customizer library. After assigning a design, embedding may be enabled by default on the product page; control its display in the product settings.

You host the assets, while the tool interface loads from Alter Product inside an iframe. The Alter Product service checks account access, the plan and sessions, and supplies the import catalog. Integration requires a connection to this service.

Back up the database, file directory and WordPress keys and salts needed to read the plugin's encrypted data. This lets you restore not only visible graphics but also the data needed to continue working.

Choose a display method that fits your store: a tool on the product page, a button leading to a dedicated page, or embedding through the available blocks and shortcodes. Viewer, Configurator and Customizer serve different purposes, so you do not need to offer all of them at once.

Adapt product presentation to your brand. Manage local backgrounds, logos and embedded tool appearance settings in the plugin. Individual options depend on your plan.

Customers choose a variant and personalize the product. The plugin links the configuration and saved design to the cart item and later to the WooCommerce order. Available mockups help identify the ordered print.

Configure a connection to your chosen provider in the plugin settings. Then map the product, variants and print placements to the provider's catalog, prepare the files and submit the WooCommerce order for fulfillment.

Configure your own connection to an AI provider and use available image generation or enhancement features while working on a design. Plugin requests go from WordPress to the selected provider and are billed to your account with that provider.

When an embedded tool launches, the integration obtains a short-lived token, also called a session key. Permanent account credentials stay on the server. Customers do not need to copy keys or sign in to the owner's Alter Product account.

The default token validity in the current implementation is 15 minutes. The server can specify a different duration, so the integration uses the expiry time of the session it receives. Reusing a token does not extend that expiry. A new session is required for another authorization after it expires.

This depends on the tool and whether it still has a suitable, valid session. The plugin does not share one session across all visitors and products. The rules below describe its current behavior.

The counter increases when the API successfully issues a new token. Using an already issued, valid token is not another issuance. When choosing a plan, account for tool launches, refreshes and reopenings, rather than only orders or visitors.

Embedded tools within the same store share a monthly session limit. The counter is tracked separately for each store, by calendar month in UTC. New embedded Designer and Model Generator sessions in the WordPress admin panel also increase this counter. Simply downloading an available model through the import API does not open an editor session.

Once the limit is reached, the system refuses to issue further sessions. This is a subscription usage limit; check your plan for the current allowance.

The Public API uses HTTP requests and JSON data. You can write an integration in the language and environment used by your backend. You do not need to rebuild your store in WordPress to embed Alter Product tools.

Below are examples of technologies you can use for a server-side connection. In each, you implement the same stages: API authorization, tool session creation and linking products, the cart and orders to your system.

In the browser, use React, Vue, Angular or plain HTML and JavaScript. TypeScript also works for implementing communication. The page embeds an iframe, handles postMessage events and connects to your backend.

The frontend handles page appearance and cart interactions, while the backend handles authenticated Public API calls. With frameworks that combine both layers, such as Next.js, keep permanent key handling and session creation exclusively on the server side.

Keep your own checkout, payment system, CMS and order fulfillment process. As part of implementation, connect these elements to design data and events from the selected Alter Product tool.

Alter Product provides 3D tools, design data and session mechanisms. Your backend connects them to products, customer accounts, the cart and order handling. Create intermediary endpoints for your frontend without exposing Alter Product credentials in the browser.

First establish a connection and an embedding session for one product. Then add configuration, design saving and order handling according to the selected tool.

Embedding instructions include parameters and examples. The postMessage chapters explain communication with the page, while the API documentation describes backend operations.

After preparing one product, walk through the entire process. Then apply the verified setup to other catalog items.