How to Set Up a Trigger

Explaining what triggers are, the different trigger types upflowy offers and how to find a CSS Selector.

What is a trigger?

A trigger is an event on your webpage that causes the flow to be launched once. This could be something like a button being clicked.

upflowy is working on rolling out more triggers, such as the amount of time spent on a page or when a user moves to exit the page - if you are after a specific trigger, let us know in the feedback.

How can I set up a trigger?

Setting up a trigger is a two-step process! The first is ensuring that you have Upflowy's code snippet injected into your website's header. This will allow Upflowy's flows to integrate and run on your page.

To find the code snippet, click on the "Integrate" Tab on the left-hand toolbox when you are building your flow:

Simply copy this code to your clipboard and paste it into the <head> tag of your website's HTML code.

Now, let's move on to setting up the trigger correctly.

In the flow plan, you can click on "Add event-based triggers" in the left-hand toolbox in the Integrate tab, or you can click on "Add new trigger" in the top bar:

This should open the below modal:

You will be prompted to:

Name the trigger

This is so it's easier to see what your trigger does at a glance.

Add in a URL

This is what will tell upflowy to launch from a specific website. If this is left blank, the trigger will launch on any website on which the upflowy code has been injected.

Select a trigger type

Currently, we have two types of triggers:

A button is being clicked. Upon clicking the button, the form will launch. Here's an example from our website:

A form is submitted alongside a button being clicked. upflowy can store the data in the form, so it doesn't need to be answered through the flow! Here's an example from our website:

Define the CSS Trigger

When a trigger type is selected, you will see that a CSS Selector is required:

What's a CSS Selector?

A CSS Selector is a software development term used to assign values to some HTML code, but we won't go into that here!

More importantly - it's how the upflowy app knows to launch from the right button on your website. It's a unique identifier of the button. If we didn't define a CSS Selector, the flow would just launch when a user clicks any button on your website!

How do I find it?

Your developer should be able to assign a CSS Selector to a specific button and send this to you quite quickly, but if you don't have a developer available, here's how you can find it yourself.

On your website, locate the button that you want to act as a trigger. Then right-click and select the "Inspect" element:

Once you click Inspect, the DevTools should appear. Click on the box in the upper left corner (with a mouse pointer in a square).

Once clicked, hovering over any element on the page should highlight it, and an information pop-up should appear:

The CSS selector will look similar to the text in blue (".elementor-button.elementor-size-sm"). This text refers to the class type of the element, which is how developers can target it.

However, now we need to make sure that this is a unique identifier and no other buttons on the page have the same class, or else the upflowy flow will be triggered from all of these buttons!

How do I find out if a CSS Selector is unique?

We'll be using our DevTools box again for this one.

In the Console in DevTools, we're going to use a specific command to see how many elements on the page have the ".elementor-button.elementor-size-sm" class.

We'll do this by typing in:

document.querySelectorAll("[The CSS Selector Name]")

In our case, it'll be:

document.querySelectorAll(".elementor-button.elementor-size-sm")

You'll see on the following line, that a NodeList appears with a number next to it:

That means there are six buttons on our page with the ".elementor-button.elementor-size-sm" class.

What we need to do now is narrow down the scope of the search so we can find the particular button we want! The way we'll do this is by using DevTools to look at the CSS Selector of the entire form (and not just the button):

We'll call this the parent of the button, as the button we're looking for exists within this larger container.

We'll now specify to look for instances of our CSS Selector within a parent element, and we'll keep going until it's specific enough for our NodeList to turn up with one result. We can check this with the following code: the CSS Selector of the parent element, followed by the child element with a space in between:

document.querySelectorAll("[.parentName] [.childName]")

Eventually, the querySelector will only show one result - and that is your CSS trigger!