> 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="https://2142607565-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTTkW3ulcBeT90bhskPiJ%2Fuploads%2FYDx0B3jHrATKWoIZ9PIU%2Fimage.png?alt=media&amp;token=d12078c5-659d-4d15-acec-3dba2bbb2301" alt=""><figcaption></figcaption></figure>

**Step 2: Publish the Calculator**

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

<figure><img src="https://2142607565-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTTkW3ulcBeT90bhskPiJ%2Fuploads%2FpbxTGPKsACeNUrSEvxIC%2Fimage.png?alt=media&amp;token=9a0fa3d8-f286-4c31-aa1e-f258cd8398cf" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2142607565-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTTkW3ulcBeT90bhskPiJ%2Fuploads%2FGyzMVLUwzeKQ1G2vIJBJ%2FCaptura%20de%20pantalla%202026-02-19%20143323.png?alt=media&amp;token=ca3b7c6c-00a4-4b6a-b02a-c8a9efe17c15" 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="https://2142607565-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTTkW3ulcBeT90bhskPiJ%2Fuploads%2FIPccKVluTtRJvGr0Ko1E%2Fimage.png?alt=media&amp;token=481251ec-646c-467a-b419-2e411438f4a7" 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="https://2142607565-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTTkW3ulcBeT90bhskPiJ%2Fuploads%2FaT0dppeXBmG7De1k8xwn%2Fimage.png?alt=media&amp;token=9060eda2-23c6-4829-85de-7a09f5ccd772" 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="https://2142607565-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTTkW3ulcBeT90bhskPiJ%2Fuploads%2FLIQLwnExCzOrLDtm96lM%2Fimage.png?alt=media&amp;token=08fa9873-ba1c-4a97-b1bc-a84e7ff48280" alt=""><figcaption></figcaption></figure>
