> For the complete documentation index, see [llms.txt](https://help.twinr.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.twinr.dev/navigation-bar-buttons/custom-button.md).

# Custom

Runs your script, or taps something on your page for you.

A Custom Button does something rather than going somewhere. Use it when none of the other types fit — to run a piece of JavaScript, or to put a native button in the bar that triggers a control already on your web page.

## Add one

On the screen's **Navigation bar** tab, click **+ Add**, then choose **Custom Button**.

<figure><img src="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2Fgit-blob-682817f5bae75921ac356372a390be3c6bc9186f%2Fnav-bar-custom-dialog.png?alt=media" alt="The Add Custom Button dialog showing Button Actions set to Execute Script, with Button Icon and Script fields"><figcaption></figcaption></figure>

**Button Actions** comes first, because it changes the rest of the form.

## Execute Script

Runs JavaScript on the current page each time the button is tapped.

| Field             | What to enter                              |
| ----------------- | ------------------------------------------ |
| **Button Icon**\* | Choose a supplied icon or upload an image. |
| **Script**\*      | The JavaScript to run.                     |

The script runs against the page the customer is looking at, exactly as if you had typed it into a browser console on that page. It can read the page, change it, or call a function your site already defines.

{% hint style="warning" %}
Your script runs on whichever page the customer happens to be on. Have it check that what it needs is actually there before acting, or it will throw errors on pages you were not thinking about when you wrote it.
{% endhint %}

## Web Page Element Click

Taps an element on your page for you.

| Field                      | What to enter                              |
| -------------------------- | ------------------------------------------ |
| **Button Icon**\*          | Choose a supplied icon or upload an image. |
| **Element's identifier**\* | The class or id of the element to click.   |

This is the simpler and more reliable of the two, and it covers the common case: you already have a working search button, filter or menu toggle on your site, and you want a native button in the bar that triggers it.

Find the identifier the same way as the cart counter — right-click the control on your site, choose **Inspect**, and read its `class` or `id`.

{% hint style="info" %}
Prefer this over a script when you can. Clicking your own button means your site's existing code runs, so whatever that control already does — opening a drawer, tracking an event, validating a form — keeps working.
{% endhint %}

## Visibility and analytics

Both actions also offer:

* **Visibility → User** — **All**, logged-in only, or logged-out only.
* **Analytics → Enable Firebase Analytics** (Premium) — records an event on each tap.

Click **Add**, then **Save as draft**.

{% hint style="warning" %}
A Custom Button depends on your website's markup. Both the script and the element identifier break silently when your site changes — the button stays in the bar and simply stops doing anything. Test these after any theme update.
{% endhint %}