TronDesigner - Integration Examples
Docs: Developer documentation  |  Loading the script  |  Debugging and error handling

Back to examples

Init Failure Handling

This example intentionally uses an invalid API key (INVALID_KEY_TO_TRIGGER_FAILURE) so that the script's initialization fails on load. The script then calls the data-td-script-init-failed-callback function, dispatches a userInitFailed event on the <script> element, and getInitializing() rejects with the same error.

The data-td-script-init-failed-callback attribute points at onScriptInitFailed, which displays a modal popup with the server's reason (error.cause) and marks the designer button as disabled to make it clear the integration is unavailable.

Callback attributes used here:

Oregon 400 ml - Red

Open Designer (will fail — invalid key)

Implementation Code

<!-- Use a wrong key to force the failure callback -->
<script
    async
    src="https://app.trondesigner.com/js/website-integration.js"
    data-td-api="https://app.trondesigner.com/api"
    data-td-api-key="INVALID_KEY_TO_TRIGGER_FAILURE"
    data-td-script-initialized-callback="onScriptInitialized"
    data-td-script-init-failed-callback="onScriptInitFailed">
</script>

<script>
    function onScriptInitFailed(error) {
        // error.cause holds the server's reason, error.message the technical one
        const message = (error && (error.cause || error.message)) || String(error);
        document.getElementById('error-message').textContent = message;
        document.getElementById('error-overlay').classList.add('visible');
        document.querySelector('.designer-btn-wrapper').classList.add('disabled');
    }

    function closeNotification() {
        document.getElementById('error-overlay').classList.remove('visible');
    }
</script>

<!-- Modal popup, hidden until init fails -->
<div id="error-overlay" class="notification-overlay">
    <div class="notification-popup">
        <h2>Initialization Failed</h2>
        <p>The TronDesigner SDK could not initialize.</p>
        <p><code id="error-message"></code></p>
        <button onclick="closeNotification()">Dismiss</button>
    </div>
</div>