tag, insert the property style with this value `style="width: calc(100vw - 40px);max-width: calc(100vw - 40px);"` The code snippet should look like this now:

<div
  id="calcumate-root"
  data-integration="ready-layout-272806.framer.app"
  data-integration-2=""
  data-ref="AQICAHhReAOexSsfBeJ/FMNVdjLFzyMEhuepXqwRfRaqckbrnAHuaOBBjQ0oYfYSZfPPpQhwAAAAgzCBgAYJKoZIhvcNAQcGoHMwcQIBADBsBgkqhkiG9w0BBwEwHgYJYIZIAWUDBAEuMBEEDJFfnjyHj8ipzqKqhAIBEIA/fZFsqE7ThBq1XcFkpUmHAa4sm07+g98Vlyv0XHqZdaAvxWx+GDSwGfVXySu6deP1uBaczPeFHD6ayG6d4N3P"
  data-int="112a234c-0ca3-4f07-981c-a1845d0bfa7c"
  style="width: calc(100vw - 40px);max-width: calc(100vw - 40px);"
></div>
<script defer src="https://production.calcumate.co/static/js/main.js"></script>

**Step 7: Publish/Update your website**

## Approach 2 **Step 4: Add the code to framer** * On the edit view, click on the settings button

* Select the page in which you want to embed the calculator and scroll down to the "custom code" section and paste in "End of \ tag" or click in the "show advanced option" and paste it in "Start of \ tag".

**Step 4: Publish/Update your website**

# How to integrate Calcumate to Wix **Step 1: Create a Calculator** * Start by creating a new calculator from your Calcumate dashboard (login [here](https://calcumate.co/login) if you haven't already). * You can also copy an existing calculator if you've already set one up before.

**Step 2: Publish the Calculator** * Go to the Confirm step. * Click Publish to generate the code snippet.

**Step 3: Copy the generated code snippet**

**Step 4: Add the embed element** * On the edit view, click on the "add elements" button, find the "Embed Code" category and select "Embed HTML"

**Step 5: Configure the embed** * Select the embed * Select the "code" option (if not selected) * Paste the code snippet generated on *step 3* * Click on "apply"

**Step 6: Adjust the embed dimensions** * At the top of the last-step code we need to paste this style tag ```html ``` This will help to set the dimensions of the calculator on desktop and mobile view. The code should now look as this: ```

``` **Step 7: Publish/Update your website** * On the top-right corner click on the publish button and select your configuration

# Save Loading Plans The **Save Loading Plans** feature allows your customers to **save, revisit, and share** the optimization results generated by Calcumate. When enabled, users can submit a small form after completing a calculation and receive a **shareable link** that preserves their selected unit, items, configuration, and visual loading plan. This makes it easy for customers to continue a conversation with your team, request quotes, or collaborate internally without repeating the entire calculation. *** ### **What Is the Save Loading Plans Feature?** Save Loading Plans allows an end user to: * Generate a **shareable URL** of their calculation results * Save the selected items and unit configuration * Return to the same loading plan later * Provide key contact details to your business The shared link opens the calculator **pre-loaded with the exact configuration** the user originally created. This provides continuity between the user's initial exploration and your sales or operations workflow. *** ### **Why This Feature Is Valuable** #### **For your business** * Great for internal quoting, validation, or operational planning * Improves conversion by letting users “save progress” and return later * Works well in multistep funnels, internal apps, and email-based workflows #### **For your customers** * They don't need to repeat the calculation * They can send their loading plan to partners or family members * They can revisit the exact configuration later * It becomes easier to compare units and configurations *** ### **How to Enable Save Loading Plans** You can activate this feature directly in the **Calcumate Dashboard**. 1. [Log](https://calcumate.co/login) into your Calcumate Dashboard 2. Navigate to your calculator configuration Step 1: Go to the calculator configuration

Step 2: Go to the Advanced Settings

3. Look for **Allow the user to bookmark their result** in the features list

4. Toggle **Allow the user to bookmark their result** 5. Configure the notification email(s) you want to receive saved plans * These emails must be added in the *Where would you like their details emailed to* section

Once enabled, the “Save Loading Plan” action automatically appears in your calculator after a calculation is completed.

