> For the complete documentation index, see [llms.txt](https://help.calcumate.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.calcumate.co/calculator-setup-and-customization/how-to-integrate-calcumate-to-wix.md).

# 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.

<figure><img src="/files/LxTjlrwUZYikMLtPfdte" alt=""><figcaption></figcaption></figure>

**Step 2: Publish the Calculator**

* Go to the Confirm step.
* Click Publish to generate the code snippet.

<figure><img src="/files/WlytrluIkzTMWJmUqqQV" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/7aFIbW1idryStEghPNiM" alt=""><figcaption></figcaption></figure>

**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"

<figure><img src="/files/lCzwQJ6tR7tusbhxz5Pd" alt=""><figcaption></figcaption></figure>

**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"

<figure><img src="/files/7WIj6goip58m61B4NUdi" alt=""><figcaption></figcaption></figure>

**Step 6: Adjust the embed dimensions**

* At the top of the last-step code we need to paste this style tag

```html
<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

<figure><img src="/files/o9rYkCDpoKGVkubEp4h3" alt=""><figcaption></figcaption></figure>