# CalcumateInitialized Event ## What is the CalcumateInitialized event? The `CalcumateInitialized` event is a custom browser event that gets automatically dispatched when Calcumate completes its initial setup and is ready for user interaction. This event allows you to programmatically detect when the calculator has fully loaded and access its configuration data. ### When is this event triggered? The event is fired once during the initial load, immediately after: * Integration data has been successfully fetched * Categories and items have been loaded * User's previously selected items have been restored (if any) * All validation checks have passed * The calculator UI is ready for interaction ### How do I listen for this event? You can listen for the `CalcumateInitialized` event using a standard event listener: ```javascript window.addEventListener('CalcumateInitialized', (event) => { const data = event.detail; console.log('Calcumate initialized:', data); // Your custom logic here handleCalcumateReady(data); }); ``` ### What data does the event contain? The initialization data is available in the `event.detail` property and includes comprehensive information about the calculator's configuration: ```javascript { "state": { "isReady": true, "selectedCategory": "presets", "selectedCategoryList": "all", "selectedItems": [ { "id": "BUFFETT-LIVINGROOM-19", "sort": 7, "product": "Buffett", "cssId": "buffet", "calcumatex": true, "calcumate": true, "depth": 124.3, "dashboard": true, "order": 11, "weight": 40, "active": true, "width": 45.6, "height": 52.2, "category": "Living Room", "thumbnail": "buffett.webp", "quantity": 1 }, ... ], "primaryCalculation": null, "secondaryCalculation": null, "calculating": false, "showDialog": false, "animation": "play", "animationTimeOuts": [], "searchString": "", "matchedItems": [], "scrollToItem": -1, "showCustomItemForm": false, "customItems": [], "showListModeScreen": false, "showPresetsListModeScreen": false, "location": null, "isLocationEnabled": true, "notification": null, "userGeo": null, "isCSP": false } } ``` ### Best Practices * **Add the event listener early** - Place your event listener in the `` or early in the `` to ensure you don't miss the event. * **Remove event listeners** when they're no longer needed to prevent memory leaks: ```javascript const handler = (event) => { console.log('Initialized!', event.detail); }; window.addEventListener('CalcumateInitialized', handler); // Later, when cleaning up window.removeEventListener('CalcumateInitialized', handler); ``` ### Timing considerations The `CalcumateInitialized` event fires **before** the `CalculationFinished` event. Here's the typical event sequence: 1. `CalcumateInitialized` - Calculator is ready and loaded 2. User interacts with calculator (adds items, etc.) 3. `CalculationFinished` - Calculation results are available ### Browser Compatibility This feature uses the standard `CustomEvent` API, which is supported in all modern browsers. For older browser support, you may need a polyfill. ### Troubleshooting #### Event not firing? * Check browser console for initialization errors * Verify the Calcumate script is loading correctly * Ensure there are no domain mismatch errors blocking initialization #### Need to re-initialize? ```javascript window.dispatchEvent(new CustomEvent('RE-INIT', {})); ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.calcumate.co/frequently-asked-questions/calcumateinitialized-event.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.