*** ### **How the Save & Share Flow Works (End User Experience)** After completing an optimization, your customer sees a **Save Loading Plan** button. #### **Step-by-step flow** 1. **User completes a calculation**\ The calculator produces the loading plan visualization and selected product list. 2. **User clicks “Save Loading Plan”**\ A small form opens requesting basic contact details (name, email, phone—depending on your configuration). 3. **User submits the form**\ Calcumate: * Generates a unique, shareable URL * Sends this URL to the user’s clipboard (copy prompt) * Sends the same URL to the email(s) you configured in your Dashboard 4. **User shares the link**\ Anyone with the URL can open the loading plan on the same calculator page. 5. **Your team receives the saved plan**\ The email includes: * Customer details * Shared link * Context of the calculation (unit, items, etc.) > **Note:** The link works on any calculator because it stores all relevant data, but it is **intended** to be used on the calculator where the optimization originally happened. *** ### **Example of a Shared Link** A typical shared URL looks like: ``` https://yourcalculator.com/?planId=abc123xyz ``` Opening the link loads the calculator **pre-filled** with the exact items and unit used by the user. *** ### **Frequently Asked Questions (FAQ)** #### **Can users edit their loading plan after opening the shared link?** No. They can modify items or units, and run a new optimization. But that will not be updated on the plan. #### **Does the link expire?** Currently, save links do **not expire**. #### **Is personal information included in the shared URL?** No. Personal details are only sent to your configured email(s) and are never stored in the URL. #### **Can we customize the form fields?** Field customization is currently not supported for loading plans. #### **Can we use the shared link in internal tools?** Yes. Many clients embed these URLs in CRM notes, email threads, or quoting systems. *** ### **Troubleshooting** #### **The Save Loading Plan button does not appear** Check: * Feature is enabled in the Dashboard #### **We are not receiving emails** Verify: * Your notification emails are correctly added in Dashboard settings * Emails are not being filtered by your mail provider *** ### **Best Practices** * Add your team’s shared inbox to the notification list (e.g., sales@, operations@) * Use shared URLs internally for quotes, cross-team reviews, or validation *** If you need help enabling the feature or customizing the workflow, contact our Support team. # How to Set Up CalcumateGEO **Step 1: Create a Calculator** * Start by creating a new calculator from your Calcumate dashboard (login [here](https://calcumate.co/login) if you haven't already). * You can also copy an existing calculator if you've already set one up before.

**Step 2: Enable Geolocation Widget** * Go to Advanced Settings of the calculator and enable the feature: *"ADVANCED – This is a store-finder calculator, display the geolocation widget"* * Save your changes.

**Step 3: Publish the Calculator** * Go to the Confirm step. * Click Publish to generate the code snippet. * Copy and paste the snippet onto your website, just like a regular Calcumate calculator.

**Step 4: Configure Your Geo Locations** * In your dashboard, go to My Account. * Head to the section Geographical Locations Setup and click Edit.

**Step 5: Upload Your Locations File** * Choose your geo-location method (IP address, Device geolocation or Manual). * Download the provided template file. * Fill out the required fields: * The specific URL where each CalcumateGEO calculator is installed * A friendly name for each location/calculator * The latitude and longitude coordinates for each location * Upload your completed file in the same section. * Click Save Changes.

\ \
# CalcumateGEO Custom Events Integration CalcumateGEO is an intelligent calculator routing system that automatically detects user location and dynamically redirects to the most appropriate calculator for their geographic region, while allowing users to select another location if required, via the a dropdown menu. The system preserves all calculator configurations and interactions through a robust custom event system that maintains data integrity across calculator transitions. ## Booking Event This event works the same way as is described in [this article](/calculator-data-extraction/method-2-subscribe-to-the-calculator-event). ### UserDetails Event This event is triggered by the (optional) lead capture flow. It's important to note that CalcumateGEO should be configured for lead capture as stated in [this article](/driving-conversions-and-efficiency-with-lead-capture/lead-capture-overview). However, when configuring CalcumateGEO, in the advance settings menu:

You should disable CTA redirect like this:

If you omit this step, the event may not be triggered. # CalcumateGEO Session Storage Cleanup in Single Page Applications Our CalcumateGEO widget uses session storage to persist the selected `FACILITY-ID` across calculator interactions. While this enhances user experience, it can in very specific situations, cause conflicts when the calculator is used on different pages of the same website, such as when used within Single Page Applications. ## Automatic Cleanup The CalcumateGEO widget automatically attempts to clean up session storage in the following scenarios: #### Traditional Multi-Page Websites * **Page unload events**: `beforeunload` and `pagehide` * **Component unmounting**: When React components are properly unmounted ## Current Limitations to Automatic Cleanup In **Single Page Applications (SPAs)** and other unique scenarios where navigation doesn't trigger full page reloads, the below sequence can occur.\ \ When a user: 1. Visits **Page A** with the calculator and selects a facility 2. Navigates to **Page B** which also has the calculator 3. The `FACILITY-ID` from Page A persists and may interfere with Page B's calculator This is because, in (for example) Single Page Applications (React, Vue, Angular, etc.), our automatic cleanup may not work reliably because: * **No page reloads**: Navigation uses client-side routing * **Event timing**: Page unload events may not fire during SPA navigation * **Component lifecycle**: Our embedded script may not detect when you navigate between routes ## Workaround for SPA Applications If you're using CalcumateGEO in an SPA, we recommend manually clearing the session storage when navigating away from pages that contain the calculator. ### React Implementation ```jsx import React, { useEffect } from 'react'; const YourPageComponent = () => { useEffect(() => { return () => { try { sessionStorage.removeItem('FACILITY-ID'); } catch (e) { } }; }, []); return (

