Quick Start

This guide helps you quickly launch the TronDesigner Editor using the Web Integration Script. This is the fastest way to verify your API key and see the Editor in action.

Goal: The goal of this page is to get you from "zero" to a running Editor instance. By following these steps, you will launch the TronDesigner Editor as an overlay on a test page, allowing you to verify that your API key and domain authorization are working correctly.

Result: The Editor will open as a dialog overlay. You can view a live demo here to see the final behavior.

1. Prerequisites

Before you begin, ensure you have:

  • License: A valid TronDesigner account and access to the Admin Portal.

  • API Key: Created in the Admin Portal under Settings → API Keys.

  • Whitelisted Domain: Your testing domain (e.g., localhost or yourdomain.com) must be added to the allowed list for that API key.

  • Supplier Code: Ensure the Supplier code is configured in your Admin Portal under Suppliers.

    • The value used in your code/script must match the value in the portal exactly.

    • Example: If you are integrating products from supplier comany “PF Concept International Cooperatief U.A.”, your supplierCode needs to be PFC.

2. The "Hello World" Example

Copy and paste the code below into a single .html file. Replace {YOUR_API_KEY} with your actual key from the Admin Portal.

<html lang="en">
<head>
    <script>
        function tronDesignerInitialized() {
            window.tronDesigner
                .setExactProduct("PFC", undefined, (b) => b.addVariant("10086021"))
                .addExactPrinting("front", "PAD03")
                .open({mode: "dialog"});
        }
    </script>
    <script
            async
            src="https://app.trondesigner.com/js/website-integration.js"
            referrerpolicy="origin"
            data-td-api="https://app.trondesigner.com/api"
            data-td-api-key="{TD_API_KEY}"
            data-td-script-initialized-callback="tronDesignerInitialized"
    ></script>
</head>
<body>
<h1>TronDesigner Integration Test</h1>
<p>If configured correctly, the Editor will open automatically on page load.</p>
</body>
</html>

3. Integration Logic

To ensure a smooth implementation, the script follows these specific logic steps:

  • Asynchronous Loading: Because the script loads asynchronously (async), the window.tronDesigner object is not available the exact millisecond your page loads.

  • The Builder Pattern: Inside that function, we use the .setExactProduct() and .addExactPrinting() methods. This allows you to pre-configure the editor before it even appears to the user.

  • The Result: The .open() method finally launches the Editor as a Dialog Overlay directly over your current page.

4. Troubleshooting

If the Editor does not appear:

  • Check the Console: Right-click your page → Inspect → Console. Look for "Unauthorized" or "Domain not allowed" errors.

  • Verify IDs: Ensure the Supplier Code matches the code you have configured in your Admin Portal.

  • Script Order: Ensure the JavaScript function is defined above the script tag that loads the

    Web Integration Script.

Next Steps

Now that you have verified your connection, choose your path: