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.
Flow Phantom has three triggers:
- On page load (ol)
- Add to cart (atc)
- Post purchase (pp)
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.
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"
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.
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"
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.
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.
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.
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"
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.
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.
Last modified 4mo ago