{/* Your CalcumateGEO widget here */}

); }; export default YourPageComponent; ``` ### Vue.js Implementation ```javascript export default { name: 'YourPageComponent', beforeUnmount() { try { sessionStorage.removeItem('FACILITY-ID'); } catch (e) { // Handle cases where sessionStorage might not be available } } } ``` ### Angular Implementation ```typescript import { Component, OnDestroy } from '@angular/core'; @Component({ selector: 'app-your-page', templateUrl: './your-page.component.html' }) export class YourPageComponent implements OnDestroy { ngOnDestroy(): void { try { sessionStorage.removeItem('FACILITY-ID'); } catch (e) { // Handle cases where sessionStorage might not be available } } } ``` ## Future improvements We're actively working on a more robust solution that will: * Auto-detect SPA navigation patterns * Eliminate the need for manual cleanup in most scenarios This documentation will be updated once these improvements are released. # Calcumate Supported Languages Calcumate is designed to support operators worldwide. To help you provide a seamless experience to your customers, the calculator is available in multiple languages. Below is the full list of languages currently supported: * Arabic * Catalan * Czech * Danish * Dutch * English * Estonian * Finnish * French * German * Greek * Hebrew * Hungarian * Italian * Japanese * Korean * Lithianian * Malay * Norwegian * Polish * Portuguese * Romanian * Slovak * Spanish * Swedish * Chinese * Turkish * Vietnamese
If you operate across multiple regions or countries, you can configure a different calculator for each language. ### Need Another Language? We continue expanding our language coverage as we grow internationally. If your required language is not listed above, please [contact us](https://calcumate.co/contact-us).
# Container Requirements (Width/Height) Guide explaining when and how to add explicit width/height to the Calcumate container to fix layout issues in iframes, site builders, and other environments where dimensions aren't inherited naturally ## Container Requirements (Width/Height) ### Why does Calcumate need a container with defined dimensions? When Calcumate initializes, it attempts to measure and reserve space in the DOM to properly render the calculator interface. The calculator uses this measurement to determine responsive breakpoints, layout proportions, and component sizing. In standard web page implementations, the `calcumate-root` div naturally inherits a usable width from its parent elements. However, certain environments prevent this inheritance, causing the container to report a width of `0` or an undefined value. When this happens, Calcumate cannot calculate proper dimensions, resulting in layout failures or the calculator not loading at all. ### When do container width issues occur? Container width problems most commonly appear in these scenarios: **Iframe Embedding** When using web editors like Wix, GoDaddy, Framer, Squarespace, or similar CMS platforms that embed custom code inside iframes, the `calcumate-root` div may not inherit any natural width from the parent document. **Site Builders with Isolated Containers** Some site builders place custom HTML blocks inside containers that have no explicit dimensions, use `display: inline`, or are hidden during initial page load. **CSS Frameworks with Flex/Grid Layouts** Containers using `flex` or `grid` layouts without explicit sizing can result in zero-width children until content forces expansion—which Calcumate cannot trigger during its initialization phase. **Delayed or Lazy-Loaded Sections** If your calculator is inside a tab, accordion, modal, or lazy-loaded section that starts hidden (`display: none`), the container may report zero dimensions when Calcumate first tries to initialize. ### Symptoms of missing container dimensions If your container lacks proper dimensions, you may experience: * Calculator not appearing at all (blank space) * Calculator appearing extremely small or compressed * Layout elements overlapping or misaligned * JavaScript console errors related to dimension calculations * Calculator loading on desktop but failing on mobile (or vice versa) ### Recommended Solution Add explicit width styling to your `calcumate-root` div: ```html

``` The `calc(100vw - 40px)` formula provides viewport-relative sizing with a small margin to prevent horizontal scrollbars. #### Alternative sizing approaches Depending on your specific setup, you may prefer different width values: **Fixed width for consistent sizing:** ```html style="width: 980px; max-width: 100%;" ``` **Percentage-based for flexible layouts:** ```html style="width: 100%; max-width: 1200px;" ``` **Viewport-relative without margins:** ```html style="width: 100vw; max-width: 100vw;" ``` ### Iframe-Specific Recommendations When embedding Calcumate inside an iframe, you need to configure both the iframe dimensions and the container within it. #### Recommended iframe dimensions | Device | Width | Height | | ------- | ----- | ------ | | Desktop | 980px | 800px | | Mobile | 350px | 850px | #### Complete iframe implementation example ```html ``` ```html

``` ### When should you apply these styles? **Apply explicit width styling when:** * Embedding through Wix, GoDaddy, Framer, Squarespace, or similar site builders * Placing the calculator inside an iframe * Using CSS frameworks that don't provide natural container widths * The calculator appears inside tabs, modals, accordions, or collapsible sections * You experience any of the symptoms described above * You're unsure about your container's natural dimensions **You may not need explicit styling when:** * Embedding directly into standard HTML pages with normal document flow * Your container already has explicit CSS width defined elsewhere * The calculator is loading correctly without any layout issues ### Troubleshooting steps If you're experiencing layout issues, follow these steps: 1. **Inspect the container**: Use browser developer tools (F12) to check if `calcumate-root` has a computed width greater than zero. 2. **Add explicit dimensions**: Apply the recommended inline style to your `calcumate-root` div. 3. **Clear cache and refresh**: Perform a hard refresh (Ctrl+Shift+R or Cmd+Shift+R) to ensure you're seeing the latest changes. 4. **Check responsive behavior**: Test both desktop and mobile viewports to ensure the calculator displays correctly at all sizes. 5. **Verify parent containers**: Ensure no parent element is constraining or hiding your calculator container. ### Need more help? If you've followed this guide and are still experiencing issues, please contact our support team with: * Your website URL where the calculator is embedded * Screenshots of the issue (desktop and mobile if applicable) * Browser console errors (if any) * Your CMS or site builder platform name We're here to help ensure your Calcumate integration works perfectly. # 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', {})); ``` # CalculationFinished Event ### What is the CalculationFinished event? The `CalculationFinished` event is a custom browser event that gets automatically dispatched when a calculation process completes. This event allows you to programmatically detect when calculations are done and access the results. ### When is this event triggered? The event is fired immediately after any calculation finishes processing. ### How do I listen for this event? You can listen for the `CalculationFinished` event using a standard event listener: ```javascript window.addEventListener('CalculationFinished', (event) => { const result = event.detail; console.log('Calculation completed:', result); // Your custom logic here handleCalculationResult(result); }); ``` ### What data does the event contain? The calculation results are available in the `event.detail` property. ```json [ { "unit": { "svg": "

``` ### What will users see with this setting enabled? With `data-disable-list-results="true"`: ✅ **Still visible:** * Room type selector (Living Room, Bedroom, Kitchen, etc.) * Preset options (1 Bedroom, 2 Bedroom, etc.) * Visual storage unit representation with items * Item category selection * Calculation animation ❌ **Hidden:** * "WE RECOMMEND" section * Specific unit size recommendations (e.g., "5m x 5m") * "BOOK NOW" button * Edit Button ### Can I toggle this setting dynamically? Yes! You can enable or disable the list results at any time by updating the attribute value: ```javascript // Hide the recommendations list document.getElementById('calcumate-root').setAttribute('data-disable-list-results', 'true'); // Show the recommendations list document.getElementById('calcumate-root').setAttribute('data-disable-list-results', 'false'); // OR remove the attribute entirely document.getElementById('calcumate-root').removeAttribute('data-disable-list-results'); ``` But you will need to initialize the calculator again like this: ```javascript window.dispatchEvent(new CustomEvent('RE-INIT', {})); ``` ### Default behavior If the `data-disable-list-results` attribute is not present or set to any value other than `'true'`, the calculator will display the recommendations list as normal. ### Need help? If you're having trouble implementing this feature or need assistance with your calculator integration, please contact our support team with your integration details and specific requirements. # Migrating to Our New High-Performance Calculator ## Migrating to Our New High-Performance Calculator We've launched a major update to our calculator with significant performance improvements. This guide will help you migrate from the old endpoint to our new, faster calculator. ### Why Migrate? Our new calculator delivers: * **90% faster load times** in most locations * **Reduced file size** from 1.2MB to just 0.2MB * **Global CDN delivery** through Cloudflare for faster worldwide access * **Optimized code** with improved dependencies and compression ### Migration Steps The migration process is simple and only takes a few minutes: #### Step 1: Access Your Dashboard Log into your [Calcumate dashboard](https://dashboard.calcumate.co/) #### Step 2: Update Your Calculator 1. Navigate to your calculator settings 2. Click **Edit** on your existing calculator 3. Click **Publish** to regenerate your integration code #### Step 3: Update Your Website Code After republishing, you'll receive new integration code. The key change is: **New endpoint:** ```html ``` Copy the new code and replace it on your website where the calculator is displayed. ### Performance Comparison Based on testing from various US locations, here's what you can expect: #### Before Migration (Old Calculator) * **Total Load Time:** 997.4ms * **File Transfer:** \~1.2MB * **Connection Time:** 281.9ms

#### After Migration (New Calculator) * **Total Load Time:** 98.2ms **(90% improvement)** * **File Transfer:** \~0.2MB **(83% reduction)** * **Connection Time:** 28.2ms **(90% improvement)**

*Results may vary based on your internet connection and geographic location.* ### Need Help? If you encounter any issues during migration or have questions about the process, please contact our support team. We're here to ensure a smooth transition to the new calculator. ### Important Notes * The migration only affects the technical endpoint - your calculator settings, design, and functionality remain unchanged. * Users will experience faster loading times immediately after migration. * No downtime is required for this migration process. # Embedding with iframes If you’re adding your integration through web editors like Wix or GoDaddy then your Calcumate integration will likely be added inside an iframe. \ \ This shouldn’t impact the performance of either your website or your Calcumate integration but you may need to manually set the height and width of the iframe in order for it to appear correctly on your website. \ \ Importantly, you’ll need to set the dimensions for both desktop and mobile devices. \ \ We recommend: \ Desktop: 980px x 800px \ Mobile: 350px x 850px

# Domain mismatch error This error message appears when the domain set for your Calcumate integration doesn’t match the one your integration has been embedded onto. Commonly this is because of either a spelling mistake, or way our database reads your domain. Either way, there’s a simple solution: 1. Copy the URL that our error message has recommended. 2. Login to your Calcumate account [here](https://calcumate.co/login) and paste the URL in step 1 of the integration builder. 3. Continue through the steps and re-publish your integration code snippet. 4. Copy this new integration and use it to replace the existing code on your website. 5. Go to the right page and clear your cache before completing a hard refresh of your browser

# Where can I find my invoices? 1. Start by logging into your account [here](https://calcumate.co/login). 2. Go to 'my account' on the left hand menu. 3. Scroll down to 'billing history'. # Update account details 1. Login to your account [here](https://calcumate.co/login). 2. Go to 'my account'. 3. Under 'account details' click the edit (pencil) icon, to the right side of the screen and edit your details accordingly. If you need to update your business/company name please email us on . # Logging into your dashboard How to login and view your calculator 1. Login to your account here - 2. Click the 'edit' button on your integration

3. You're now logged in and can start adding furniture items. To save time, we have created some 'presets'. Presets have been designed for 1/2/3/4 bedroom homes (you can edit presets if you want to add more into them).

4. Go ahead and add your items and click 'calculate'.

5. Your recommended storage unit will appear. \ You can set your 'get quote' button to have a hyperlink (call to action) to redirect your customer to your landing/quote/booking page.

# Set up multiple calculators fast You may have multiple storage/removalist locations and offer multiple services and don't want to make multiple calculators, that takes to much time. To speed up the process we have created a quick 'copy' button. Copying your calculator will retain all of your design and settings setup as per the original calculator. This means you only need to change the service type (i.e. self storage -> container storage) and modify the unit sizes, whilst retaining all your previously customised settings.

# How do I position/style the geo location widget? \[These instructions are under development] \ **Example code to reposition the geo location widget:**
Pull location dialof top-right:\ `.select-locations-wrap {`\ right: 0px!important; //To create offset from right side in 15 px: right: 15px;\ left: unset;//reset default left position } Pull it top-left:\ .select-locations-wrap {\ `right: unset; //reset property`\ `left: 15px!important;`\ `margin-left: unset; // reset styles for centering of block` [`https://www.w3.org/Style/Examples/007/center.en.html`](https://www.w3.org/Style/Examples/007/center.en.html)\ }\ \ Pull it bottom-left:\ `.select-locations-wrap {`\ `right: unset;`\ `left: 15px!important;// or any value`\ `margin-left: unset;`\ `top: unset;`\ `bottom: 15px!important; or any value`\ \ Pull it bottom-right:\ `.select-locations-wrap {`\ `right: 15px!important;`\ `left: unset;`\ `margin-left: unset;`\ `top: unset;`\ `bottom: 15px!important; or any value`\ `}`\ \ **Example code to change the style of the geo location widget (you can use any CSS style):**\ \ Change the style of the geo location widget\ \ `.select-locations-wrap { //change background color to red`\ `background-color: red;`\ `}`\ `.select-locations-wrap * { //change font size`\ `font-size: 15px!important;`\ `}`\ `.select-locations-wrap * { //change font family`\ `font-family: 'Roboto';`\ `}`\
**A note about the use of "!important":** Sometimes the browswer will ignore some styles, because there are more important styles for that specific element. In this case, the use of "!important" is often an easy solution to force the browser to use the style that you require. More information here: # How to Integrate Calculator Widget in React Native ### Installation First, install the required WebView package: ```bash npm install react-native-webview ``` or if you're using Yarn: ```bash yarn add react-native-webview ``` ### Integration Methods #### Method 1: Self-Hosted Integration If you have the calculator hosted on your website, you can simply point the WebView to that URL. ```javascript import { WebView } from 'react-native-webview'; const CalculatorComponent = () => { return ( ); }; export default CalculatorComponent; ``` #### Method 2: Inline HTML Integration Embed the calculator script directly using an HTML template within the WebView. ```javascript import React from 'react'; import { WebView } from 'react-native-webview'; const CalculatorComponent = () => { const htmlContent = `

`; return ( ); }; export default CalculatorComponent; ``` ### Advanced: Event Handling To capture calculator events and communicate with your React Native app, you can use JavaScript injection and message passing. ```javascript import React from 'react'; import { WebView } from 'react-native-webview'; const CalculatorComponent = () => { const htmlContent = `

`; const calculatorEventListener = ` window.addEventListener('Booking', function(event) { window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'calculatorLeadFillEvent', data: event.detail })); }); window.addEventListener('userDetails', function(event) { window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'userDetails', data: event.detail })); }); true; // Required for injectedJavaScript `; const handleMessage = (event) => { try { const data = JSON.parse(event.nativeEvent.data); if (data.type === 'calculatorLeadFillEvent') { console.log('Calculator lead data:', data.data); // Handle lead form submission // Example: navigation, API calls, etc. } else if (data.type === 'userDetails') { console.log('User details:', data.data); // Handle user details update } } catch (error) { console.error('Error parsing WebView message:', error); } }; return ( ); }; export default CalculatorComponent; ``` ### Configuration Parameters Replace the following placeholder values with your actual configuration: * `your-data-integration`: Your integration identifier * `your-data-ref`: Your reference parameter * `your-data-int`: Your integration parameter * `https://yourcompany.com/calculator`: Your actual calculator URL ### Best Practices * **Error Handling**: Always wrap message parsing in try-catch blocks * **Loading States**: Consider adding loading indicators while the WebView loads * **Responsive Design**: Ensure the calculator works well on different screen sizes * **Performance**: Monitor WebView performance, especially on older devices ### Troubleshooting #### Common Issues **Calculator not loading:** * Verify the script URL is accessible * Check network connectivity * Ensure all required parameters are provided **Events not firing:** * Confirm JavaScript injection is working * Check browser console for errors (use remote debugging) * Verify event listener names match the calculator's events **Layout issues:** * Adjust the WebView container styling * Check viewport meta tag settings * Test on different device sizes #### Getting Help If you encounter issues during implementation: 1. Check the browser console for JavaScript errors 2. Verify all configuration parameters are correct 3. Test the calculator in a regular web browser first 4. Contact our support team with specific error messages and device information ### Support For additional assistance or troubleshooting, please reach out to our support team with: * Device and OS version * React Native version * Specific error messages or screenshots * Steps to reproduce the issue # Configuring Content Security Policy (CSP) for Calcumate If your site uses [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) to mitigate threats such as cross-site scripting (XSS) and clickjacking, you'll need to allow the Calcumate domains below so the calculator widget can load and operate correctly. CSP is enforced per-directive, so it's not enough to list our domains in a single place — each domain needs to be added to the directive that matches the type of resource it serves. The table below shows exactly where each domain belongs. ### Required allowlist | Directive | Domains to allow | Purpose | | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | | `script-src` | `https://*.calcumate.co` | Loads the calculator widget bundle | | `connect-src` |

