# Adding a simple math calculator

**URL:** <https://forum.wixstudio.com/t/adding-a-simple-math-calculator/69856>\
**Category:** Ask the community\
**Tags:** wix, question, code\
**Created:** [March 25, 2025, 2:23am UTC](https://forum.wixstudio.com/t/adding-a-simple-math-calculator/69856 "2025-03-25T02:23:58Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![user5419](https://avatars.discourse-cdn.com/v4/letter/u/c0e974/32.png) [@user5419](https://forum.wixstudio.com/u/user5419)\
**Post date:** [March 25, 2025, 2:23am UTC](https://forum.wixstudio.com/t/adding-a-simple-math-calculator/69856/1 "2025-03-25T02:23:58Z")

</div>

I need to add an on image click - popup simple math calculator

In Wix editor

**What are you trying to achieve:**  
Adding a simple math calculator

**What have you already tried:**  
Searched all day on the web, only able to find ROI, loan etc, calculators

**Additional information:**  
I’m very new to Wix and html, so I’ll need simple instructions

---

<div class="post-metadata">

**Author:** ![onemoretime](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/onemoretime/32/104023_2.png) [@onemoretime](https://forum.wixstudio.com/u/onemoretime)\
**Post date:** [March 25, 2025, 2:31am UTC](https://forum.wixstudio.com/t/adding-a-simple-math-calculator/69856/2 "2025-03-25T02:31:52Z")

</div>

Is this the kind of calculator you’re referring to? 🤔

[https://codepen.io/dino-didief/pen/xbKQpxp](https://codepen.io/dino-didief/pen/xbKQpxp)

---

<div class="post-metadata">

**Author:** ![user5419](https://avatars.discourse-cdn.com/v4/letter/u/c0e974/32.png) [@user5419](https://forum.wixstudio.com/u/user5419)\
**Post date:** [March 25, 2025, 3:14pm UTC](https://forum.wixstudio.com/t/adding-a-simple-math-calculator/69856/3 "2025-03-25T15:14:33Z")

</div>

Yes, like that but just in a popup box. Pops up when a calculator image is clicked on.

---

<div class="post-metadata">

**Author:** ![onemoretime](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/onemoretime/32/104023_2.png) [@onemoretime](https://forum.wixstudio.com/u/onemoretime)\
**Post date:** [March 25, 2025, 4:16pm UTC](https://forum.wixstudio.com/t/adding-a-simple-math-calculator/69856/4 "2025-03-25T16:16:36Z")

</div>

If you find a safe MIT-licensed code, such as the calculator code mentioned earlier, and it’s already a complete HTML file, you can simply embed it into your Wix site using an iframe element.

To set it up, add a Lightbox to your site and place an iframe inside it to embed the calculator’s HTML code. Then, simply create a trigger to open the Lightbox. You can add a button (or even an image) to your page and assign an onClick event to it.

Finally, add the `openLightbox()` function inside the event handler, and you’re all set! 😇

> **[Open Lightbox | Velo](https://dev.wix.com/docs/velo/apis/wix-window-frontend/open-lightbox)**
>
> Opens a lightbox and optionally passes it the given data. The openLightbox() method opens a lightbox and allows you to pass data to it.

---

<div class="post-metadata">

**Author:** ![user5419](https://avatars.discourse-cdn.com/v4/letter/u/c0e974/32.png) [@user5419](https://forum.wixstudio.com/u/user5419)\
**Post date:** [March 25, 2025, 8:05pm UTC](https://forum.wixstudio.com/t/adding-a-simple-math-calculator/69856/5 "2025-03-25T20:05:35Z")

</div>

Thank you. It seems the light box with backgound covers the whole page. I just want a small popup with students able to see the original problem with the calculator on top

---

<div class="post-metadata">

**Author:** ![onemoretime](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/onemoretime/32/104023_2.png) [@onemoretime](https://forum.wixstudio.com/u/onemoretime)\
**Post date:** [March 26, 2025, 2:46am UTC](https://forum.wixstudio.com/t/adding-a-simple-math-calculator/69856/6 "2025-03-26T02:46:56Z")

</div>

I see. How about placing a container element (with an iframe inside) in the bottom right corner of the screen and pinning it there? By pinning it, the calculator’s iframe will always stay in the bottom right corner, no matter how far you scroll. 😇
