Add calculator widgets to your Squarespace website using Code Blocks. This guide shows you how to embed our widgets in your pages.
Step 1: Get Your Embed Code
- Go to our Widget Generator
- Choose your calculator type, customize colors and styling to match your website
- Copy the generated embed code from the "HTML Embed" tab
Step 2: Add to Your Squarespace Site
-
Edit your page
Open the page where you want to add the calculator and click "Edit".
-
Add a Code Block
Click "+" to add a new block, then select "Code" from the menu (you may need to scroll down or search for it).
-
Paste your embed code
Paste the embed code into the Code Block. Make sure "Display Source" is unchecked.
-
Save and preview
Click outside the code block to close it, then save your page. Preview to test the calculator.
Tips
- Code Blocks are available on Business and Commerce plans. On lower plans, use the "Embed" block instead.
- If using an Embed block, paste only the iframe URL (not the full code) and set the width manually
- The widget automatically adjusts its height based on content, so you don't need to worry about scroll bars
Troubleshooting
Code Blocks require a Business or Commerce plan. Try using the Embed block instead, which is available on all plans.
Make sure the embed code was pasted correctly and includes both the iframe and the script tags. Check your browser's developer console for any error messages.