https\://\*.calcumate.co

| API calls for calculator data and packing optimization | | `img-src` |

https\://\*.calcumate.co

| Item images, icons, and customer-uploaded attachments | | `style-src` | `https://*.calcumate.co` | Widget styles | | `frame-src` | `https://*.calcumate.co` | Embedded calculator frame (if applicable) | If your CSP relies on `default-src` as a catch-all, adding the domains there will also work — but we recommend per-directive rules for tighter security. ### Example CSP header Here's an example header that allows Calcumate alongside common third-party services: ``` Content-Security-Policy: default-src 'self'; script-src 'self' https://*.calcumate.co; connect-src 'self' https://*.calcumate.co https://optimize.calcumate.co https://r354ovsoac.execute-api.ap-southeast-2.amazonaws.com; img-src 'self' data: https://*.calcumate.co https://calcumate-calculator-new-production.s3-ap-southeast-2.amazonaws.com https://calcumatev2-attachments-prod.s3-ap-southeast-2.amazonaws.com; style-src 'self' 'unsafe-inline' https://*.calcumate.co; frame-src 'self' https://*.calcumate.co; ``` ### How to identify a CSP issue If the calculator stops loading after a CSP change, open your browser's developer console. CSP violations look like this: > Refused to connect to 'https\://…' because it violates the following Content Security Policy directive: "connect-src …" The directive named in the error message tells you exactly where the missing domain needs to be added. > **Note:** Errors that say `ERR_BLOCKED_BY_CLIENT` are *not* CSP-related, they come from browser extensions (ad-blockers, privacy tools) on the visitor's device and aren't something your CSP or our widget can resolve. ### Need help? If you've added these rules and the calculator still isn't loading, send us a screenshot of the console errors and the relevant CSP header from your site, and we'll help diagnose. # Lead capture overview Calcumate can now provide you with improved lead flow to help you convert more business, improve efficiency and gain an edge over competitors. Turning on lead capture provides: 1. **More leads**, by reducing the chances that a visitor uses your calculator but never provides you with their contact details.
2. **Detailed information about your prospects' requirements**, enabling you to have a more relevant conversation, increasing the chances that you'll convert the prospect into a paying customer.
3. **Instant answers to your prospects**, meaning they can book straight away without needing to find time to call you or wait for responses from your team. The result is that you can close new business faster.
4. **Improved efficiency,** because you team needs to invest less time to win each new customer. \ With lead capture you can capture rich data including: * Prospect contact details * Details of items they wish to store or move * Details of your appropriate storage units / moving trucks * A link to be able to re-access the prospects calculator, providing: * a reminder of what needs to be stored/moved * a loading plan which can be played, paused and rewound # Lead data that can be captured Calcumate can now provide you with improved lead flow by capturing rich lead data including: * Contact details * Details of items they wish to store or move * Details of your appropriate storage units / moving trucks * A link to be able to re-access the prospect's calculator, providing: * a reminder of what needs to be stored/moved * a loading plan which can be played, paused and rewound **The specific data you are able to collect includes:** | Field | Explanation | Example | | | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | | **Full name** | Full name | Mr. Ben Smith | | | **Email** | Email | | | | **Phone** | Phone | 934 012 3450 | | | **Start Date** | The date that the person would like to begin storing their items. | 2024-03-10 | | | **Items List** | A list of items and their quantities | 2 seat sofa X1, Coffee table X1, TV X1, Queen/King mattress X1, Bed base (frame) X1, Fridge X1 | | | **Recommended Unit Size** |

