Thank you for your interest in the Pro Web Widget. This article will provide step-by-step instructions for installing the Pro Web Widget on a squarespace.com website. If you have already applied for, and subscribed to, the Pro Web Widget, please jump ahead to Step 3.
1. Subscribe to monthly or yearly plan
Visit the Widgets page of your Account area and subscribe to the monthly or yearly plan.
2. Pro Web Widget Settings
Click on Tools, then select Pro Web Widget to view your Settings. Here you will find:
Public Key: This is your form of authentication, also sometimes called an API key. Your public key does not change. You will need this key to complete the installation.
Language: This selection determines the primary language of your chart calculator widget. Note that visitors to your site will see a globe icon which allows them to change the language.
URL: This is the URL of the website you are installing your widget on. Please do not include specific pages, simply paste the base domain. For example: this is correct: "www.maiamechanics.com" — this is not correct: "www.maiamechanics.com/free_chart"
Use Classic BodyGraph: Turn this setting on to display the classic BodyGraph (sharp corners and circuits)
Now that you understand your settings, move on to step 4 to begin installing the widget on your Wix site.
3. Add "Code" to your Squarespace site
In your website builder, add a Code element:
4. Code Settings
In the Code/Content popup that appears, choose Mode: HTML, and leave the Display Source Code turned off.
In the area that allows you to enter code, paste the following code:
<mmi-widget apikey="YOUR_API_KEY"></mmi-widget>
<script src='https://widget.maiamechanics.com/v2/js/app.js'></script>
<script defer>
function loadCssStylesIfNotExist(){const e=document.styleSheets;for(let t=0,s=e.length;t<s;t++)if("https://widget.maiamechanics.com/v2/css/app.css"===e[t].href)return;const t=document.createElement("link");t.rel="stylesheet",t.href="https://widget.maiamechanics.com/v2/css/app.css",document.getElementsByTagName("head")[0].appendChild(t)}loadCssStylesIfNotExist();
</script>
Finally, notice YOUR_API_KEY in the code above. Replace YOUR_API_KEY with your public key—refer to step 3 for instructions where to find this.
5. Load your Squarespace site to test the Pro Web Widget
The Pro Web Widget will not work in the preview because the URL does not match your settings. To test the widget, please load the live site once you have updated your page.