Skip to main content

Getting started with Click Triggers

Turn any link, button, or image into a popup trigger.

Written by Cassandra Campbell

A Click Trigger is an awesome feature that allows your visitors to "trigger" a campaign form by clicking on an on-page element. You can make the trigger for your popup a link, a button, or even an image! Cool right? We thought so too.

Note that these "click triggered" popups will ignore display rules and behavior options. You are simply forcing a trigger of that popup through a click.

Setting up a Click Trigger

  1. Navigate to Forms and then click the button to create a new campaign.

  2. Under Form Type, select Click Trigger Popup.

  3. The Visibility tab will be unique for this campaign form type. Notice the Click Trigger Code to the right.

  4. Copy the embed code and paste it into your website's source (this may vary from platform to platform). By default, it creates a link, so feel free to edit the placeholder "Click Here" text.

    For example, pasting into an Embed Code element on Showit:

That's it! Make sure to publish the campaign form and your website changes.

Note that you can also tweak how triggers are displayed, too. More on that below!

Using the Click Trigger class

You can apply Click Triggers to other elements by adding the unique Click Trigger class. As long as the element is clickable, you're good to go! Here's how:

  1. Find your Click Trigger code in the campaign editor:

    <a data-sumome-listbuilder-id="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx">Click Here</a>

  2. Convert to the following format:

    "sumome-listbuilder-id-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"

    To do so, remove the <a> tags and the data- text, change = to a - , and finally wrap everything in quotes instead of just the identifier.

  3. Finally, add as a class to an existing element:

    <button class="sumome-listbuilder-id-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx">Click me!</button>

Link example

Used as a link on a page:

<a data-sumome-listbuilder-id="d9256b4b-d85e-45cf-960b-9493f0f8a9ff">I am a link. Click Me :)</a>

Button example

Applied to a button:

<button data-sumome-listbuilder-id="d9256b4b-d85e-45cf-960b-9493f0f8a9ff">Click Trigger Button</button>

H1 example

Used as an H1 tag:

<h1 data-sumome-listbuilder-id="d9256b4b-d85e-45cf-960b-9493f0f8a9ff">I am an h1 trigger. Click Me :)</h1>

Image example

Used as an image:

<img src="https://bdow.com/a-click-here-image.png" data-sumome-listbuilder-id="d9256b4b-d85e-45cf-960b-9493f0f8a9ff"/>

Text inside a div

<div style="align:center;"><a data-sumome-listbuilder-id="d9256b4b-d85e-45cf-960b-9493f0f8a9ff">I'm inside of a div </a></div>

Related Articles
Did this answer your question?