For a storage calculator:

The title you give to the recommended unit.

For a movers calculator:

The recommended unit name, and its: capacity (space), utilisation (used) and total weight.

For a storage calculator:

5ft x 5ft | $43 monthly

For a movers calculator:

Small Truck
Space: 18m3 Used: 3.73m3 Weight: 176.2 kgs

An link to the customer's calculator results. You can send this to the customer so that they can:

remember what they wanted to store
play, pause and rewind their step by step loading plan

The customer will also be offered to bookmark the link, after they have filled out their details and sent them to you.

| | | # Setting up lead capture To turn on lead capture: 1. Log in to your dashboard here: [www.calcumate.co/login](https://help.calcumate.co/driving-conversions-and-efficiency-with-lead-capture/www.calcumate.co/login)
2. Ensure your plan is at least Generator (ie. Generator or Enterprise) to enable the lead capture function.
3. Navigate to the calculator to which you wish to add lead capture.
4. Go to 'advanced settings' on the 'options' tab.

5. Turn on 'request lead details from the user'.\ Add the email address you want all leads to be sent to i.e. , press '+'.\ If you want multiple recipients you can repeat the process to add multiple email addresses.

6. Editing your lead generation form. \ Click the pencil icon to edit the questions on your lead generation form.

7. You can edit the default questions by clicking the pencil icon. \ You can press the bin icon to delete questions you don't want.\ To add additional fields, press 'add additional field'.

