# Actions

> Every action a rule can take: popups, banners and bars, in-page text, image and form changes, redirects and custom code.

The action is what a rule does for the visitors it matches. Each rule has one, chosen under **Then perform this action**, with a live preview beside its settings.

## Show something

These add a GeoEngage element on top of your page. Each has its own settings, drawn from the same set: content (title, text, image, button), appearance (position, size, animation, colors) and the timing options (see [Timing and frequency](https://geoengage.app/docs/rules/timing)).

| Action | What visitors see |
| --- | --- |
| **Show Popup** | A modal window over the page. |
| **Show Banner** | A banner fixed to the top or bottom of the window. |
| **Sticky Bar** | A thin announcement bar that stays in view. |
| **Show Notification** | A small toast in a corner. |
| **Slide-in Panel** | A panel that slides in from the side, for longer content or a survey. |
| **Fullscreen Overlay** | A full-page interstitial. |
| **Floating CTA Button** | A button that stays in a corner of the window. |
| **Countdown Timer** | A countdown to a date and time you set, with a message for when it runs out. |
| **Social Proof Toast** | Short messages that rotate, one after another, such as recent activity. Empty lines are skipped. |
| **Show Rating** | A rating question — stars, smileys, thumbs or a 1–10 scale — with optional written feedback. A visitor who has answered is not asked again. Answers appear in **Ratings Intelligence**. |
| **Compliance Banner** | A consent banner, worded for GDPR, CCPA, LGPD or a generic notice, or picked by the visitor's country. It can be a bar at the bottom or top or a box in a corner, link to your privacy policy, and leave out a consent category you don't use. See [Consent mode](https://geoengage.app/docs/widget/consent). |

A button can link to a page, in the same tab or a new one. With no URL it closes the action instead. Clicks on it are counted in rule reports and fire the [`cta-click` event](https://geoengage.app/docs/widget/events#event-types).

A **Floating CTA Button** follows web and page links, and `tel:`, `mailto:`, `sms:` and `whatsapp:` links that open the visitor's phone, mail or chat app.

### Countdown end

A **Countdown Timer** counts down to one of two things:

- **A date and time**. It starts on **Visitor's local time**: the countdown ends at that time on each visitor's own clock. Choose a timezone to end it at the same moment for every visitor instead.
- **A time of each visitor's own**: a number of minutes from the visitor's first view. The time keeps running if they reload or come back.

### Slide-in panel shape

A **Slide-in Panel** comes in from the right or the left, as wide as you set. Two more settings decide its shape:

- **Space from screen edge** keeps it that many pixels away from the top, the bottom and its side of the window, so it floats over the page. At 0 it is full height, flush against the edge.
- **Corner radius** rounds its corners. A floating panel has all four rounded; a flush one only the two facing the page.

A panel you add starts floating, 16 pixels from the edge with 16-pixel corners. On a phone it is never wider than the screen less that space.

### Wording

Some actions print words of their own, such as *Submit* on a rating, *Days* on a countdown or *Save Preferences* on the consent banner. Each has a box in the action's settings, so a rule for visitors in another language can show them in that language. An empty box keeps the English.

## Change the page

These change elements that are already on your page, picked by CSS selector. Use **Pick an element on your site** next to the selector field to click the element instead of writing a selector.

| Action | What it does |
| --- | --- |
| **Replace Text** | Replaces an element's text. |
| **Swap Image** | Changes an image's source, with optional alt text. |
| **Insert HTML** | Adds HTML before the element, after it, or inside it at the start or end. |
| **Set Style** | Applies CSS properties to the element. |
| **Set Class** | Adds or removes CSS classes, so your own stylesheet does the styling. |
| **Prefill Form** | Fills form fields, matched by their `name` or `id`, with values you set or [variables](https://geoengage.app/docs/rules/dynamic-text) such as `{{country}}`. It fills text boxes and dropdowns; a dropdown by an option's value or the words it shows. A field the visitor has already filled is left alone. |
| **Hide Element** | Hides the element. |
| **Show Content** | Replaces the element's content with your own. |
| **Show Special Offer** | Replaces the element's content with a promotional block: a title, text, a badge, a coupon code and a button. |

### Which page, and how many elements

Under the selector there are two settings that decide what it does on your live site.

**Only on page** is the page the selector is for, such as `/pricing`. When you pick an element, this is filled in with the page you picked it on if the selector describes where the element sits (`main > section:nth-of-type(3) > div > h2`), because the same spot on another page is a different element. A selector that names the element itself, like `#buy` or `a[href="/pricing"]`, is left to work on every page. You can change it either way:

- `/pricing` is that one page. The query string and a trailing slash are ignored.
- `/products/*` is every page under `/products/`, for a template you picked once.
- Empty is the whole site.

**Change every matching element** applies the action to everything the selector matches. Left off, only the first match is changed, which is what you want for a picked element. Turn it on for a selector you wrote to match several, such as `.promo-tile`. **Show Content** always fills one element.

From a visitor's second page view on, elements that **Replace Text**, **Swap Image**, **Set Style**, **Set Class**, **Hide Element** and **Show Content** will change stay hidden until the change is applied, so visitors don't see the original first. See [Content flickers](https://geoengage.app/docs/troubleshooting#content-flickers-before-a-rule-changes-it).

## Other actions

| Action | What it does |
| --- | --- |
| **Redirect to URL** | Sends the visitor to another page. A visitor already on that page is left there. Switch **Keep the query string** on to carry the page's query string, such as campaign tags, to the new page. The [`redirect` event](https://geoengage.app/docs/widget/events#event-types) fires first, so your own tracking can run. |
| **Custom JavaScript** | Runs code you write, on the visitor's page. |
| **Start Recording** | Records the visitor's session for [session replay](https://geoengage.app/docs/analytics/sessions). Only offered on plans with session replay. |

> [!CAUTION]
> Custom JavaScript runs on your live site with the page's full access. Test it in **Test Sandbox** first, and keep it short: an error in it can break the page it runs on.

### What Custom JavaScript is given

Inside the code, `GeoEngage` is the widget's public object, so `GeoEngage.trackEvent()`, `GeoEngage.trackConversion()` and the other [methods](https://geoengage.app/docs/widget/methods) work as they do in your own scripts. It also carries this rule's own:

| Name | What it is |
| --- | --- |
| `GeoEngage.location` | The visitor's location: `country`, `country_code`, `region_name`, `city` and `timezone`. |
| `GeoEngage.rule` | The rule that ran: its `id` and `name`. |
| `GeoEngage.variant` | The A/B variant the visitor is in, or `null`. |
| `GeoEngage.visitor` | The visitor's `id` and `sessionId`. |
| `GeoEngage.showPopup(options)` | Shows a popup. |
| `GeoEngage.showNotification(options)` | Shows a notification. |

## Choosing between similar actions

- **Popup or Slide-in Panel?** A popup stops the visitor until they close it; a panel doesn't. Use a popup only for something worth interrupting for.
- **Banner, Sticky Bar or Special Offer?** A sticky bar is the lightest, and a banner has room for more. A special offer is not a bar: it fills an element on your page, and adds a badge and a coupon code.
- **Replace Text or Show Content?** Replace Text changes the words and keeps the element and its styling. Show Content replaces everything inside it.
- **Hide Element or Set Class?** Hide Element when something simply shouldn't show; Set Class when your stylesheet should decide how it changes.

---

Source: https://geoengage.app/docs/rules/actions