1 What Are Click Triggers?
2 Setting Up A Click Trigger
3 Using the Click Trigger Class
4 Click Trigger Examples
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.</span >
Setting Up A Click Trigger
1 Click Forms in the navigation menu of your BDOW! installation.
2 Open a Popup that you want to convert to a Click Trigger, or click Create New Form.
3 Navigate to the Form Type tab and select Click Trigger Popup.
4 Click the Visibility tab. Notice the Click Trigger Code to the right.
5 Copy the Inline Click Trigger Code.
6 Make sure to save your new Click Trigger Popup you have created by hitting Publish 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:
<p>sumome-listbuilder-id-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</p>
3 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!
Click Trigger Examples
1 Used as a link on a page:
<a data-sumome-listbuilder-id="d9256b4b-d85e-45cf-960b-9493f0f8a9ff">I am a link. Click Me :)</a>
2 Used as a button:
<button data-sumome-listbuilder-id="d9256b4b-d85e-45cf-960b-9493f0f8a9ff">Click Trigger Button</button>
3 Used as an H1 Tag:
<h1 data-sumome-listbuilder-id="d9256b4b-d85e-45cf-960b-9493f0f8a9ff">I am an h1 trigger. Click Me :)</h1>
4 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" />
5 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>
