Add calculator widgets to your Webflow website using the Embed element. This guide walks you through adding custom HTML to your Webflow 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 Webflow Site
-
Open the Designer
Open your project in Webflow Designer.
-
Add an Embed element
In the left panel, click "+" then find "Embed" under Components, or press "A" and search for "HTML Embed".
-
Paste your embed code
Double-click the Embed element to open the code editor. Paste your embed code and click "Save & Close".
-
Style and publish
Adjust the width and margins using Webflow's styling tools. Publish your site to see the widget live.
Tips
- Set a fixed width on the Embed element container for best results
- Embeds don't render in the Designer - use Preview mode to see the widget
- The widget automatically adjusts its height based on content, so you don't need to worry about scroll bars
Troubleshooting
This is normal behavior. Webflow doesn't render embeds in the Designer for security. Click Preview or publish your site to see the widget.
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.