* For example, you can add a calendar (date selection) and/or extra comments (text response).\ Press 'save' when happy with your changes.

## Your customer experience will look like this * The customer can use your presets or build their calculation by selecting individual items. * Calcumate will generate the result and provide the recommended storage unit. * The customer can select 'BOOK NOW' and they will provided with your lead generation form. * After completing the form, they will press 'BOOK NOW' and be redirected to your CTA (call to action) URL. \ (You can update your CTA link in the 'options' tab)\

Customer point of view below.

## Your point of view You will receive an email with the information you have requested in your landing page.

# Advanced Integration: Lead Data Flow #### Lead Data Connectivity While Calcumate provides a built-in lead capture form, you may want to pass that data to external systems. **Data Direction** * FROM Calcumate TO External Systems: Supported. You can capture lead details via JavaScript events. * FROM External Systems TO Calcumate: Not Supported. Calcumate does not currently accept lead data (Name, Email, Phone) via URL parameters to pre-populate its internal forms. **Capturing Lead Details via JavaScript** If you have "Request lead details from the user" enabled, Calcumate triggers a `userDetails` event whenever a user submits the lead form. You can listen for this on your host page to trigger secondary actions: JavaScript ``` window.addEventListener('userDetails', (e) => { const { name, email, phone } = e.detail; // or other fields you added to the form console.log("Lead captured:", name, email, phone); }); ``` **Important Note on URL Parameters** When using the CTA redirect feature, Calcumate appends calculation data (e.g., `cm-qty`, `cm-volume`, `cm-location`) to the URL. However, for privacy and security, Lead/Contact details are not included in URL parameters. Use the `userDetails` event above to handle contact information. # Method 1: URL GET Parameters This method will append parameters to the URL of your Call To Action URL. That is, when the user clicks the CTA button (which might say something like "Get Quote" or "Book Now" depending on how you have set it up), the user will be redirected to the CTA URL that you set, with the GET parameters appended. To set this up: 1. [Login](https://help.calcumate.co/calculator-data-extraction/www.calcumate.co/login), open your desired calculator, and click "SHOW ADVANCED SETTING":

