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. Also, the click trigger does not affect the way that popup runs on its own.
Check out our video that covers the basics, then keep reading for more detailed information on Click Triggers:
- 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 Popup
- Under Step 4, Visibility, Select Add Another Click Trigger. This will let you name the click trigger popup and give you the script.
- Copy the Inline Click Trigger Code.
- 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!
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:
- Find your Click Trigger code.
<a data-sumome-listbuilder-id="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx">Click Here</a>
- Convert it into this format:
- Add that as a class to an existing element:
<button class="sumome-listbuilder-id-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx">Click me!</button>
- That's it!
- 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 an 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>