How to create a reusable calculator?

Community resources
1

I have written a mortgage calculator(kind of like this one) with vanilla HTML, CSS and JS which I want to turn into a reusable component on webflow. What’s the best way to do that?

I’m looking for the best way to take code that’s in a git repo and make it easy for any website editor to drag and drop it on any page.

  1. Should I host it myself and embed it with an iframe?
  2. Should I use devlink to export the webflow components to my repo, and use them to build the calculator? How do I upload my code make it reusable by website editors?
  3. Should I build an App?
  4. Should I not bother with the markup (because there’s 10000 char limit for HTML embeds) and write a JS script that injects the DOM elements in the page?
  5. Should I build a library?

Writing the code is the easy part, I’m looking for the best way to make it available in the web flow editor. Any advice is appreciated.

2

All of this depends on;

  • how your service is designed
  • what degree of customization & styling you want each integration to have
  • configuration options, calculations, workflow, logic, UX…
  • who you are trying to share it with ( your team? your clients? the world? )

Webflow’s strength is design, so for most integrations, designers want the ability to style it, customize it, add interactions… all in the designer. In the past that meant a library piece to paste in various templates as a quick starting point, and CDN-served JS libs that give the component.

Designer Apps give you more capabilities there, maybe spend some time with ones like the Hubspot form integration to see how others are doing these types of builds.

You’re using some unusual terminology, so I suspect you’re not actually familiar with Webflow? Dig into it to understand how designers use it. “Website editors”, in Webflow-speak, is a different thing unrelated to design. it’s a customer facing content-admin role, and the Editor wouldn’t play much of a role in a component like this, other than you’d need to make sure you don’t break it.

3

Thanks for replying @memetican. Here’s some extra information about my case.

I want 0 configuration, apart from where the calculator is located. The only thing editors/designers will need to decide is where on the page to locate it. The main user will be a marketing team member when they are setting up landing pages for ad campaigns for example.

Webflow’s strength is design, so for most integrations, designers want the ability to style it, customize it, add interactions… all in the designer.

I agree - this is one of the reasons we were drawn to Webflow, but for this specific use-case the feature is owned by our R&D team and we’re most comfortable coding it, instead of using a third-party tool like Hubspot. It makes our tech stack simpler and fits in better with our SDLC.