Follow

Getting Started with Click Triggers


Click Triggers are available on the following Sumo Plans:
plans_click_triggers.png


What are Click Triggers?

The Click Trigger feature within List Builder is an awesome feature that allows your visitors to "trigger" a List Builder popup 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: Click triggered popups ignore display rules and behavior options. You are simply forcing a trigger of that popup through a click.


Setting Up A Click Trigger

  • Open the Sumo Launcher
  • Navigate to List Builder and select Create New Form
  • Follow steps 1-6 accordingly
  • Step 2, Form Type, select Click Trigger PopupScreen_Shot_2017-08-01_at_5.34.08_PM.png
  • Under Step 4, Visibility, Select Add Another Click Trigger. This will let you name the click trigger popup and give you the script.11111.png
  • Copy the Inline Click Trigger Code.34343434343.png
  • Make sure to save your new Click Trigger Popup you have created by hitting Make Live at the bottom!
  • Now, paste the Inline Click Trigger Code into your site's source code. (Note: You may insert the Click Trigger code into your website's source code differently, depending on your platform.)
  • You're done! Now click the trigger you have created to see your hard work in action!

Using the Click Trigger Class

You can also add Click Triggers to an existing element by adding the unique Click Trigger class to any clickable element on your page! Here's how:

  1. Find your Click Trigger code.
    • <a data-sumome-listbuilder-id="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx">Click Here</a>
  2. Convert it into this format:
    • sumome-listbuilder-id-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
  3. Add that as a class to an existing element:
    • <button class="sumome-listbuilder-id-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx">Click me!</button>
  4. That's it!

Click Trigger Examples

  • Used as a link on a page: <a data-sumome-listbuilder-id="d9256b4b-d85e-45cf-960b-9493f0f8a9ff">I am a link. Click Me :)</a>
  • Used as a button: <button data-sumome-listbuilder-id="d9256b4b-d85e-45cf-960b-9493f0f8a9ff">Click Trigger Button</button>
  • Used as an H1 Tag: <h1 data-sumome-listbuilder-id="d9256b4b-d85e-45cf-960b-9493f0f8a9ff">I am an h1 trigger. Click Me :)</h1>
  • Used as an image: <img src="http://secondchance.fitness/wp-content/uploads/2015/09/click-here-button-orange-2.jpg" data-sumome-listbuilder-id="d9256b4b-d85e-45cf-960b-9493f0f8a9ff" />
  • Used inside of a <div>: <div style="align:center;"><a data-sumome-listbuilder-id="d9256b4b-d85e-45cf-960b-9493f0f8a9ff" >I'm inside of a <div></a></div>

Was this article helpful?
5 out of 5 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.