# How can I display popups on mobile devices?

Canonical URL: https://support.optimonk.com/en/articles/how-can-i-display-popups-on-mobile-devices

Every popup you build in OptiMonk is made for mobile from the start — the build produces a **separate desktop and mobile version** of the same popup, and you can edit either one. What decides whether it actually shows on a phone is the **trigger's device setting**.

All six triggers can run on mobile:

- **On exit-intent**
- **After a delay** (X seconds)
- **After scrolling** (X% of the page)
- **On click** (a specific element)
- **After inactivity** (X seconds without activity)
- **On a JavaScript event**

---

## Set a trigger to run on mobile

1. Open **Campaigns** in the left menu and click the campaign you want to edit.
2. Open the **Settings** tab. The first section is **When will the popup show up**.
3. Click an existing trigger's card to edit it, or click **Add trigger** and pick one from the list.
4. In the dialog, under **On devices**, switch **Mobile** on. Your popup shows on phones when Mobile is on — either on its own, or together with Desktop.
5. Click **Save** in the dialog, then **Save changes** at the bottom of the section.

*💡 Triggers are combined with OR — the campaign fires when any of them triggers. So one campaign can use exit intent on mobile and a delay on desktop at the same time.*

**On click** and **On a JavaScript event** work slightly differently: they have no single device switch, because each CSS selector row and each event name row carries **its own** Desktop / Mobile toggle. One selector can be mobile-only while the next is desktop-only.

You can also just ask for it in chat — for example *"show this on mobile too"* — and the settings panel updates as you talk.

---

## The mobile version of the popup

The build makes two documents for every campaign: a **desktop** and a **mobile** one. In the popup editor, the two monitor / phone icons at the top switch between them, and a size dropdown next to them lets you preview the current version at different screen sizes.

Because they are two documents, a change you make on one view is not automatically on the other. The editor handles that for you:

- After a text edit, it asks whether to apply the change to the other view too (**Yes** / **No**).
- If the two views differ, a badge in the toolbar says so, and clicking it jumps to the other view.
- If an edit could not be carried over, you get a warning rather than silence.
- When saving, you are warned if the change caused overflow on any preview size.

So the usual rhythm is: edit on desktop, say yes to the sync question, then switch to the mobile view and check it.

*💡 Popups in this app come in two formats: ****card**** (a centered popup over a dimmed background) and ****fullscreen****. Sidebars, nanobars and sticky bars are not available here.*

---

## The six triggers on mobile

### 1. On exit-intent

There is no cursor on a phone, so exit intent is read from the visitor's actions instead — switching tabs, scrolling quickly back to the top, or using the Back button. The details are in Exit-intent trigger on mobile devices.

**Important:** some mobile browsers do not support every one of those actions, and where a signal is missing that particular action does not fire the trigger.

### 2. On click

This one may need a little CSS and HTML knowledge, because you have to identify the clickable element in your site's source.

Use it to show the popup when a visitor taps a particular part of your page — a box, a link, a banner. At that point the popup behaves like a mini landing page. Enter any CSS selector: an element name, a class, an ID, or a combination:

- `a` — any link element
- `div.container > a` — any link that is a child of a DIV with the CSS class `container`
- `table > a.delete` — any link with the `delete` class that is a child of a table element
- `#container` — an element with the id `container`
- `#container > *` — any element that is a child of the element with the id `container`

A tap on a child element also triggers the campaign when the child sits inside a matching element.

**Note:** frequency caps do not apply to this trigger — a click always shows the campaign as long as the targeting rules match.

### 3. After scrolling

Shows the popup once the visitor has scrolled down at least X% of the page (1–100). This catches active visitors. On a blog, for example, you can sign up readers who scrolled at least 50% of the post — they are enjoying it, so there is a good chance they want to hear about the next one.

### 4. After inactivity

Shows the popup to visitors who have been inactive for at least X seconds — no taps, no scrolling. Set it between 1 and 60 seconds.

### 5. After a delay

Shows the popup to visitors who have been on the page for at least X seconds (0–60). The counter only starts once the page has fully loaded on the device. Set it to 0 and it becomes an entry popup, appearing the moment the visitor lands — the card then reads **Immediately**.

### 6. On a JavaScript event

Shows the popup after the visitor completes an action none of the other triggers cover. Enter the name of a DOM event you fire from your own code — for example `user_login` when a registered visitor signs in:

```
document.dispatchEvent(new Event('user_login', { bubbles: true }))
```