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, 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.

# 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.

# 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.

# Attibute Value 
data-fp="open"

• This element opens the component via a Webflow element trigger, 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.

# Attibute Value 
data-fp="close"

• This element closes the component via a Webflow element trigger, 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.

# 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.

# Attibute Value 
data-fp="open"

• This element opens the component via a Webflow element trigger, 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.

# Attibute Value 
data-fp="close"

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