# Buttons to open web page in html widget

**URL:** <https://talk.atomisystems.com/t/buttons-to-open-web-page-in-html-widget/9580>\
**Category:** Support Questions\
**Created:** [July 23, 2025, 1:12am UTC](https://talk.atomisystems.com/t/buttons-to-open-web-page-in-html-widget/9580 "2025-07-23T01:12:08Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sai\_Theagarajah](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/sai_theagarajah/32/6140_2.png) [@Sai\_Theagarajah](https://talk.atomisystems.com/u/Sai_Theagarajah)\
**Post date:** [July 23, 2025, 1:12am UTC](https://talk.atomisystems.com/t/buttons-to-open-web-page-in-html-widget/9580/1 "2025-07-23T01:12:08Z")

</div>

I want to create 2 buttons and when I click on the first button I want to load a html page inside the html widget area and then when I click on the second button then I want to load another page inside the same html widget. I guess using a class this is possible. How can I do this?

---

<div class="post-metadata">

**Author:** ![PhuongThuy\_Le](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/phuongthuy_le/32/6090_2.png) [@PhuongThuy\_Le](https://talk.atomisystems.com/u/PhuongThuy_Le)\
**Post date:** [July 23, 2025, 4:16am UTC](https://talk.atomisystems.com/t/buttons-to-open-web-page-in-html-widget/9580/2 "2025-07-23T04:16:28Z")

</div>

Hi,

You can try the following suggestion to achieve your wish:

1. Add two **HTML Widget** to the Canvas.

- Make sure they have the same width/height and cover each other.
- In the **Propeties** pane \> **General** tab \> **General** section \> **Display** \> **Off**.

1. Add events-actions to these 2 button. For example, using Show/Hide Element action.

- **Button 1** : Click the **Event Handlers** button \> **On Click** event \> **Add Action** button \> add the following actions:

 ![image](https://talk.atomisystems.com/uploads/default/original/2X/f/f7fe5cd6338dc1c9f42037902537c2c5af61fbbc.png)

- **Button 2** : Click the **Event Handlers** button \> **On Click** event \> **Add Action** button \> add the following actions:

 ![image](https://talk.atomisystems.com/uploads/default/original/2X/1/1521516f4972f0b1304b50b32d44debe52a0e7c4.png)

BR,

---

<div class="post-metadata">

**Author:** ![Sai\_Theagarajah](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/sai_theagarajah/32/6140_2.png) [@Sai\_Theagarajah](https://talk.atomisystems.com/u/Sai_Theagarajah)\
**Post date:** [July 23, 2025, 3:33pm UTC](https://talk.atomisystems.com/t/buttons-to-open-web-page-in-html-widget/9580/3 "2025-07-23T15:33:02Z")

</div>

Thank you!, I have tried this method before but what I am looking for is only using one html widget. I think this is posible with some JS and target the html widget. Please let me know how I can do this. Thanks!

---

<div class="post-metadata">

**Author:** ![PhuongThuy\_Le](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/phuongthuy_le/32/6090_2.png) [@PhuongThuy\_Le](https://talk.atomisystems.com/u/PhuongThuy_Le)\
**Post date:** [July 25, 2025, 2:21am UTC](https://talk.atomisystems.com/t/buttons-to-open-web-page-in-html-widget/9580/4 "2025-07-25T02:21:18Z")

</div>

Hi,

If you want to use one HTML widget, you can try using the following script:  
**doc.getElement(‘html widget name’).setUrl(‘page url’);**

Hope that it helps.

BR,