2. Within the Advanced Settings screen, select the CRA URL Params that you want to be appended, and set your CTA Link. This is what the screen looks like:

3. If your CTA URL has all the parameters appended, it will use this syntax:\ \ [www.abc.com/book-now?cm-qty={qty}\\\&cm-id={id}\\\&cm-volume={totalVolume}\\\&cm-used-volume={usedVolume}](http://www.abc.com/book-now?cm-qty={qty}\\\&cm-id={id}\\\&cm-volume={totalVolume}\\\&cm-used-volume={usedVolume}) # Method 2: Subscribe to the Calculator event The calculator also fires an event that advanced customers can use to gain better control, access the data from the calculator, and tell tell the website what to do next. To use this method: 1. [Login](https://help.calcumate.co/calculator-data-extraction/www.calcumate.co/login), open your desired calculator, and click "SHOW ADVANCED SETTING":

2. With the Advanced Settings, turn on "Disable CTA Redirection". This will prevent Calcumate from auto-redirecting to any CTA URLs, and instead hand control to your website after the Calcumate 'Booking' Javascript event fires.
3. Listen to the following event: ```javascript window.addEventListener('Booking', (event) => { console.log(event); }); ``` 4. The event object contains all the detail of the calculation. Example:

5. You can write code to tell your website what to do next. For example, you can use the data from the Booking event to determine where to send the user to next (and potentially pre-fill certain details such as the unit type the user requires). # Filtering To Available Units This guide provides instructions on how to filter out unavailable units from being displayed in the list of suggested units. ### Overview Calcumate allows you to filter out specific units so that they do not appear in the results. This can be useful for managing inventory and ensuring only available units are displayed to users. ### Instructions #### Disabling Units To disable specific units, use the following JavaScript code: ```javascript window.dispatchEvent(new CustomEvent("calcumateLoad", { detail: [, ], })); ``` * Replace `` with the actual IDs of the units you want to disable. * You can list multiple unit IDs separated by commas within the square brackets. #### Enabling All Units To enable all units again, pass an empty array in the `detail`: ```javascript window.dispatchEvent(new CustomEvent("calcumateLoad", { detail: [], })); ``` #### Listing Available Units To see a list of all available units, use the following command: ```javascript window.listUnits ```

#### Listing Disabled Units To see a list of all currently disabled units, use the following command: ```javascript window.disableUnits ``` #### Example 1. Here is an example of how to disable two units with IDs `123` and `456`: ```javascript window.dispatchEvent(new CustomEvent("calcumateLoad", { detail: [123, 456], })); ``` To enable all units again: ```javascript window.dispatchEvent(new CustomEvent("calcumateLoad", { detail: [], })); ``` # Getting support Can't find the answer you need in this support site? Please contact us [here](https://calcumate.co/contact-us) and we'll do our best to get back to you within one business day. # Security and privacy Please see [here](https://calcumate.co/privacy-policy) a copy of our privacy policy. # Terms and conditions of service Please see [here](https://calcumate.co/terms-of-service) a copy of our terms of service.