Skip to main content
Click and Hover Trigger

Triggering on element click and hover

Esther Vermeil avatar
Written by Esther Vermeil
Updated over 3 years ago

The hover and click triggers allow you to show a campaign when a site user hovers over (using a mouse) or clicks on a single element. Both triggers use a similar setup which is explained below.

These triggers are great for showing campaigns upon an interaction (or to preempt an interaction). With these triggers you can:

  • Show an upsell or cross sell message when someone adds an item to basket,

  • Surface a price guarantee message when someone highlights a product name,

  • Display information about shipping if a user hovers over a delivery message.

On Click

To set this up, first you'll need to get the selector of the item you want to trigger upon click. The selector is the CSS identifier that you can specify to tell the campaign when to appear. You don't need to know how to code to obtain this and you can do it from your web browser:

Find the element you want your campaign to trigger on - for the example here, we've used an Add to Cart button. Right click it and hit Inspect. You'll then be presented with the dev tools panel that looks like the below:

From here you'll need to find the parent element (you can do this by seeing if there are any expanded arrows above the element you Inspected, you may already have the parent element). Once done, right click on this in the dev tools panel, scroll to Copy and Copy Selector.

Once done, paste this selector into the On Click trigger field.

It's important to note that the Click trigger does not stop other site pages from loading. If the clicked element takes a user to another page, this campaign will not be shown as the user will have navigated elsewhere.

On Hover

The setup for this campaign is exactly the same. One point to note is that, as hover relies on a cursor, this trigger is only useful for desktop devices.

Did this answer your question?