Embedding your calculator using our plugin

We build a Framer plugin that makes embedding your calculator a breeze:

1. Navigate to the ConvertCalculator app, and open your calculator
2. Go to Share → Embed, and copy your Calculator ID
3. Open the plugin window within Framer and search for “Convert: Custom Calculators” or add the plugin to your website from the Framer Marketplace
4. Paste in the Calculator ID
5. Give the Embed component the desired width and height, so the embedded calculator will work according to your responsive design. We advise to place your calculator within a Stack, and give the Embed component a width of 1fr and height of fit

You can also log in using your ConvertCalculator account, to easily select calculators from your ConvertCalculator Workspace.

Note that embedded scripts don’t always update to the latest version while looking at your website in the canvas. Please open Preview mode to see and interact with your calculator.

Embedding (multiple) calculators from the Framer CMS

Our Framer plugin can be easily connected to the CMS, so you can load in calculators in blog posts and other dynamic page types. We use this method on our own website, click this link for an example and see the example calculators in the header: https://www.convertcalculator.com/use-cases/price-quote-calculator/.

1. Follow the steps above to get the embed plugin and add your first calculator to the Framer canvas. Be sure to add your calculator on the page of a CMS collection detail page
2. Navigate to a CMS detail page within Framer
3. Open the CMS by clicking the “CMS” button in the toolbar. Then click “Edit fields”
4. In the Fields editor, add a new Plain Text field, and name it something like “Calculator”
5. Click on the Calculator in the canvas. In your properties panel, you’ll see a section called “CalcEmbed” with a property “Calculator ID”. Click the “+” icon, select “set variable”, and pick the field you just added for your Calculator ID in the CMS Fields editor.
6. In the CMS, add a Calculator ID in the field you just mapped the Embed to. You can add any Calculator ID from your Workspace in here, load in multiple calculators on a single page, and extend your CMS collection with multiple pages with their own calculators

Want to learn out more about the Framer CMS? Please check out Framer’s CMS resources.

Framer template with our code components embedded

We built a photographer website template including price quoting examples. Want to check out how you can enhance your website with a price quote, or want to see an example of how we embedded Calculators in Framer? Remix the template for free: https://www.framer.com/marketplace/templates/capture/

Have full control over embedding

Do you need additional options to e.g. style the embedded calculator within Framer, and know your way around React and Code Components? Check out the embed code from our plugin on GitHub.

No luck?

Are you having trouble embedding a calculator on your website, or do you want to add a calculator as part of a blogpost like we do here on our blog? Don't hesitate to contact us by sending a chat message (via the bubble in the bottom right corner).