Embedding your calculator on a Framer website

Learn how to embed a calculator on your Framer website

Embedding your calculator using Framer’s Embed component

Get the code to embed in Framer

  1. Navigate to the ConvertCalculator app, and open your calculator
  2. Go to Share → Embed, and select “Framer” in the install instructions dropdown
  3. Click the code displayed in step 5 to copy it to your clipboard.

Displaying the calculator

  1. Open the page you want to embed your calculator on within your Framer website
  2. Click "Insert" in the toolbar on the top-left, and search for the "Embed" component. Place the Embed component on your canvas.
  3. 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
  4. Make sure the “Embed type” within the Framer Embed component in your properties panel is set to HTML
  5. Paste the copied code in the input field.

Embedding multiple calculator within the Framer canvas and from the CMS

The Framer Embed component is great at rendering our embed code, but can’t be connected to the CMS. Also, to embed the calculator, you have to paste in the complete HTML. With our custom Code Component built specifically for Framer, you can embed calculators by just pasting in your Calculator ID, and connect it to the Framer CMS to dynamically load Calculators on your pages.

We’ll use this method on our own website, click this link for an example: https://www.convertcalculator.com/use-cases/price-quote-calculator/

Get our Framer Code Component

  1. Copy the Code Component below
JS
import React, { useEffect } from "react"
import { addPropertyControls, ControlType } from "framer"

export default function CalcEmbed(props) {
    useEffect(() => {
        const script = document.createElement("script")
        script.src = "https://scripts.convertcalculator.com/embed.js"
        script.async = true

        document.body.appendChild(script)

        return () => {
            document.body.removeChild(script)
        }
    }, [])

    return (
        <div
            className="calculator"
            data-calc-id={props.calculatorId}
            data-type="framed"
        >
            <iframe
                className="calculator-frame"
                id={`calculator-frame-${props.calculatorId}`} // Dynamically set the ID based on the calculator ID
                sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox"
                title="Calculator Frame"
                style={{ border: "medium" }}
                width="100%"
                src={`https://www.convertcalculator.com/embed/${props.calculatorId}?framed=1`} // Note that the "?framed=1`" part needs to be in there, otherwise stuff breaks
            ></iframe>
        </div>
    )
}

// Add property controls for the input value
addPropertyControls(CalcEmbed, {
    calculatorId: {
        type: ControlType.String,
        title: "Calculator ID",
        defaultValue: "uKG3X56eoLw3oDjCP", // Set a default value if needed
    },
})
  1. Go to Framer, select “Assets” in the top of the left sidebar, and click on the “+” icon on the right of “Code components”. Select “New Code file” → “New component” to create a code component, and give your component a name, e.g. CalcEmbed.tsx. Note that the name doesn’t use spaces.
  2. Remove the boilerplate code from Framer, and paste in the code from our GitHub Gist. After that, save the code.

Displaying the calculator

  1. Drag your newly created Code Component on the canvas, and give it 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.
  2. Navigate to the ConvertCalculator app, and open your calculator. Then go to Share → Embed and copy your Calculator ID at the bottom of the page.
  3. Go back to Framer. Within the “CalcEmbed” section in the properties panel, you’ll see a prefilled Calculator ID. Replace that ID with the ID you just copied.

Connecting the CalcEmbed component to the CMS

Please reference Framer’s CMS resources to learn how to work with the CMS.

  1. Navigate to a CMS detail page within Framer.
  2. Open the CMS by clicking the “CMS” button in the toolbar. Then click “Edit fields”
  3. In the Fields editor, add a new Plain Text field, and give it a name.
  4. Go back to the Canvas, and follow steps 4-6 above.
  5. Click on the Calculator in the canvas, and next to “Calculator ID” in the CalcEmbed section in your properties panel, click the “+” icon → “set variable” and pick the field you just added for your Calculator ID in the CMS Fields editor.
  6. Now place any Calculator ID in your CMS input field.
  7. Go over steps 7-12 as many times you want to add multiple calculators within a single CMS page

Congratulations! You now have a working web calculator on your Framaer website.

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.

Framer template with our code components embedded

We built a Photohapher 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/

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).

Related articles

Learn more about framer in one of the following articles