API (Website Integration)

This page explains how to configure the Website Integration API in the TronDesigner Admin Portal.

🌐 Website Integration API

The Website Integration API allows you to embed the TronDesigner Editor directly into your own website. This integration provides a seamless experience for your customers to create or customize print designs without leaving your interface.

How it works

  1. Admin Setup (Generate Key & Whitelist Domains)

  2. Script Loading (Embed tag & Auto-init window object)

  3. User Interaction (Launch Editor via HTML attributes or JS)

The integration relies on a lightweight JavaScript script. Once added to your page, it initializes the window.tronDesigner object, which acts as the bridge between your website and the Editor. You can trigger the Editor using either simple HTML Data Attributes for a low-code setup or JavaScript Methods for more complex, dynamic workflows.

⚙️ Setting up the Integration

1. Generate an API Key

Before you begin, you must generate a dedicated key in the Admin Portal → Settings → API Keys → Website Integration API Keys.

  • Name your key: Use a descriptive name (e.g., "Production Webshop").

  • Define Allowed Domains: For security, specify exactly which domains (e.g., https://shop.example.com) are permitted to use this key.

2. Add the Integration Script

Copy and paste the following snippet into the <head> or at the end of the <body> of your website. Replace {{Your API Key}} with the key generated in the previous step.

<script
    async
    src="https://integration.trondesigner.com/js/website-integration.js"
    referrerpolicy="origin"
    data-td-api="https://integration.trondesigner.com/api"
    data-td-api-key="{{Your API KEY}}">
</script>

Because the script is loaded asynchronously via the async attribute, the window.tronDesigner object may not be available immediately upon page load. If you are calling JavaScript methods on load, ensure the object is initialized first.

3. Testing the Integration

Once the script is added, verify the connection by following these steps:

  1. Load the Page: Open your website in a browser where the script is embedded.

  2. Check the Console: Open Developer Tools (F12) and type window.tronDesigner. It should return the integration object.

  3. Trigger the Editor: Click your integration button or call openDesigner() via the console.

  4. Verify Domain: If the Editor fails to load with a "Domain Not Allowed" error, double-check that your current URL matches the Allowed Domains in the Admin Portal.

Integration Methods

Once the script is loaded, you have two primary ways to interact with the Editor:

Method A: HTML Data Attributes (Low-Code)

This is the fastest way to integrate. You can turn any HTML element into a trigger by adding data-td-* attributes.

  • Trigger: The Editor opens automatically when the element is clicked.

  • Best for: Standard buttons or links in your shop.

Method B: JavaScript API (Dynamic)

For advanced workflows, use the global window.tronDesigner instance to open the Editor programmatically.

  • Trigger: Call openDesigner() within your own custom JavaScript functions.

  • Best for: Single Page Applications (SPAs) or designs that require custom logic before launching.

🔐 Security & Best Practices

The Website Integration API key is a public-facing key (visible in your website's source code). Therefore, its security is managed differently than backend secrets.

  • Always use Allowed Domains: This is your primary defense. By whitelisting your domain, you prevent unauthorized sites from stealing your key and using your design sessions.

  • Separate Keys per Environment: Use one key for dev.example.com and another for shop.example.com. This allows you to test new features without affecting your live production environment.

  • Key Rotation: If you suspect a key is being used inappropriately, simply generate a new one in the Admin Portal, update your script tag, and delete the old key. No backend changes are required.

⚠️ Do not mix with backend secrets

Website Integration keys are front-end keys and are expected to live in HTML. Any server-side keys (for REST API, Webhooks, etc.) must be managed separately and never placed into your client-side pages or JavaScript files. Exposing a REST API key in the browser gives attackers full access to your design data and assets.–

👉 For details and options, see the Full Reference – Website Integration.