How to integrate Calcumate to Wix

Step 1: Create a Calculator

• Start by creating a new calculator from your Calcumate dashboard (login here 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

<style>
	#calcumate-root {
		width: 100% !important;
		height: 1500px;
		overflow: none;
	}
	@media (min-width: 1024px) {
		#calcumate-root {
			height: auto !important;
			min-height: 700px;
		}
	}
</style>

This will help to set the dimensions of the calculator on desktop and mobile view. The code should now look as this:

<style>
  #calcumate-root {
    width: 100% !important;
    height: 1250px;
    overflow: none;
  }
  @media (min-width: 1024px) {
    #calcumate-root {
      height: auto !important;
      min-height: 700px;
    }
  }
</style> 
<div
  id="calcumate-root"
  data-integration="www.wixtest.com"
  data-integration-2=""
  data-ref="<your-data-ref>"
  data-int="<your-data-int>"
></div>
<script defer src="https://production.calcumate.co/static/js/main.js"></script>

Step 7: Publish/Update your website

• On the top-right corner click on the publish button and select your configuration