# Triggers

Triggers are events that prompt an offer. These events help you place the offer along the buyers journey.

Each trigger has a required set of elements labeled with certain [custom attributes](https://university.webflow.com/lesson/custom-attributes), which are outlined below.

### Trigger types

Flow Phantom has three triggers:

* On page load (ol)
* Add to cart (atc)
* Post purchase (pp)

### On page load elements

These offers will display on page load, and then update every time the cart changes. On page load is great for creating “frequently bought together” offers.

#### Offer component

The outermost element of the offer that represents the “offer” element.

```markdown
# Attribute Logic
data-fp-[trigger type]="[label]"

# Example Attribute Value
data-fp-ol="frequently-bought-together"
```

### Add to cart elements

These offers display immediately after adding a product to the cart. Add to cart offers are based on what is being added to the cart and what is already in the cart. Additionally they need to be “opened” and “closed” programmatically by Flow Phantom.

#### Offer component

The outermost element of the offer that represents the “offer” element.

```markdown
# Attribute Logic
data-fp-[trigger type]="[label]"

# Example Attribute Value
data-fp-atc="popup"
```

#### Open

The element that when clicked will display the atc **offer component** on the page.

```markdown
# Attibute Value 
data-fp="open"
```

* This element opens the **component** via a [Webflow element trigger](https://university.webflow.com/lesson/triggers-and-animations), which must set the **component** to a display that is **NOT** none.

#### Close

The element that when clicked will close the atc **component** on the page.

```markdown
# Attibute Value 
data-fp="close"
```

* This element closes the **component** via a [Webflow element trigger](https://university.webflow.com/lesson/triggers-and-animations), which must set the **component** to a display none.

### Post purchase elements

These offers display immediately after the user clicks purchase. Post purchase offers are based on what is already in the cart. Additionally they need to be “opened” and “closed” programmatically by Flow Phantom.

#### Offer component

The outermost element of the offer that represents the “offer” element.

```markdown
# Attribute Logic
data-fp-[trigger type]="[label]"

# Example Attribute Value
data-fp-atc="frequently-bought-together"
```

#### Open

The element that when clicked will display the atc **component** on the page.

```markdown
# Attibute Value 
data-fp="open"
```

* This element opens the **component** via a [Webflow element trigger](https://university.webflow.com/lesson/triggers-and-animations), which must set the **component** to a display that is **NOT** none.

#### Close

The element that when clicked will close the atc **component** on the page.

```markdown
# Attibute Value 
data-fp="close"
```

* This will be used to decline the offer - once clicked the purchase will complete without adding the offer.


---

# 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://docs.flowphantom.com/advanced/triggers.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.