Variable: ScriptElementDataAttributesNames
ts
const ScriptElementDataAttributesNames: object;Data attributes of the <script> tag that loads the integration script.
Type declaration
| Name | Type | Default value | Description |
|---|---|---|---|
apiKey | "data-td-api-key" | 'data-td-api-key' | Required. Your TronDesigner API key (Admin Portal: Settings → API Keys). |
apiUrl | "data-td-api" | 'data-td-api' | Required. Base URL of the TronDesigner API: https://app.trondesigner.com/api. A trailing slash is removed. |
customerCompany | "data-td-customer-company" | 'data-td-customer-company' | Company of the customer. Used only together with data-td-customer-identity. |
customerEmail | "data-td-customer-email" | 'data-td-customer-email' | E-mail address of the customer. Used only together with data-td-customer-identity. |
customerIdentity | "data-td-customer-identity" | 'data-td-customer-identity' | Your own stable ID of the customer, e.g. the shop user ID of a logged-in visitor. When set, the script initializes the session customer with this identity (the server finds or creates the customer and updates the person, company and e-mail from the other data-td-customer-* attributes) instead of restoring the anonymous customer from localStorage. See also IWebsiteIntegration.setCustomer. |
customerPerson | "data-td-customer-person" | 'data-td-customer-person' | Name of the contact person of the customer. Used only together with data-td-customer-identity. |
language | "data-td-language" | 'data-td-language' | Language of the editor UI, as an ISO 639-1 code (e.g. de). |
logLevel | "data-td-log-level" | 'data-td-log-level' | How much the script and the editor write to the browser console. Allows the following values: - debug - info - warn (default) - error An unknown value is reported as a warning and warn is used. See also IWebsiteIntegration.setLogLevel. |
logoCreatedCallback | "data-td-logo-created-callback" | 'data-td-logo-created-callback' | Name of a global function to call when the customer uploads a logo in the editor. It receives one argument of type DesignerEntityEvent with detail of type ILogoDTO. |
logoDeletedCallback | "data-td-logo-deleted-callback" | 'data-td-logo-deleted-callback' | Name of a global function to call when the customer deletes a logo in the editor. It receives one argument of type DesignerEntityEvent; entityGuid is the logo GUID and there is no detail. |
logoUpdatedCallback | "data-td-logo-updated-callback" | 'data-td-logo-updated-callback' | Name of a global function to call when a logo is updated in the editor. It receives one argument of type DesignerEntityEvent; entityGuid is the logo GUID and there is no detail. |
monitoredElementId | "data-td-monitored-element-id" | 'data-td-monitored-element-id' | ID of an element whose subtree the script watches for added and removed editor openers, so elements rendered later are registered automatically. Equivalent to calling subscribeElementChanges with that element after initialization. Openers are detected however they are added (appendChild, innerHTML, insertAdjacentHTML, …); attribute changes are not detected — call refreshRegisteredElements for those. |
printJobCreatedCallback | "data-td-print-job-created-callback" | 'data-td-print-job-created-callback' | Name of a global function to call when the editor saves a new print job for the first time (at most once per editor session; later saves of it fire the updated callback). It receives one argument of type DesignerEntityEvent with detail of type IPrintJobDto. Same as subscribeDesignerEvent('printJob', 'created', callback). |
printJobUpdatedCallback | "data-td-print-job-updated-callback" | 'data-td-print-job-updated-callback' | Name of a global function to call when the editor saves a print job that already exists (opened in Edit mode, or saved earlier in the same editor session). It receives one argument of type DesignerEntityEvent with detail of type IPrintJobDto. Same as subscribeDesignerEvent('printJob', 'updated', callback). |
proofreadingCreatedCallback | "data-td-proofreading-created-callback" | 'data-td-proofreading-created-callback' | Name of a global function to call when the editor generates a proofreading. It receives one argument of type DesignerEntityEvent with detail of type Blob, which contains the proofreading PDF file. |
scriptInitFailedCallback | "data-td-script-init-failed-callback" | 'data-td-script-init-failed-callback' | Name of a global function to call when the script initialization has failed, e.g. because of an invalid API key. The function receives one argument of type `Error |
scriptInitializedCallback | "data-td-script-initialized-callback" | 'data-td-script-initialized-callback' | Name of a global function to call when the script has initialized (customer ready, editor loaded). The function receives no arguments. It's called before the IWebsiteIntegration.getInitializing promise resolves. An exception thrown inside it is logged to the console and doesn't affect getInitializing(). |
textCreatedCallback | "data-td-text-created-callback" | 'data-td-text-created-callback' | Name of a global function to call when the customer adds a text in the editor. It receives one argument of type DesignerEntityEvent with detail of type ITextDTO; entityGuid is the ID of the text object. |
Remarks
The script reads them once, when the page has loaded. data-td-api and data-td-api-key are required; without them the script can't initialize.
The …-callback attributes take the name of a global function. The function must be reachable as window[name] when the script initializes, so declare it with function name() {} (or assign it to window) — functions declared with const or let aren't found. A missing function is reported in the console.
Example
html
<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="{API_KEY}"
data-td-script-initialized-callback="onScriptInitialized"
data-td-script-init-failed-callback="onScriptInitFailed"
></script>
<script>
function onScriptInitialized() { console.log('TronDesigner is ready'); }
function onScriptInitFailed(error) { console.error('TronDesigner failed to initialize', error); }
</script>