# Overlay windows & pass through clicks

With a transparent window, it's possible to create an "overlay" for external application window.\
\
Your app window can also become "invisible" to clicks meaning the clicks will pass through to the underlying content beneath.\
\
This is useful for creating floating utility apps, extending the functionality of external applications or creating deep integrations with external applications.

***

### How To:

{% hint style="info" %}
View this example in the editor:\
\
<https://bubble.io/page?id=deskifier-plugin-test&tab=Design&name=overlay-example&type=page>
{% endhint %}

In this example, we're building an overlay window that attaches to the currently focused window, and has draggable floating panels.

<figure><img src="/files/Qgv6I8A7UscxOsjMytTg" alt=""><figcaption></figcaption></figure>

You may be confused at what you're looking at - so let's dive into what this actually is.\
\
This is a **web page with a transparent background**. The web page is fitting it's size to fit that of the focused window. \
\
Here's a look at what it looks like inside the Bubble editor.

<figure><img src="/files/5CiQ24a6RIjdC82LS7Ks" alt=""><figcaption></figcaption></figure>

To accomplish this, we need two things\
\
1\. Control over our browser window with the [Windows Element](/deskifier/deskifier-bubble.io-docs/windows-element.md)\
2\. Information about the external applications running with the [Applications Element](/deskifier/deskifier-bubble.io-docs/applications-element.md)

***

#### Step 1.

We need to create our Window with the correct settings.\
\
\- Set **Titlebar Style** to **None**\
This makes our new window frameless, and removes the window controls.\
\
\- Set **Transparent Background** to **yes**\
This makes our application background transparent - *Note: be sure to set your page to transparent in the Bubble editor as well.*\
\
\- Set **Always On Top** to **yes**\
This makes our window stay above others, even when it's not focused.\
\
\- Set **Has Window Shadow** to **no**\
Removes the subtle window shadow.\
\
\- Set **Ignore Mouse Events** to **yes**\
Makes the application not respond to mouse clicks.\
\
\- Set **Forward Mouse Events** to **yes**\
Makes clicks "pass through" the application to whatever is beneath.\
\
\- Set **Is Visible On All Workspaces** to **yes**\
Only needed on macOS. This makes your application visible if the user switches workspaces (ex. If the user goes full screen)

<figure><img src="/files/WzUvWjmFoqLQtLUaEmg9" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/lGPKLktpEvpjhwmaJtvm" alt=""><figcaption></figcaption></figure>

***

#### Step 2.

Next we need to specify which application to "track" with the [Start Window Overlay](/deskifier/deskifier-bubble.io-docs/applications-element/actions.md#start-window-overlay) action. If no application is specified, it defaults to always tracking the [Active Application](/deskifier/deskifier-bubble.io-docs/applications-element/states.md#active-application) , meaning the overlay will follow which ever application is currently being focused.\ <br>

<figure><img src="/files/zcmxxWCSRsep7rTDkGXc" alt=""><figcaption></figcaption></figure>

***

#### Step 3.

Next we'll add some simple UI to test with.

<figure><img src="/files/Sy8RVGCeED6o1q6vvSS3" alt=""><figcaption></figcaption></figure>

Now we should see our new UI floating over external windows.

<figure><img src="/files/KApX0DJQ3ZYMrcirLgzW" alt=""><figcaption></figcaption></figure>

***

#### Step 4.

Now we'll work on making the UI clickable. Currently, our app is ignoring all clicks, and clicks will be passed to the underlying content.\
\
You could have a hotkey to make your elements triggered using the [Global Shortcuts Element](/deskifier/deskifier-bubble.io-docs/global-shortcuts-element.md), or in our case, we're going to **detect when our UI is hovered**.\
\
While clicks are ignored by our application, it still responds to a couple of useful event listeners. The "[mouseenter](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event)" event will fire when an element is hovered, and the "[mouseleave](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event)" will fire when the element is no longer hovered.\
\
For demonstration purposes, we'll use [this free plugin](https://bubble.io/plugin/hover-inout-events-+delays-1663293798425x635961135052095500) to apply these event listeners to one of our elements.\
\
Set the ID Attribute of the element, and add the hoverListener element to the page with the same element\_id as the property.

{% columns %}
{% column width="58.333333333333336%" %}

<figure><img src="/files/LI8JzV3ufAuD7oFg8PBt" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column width="41.666666666666664%" %}

<figure><img src="/files/w1Q1thj7gq3fEMuHgMPg" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

<br>

Then, set up the "on mouse over" and "on mouse out" events.<br>

<figure><img src="/files/PefKDMKgSn8vWZXP67SR" alt=""><figcaption></figcaption></figure>

When the element detects a hover event, we'll make our application start responding to clicks by updating the window properties.

<figure><img src="/files/wLIZ6RuVbutSNv4RH8bF" alt=""><figcaption></figcaption></figure>

And vice versa when the element is no longer hovered.

<figure><img src="/files/J8raLe2ddCrc96pfYRbI" alt=""><figcaption></figcaption></figure>

And now the final result:

<figure><img src="/files/8WbkyDeclJNQU5iEDbi5" alt=""><figcaption></figcaption></figure>

***

{% hint style="success" %}
Pro Tip:\
\
Use the [Draggable Elements](https://manual.bubble.io/core-resources/bubble-made-plugins/draggable-ui-elements) plugin by Bubble to make draggable groups.
{% endhint %}

{% hint style="success" %}
Pro Tip:\
\
macOS doesn't always accurately report the active window when the **focused application has multiple windows**. \
\
Use the [Refresh Application List](/deskifier/deskifier-bubble.io-docs/applications-element/actions.md#refresh-application-list) action, and filter by windows with the same processId as the active application to find other windows to attach to.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://deskifier.gitbook.io/deskifier/deskifier-bubble.io-docs/guides-and-examples/overlay-windows-and-pass-through-clicks.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.