When we created Icegram Engage we had a vision to make it as flexible as possible. Thus we came up with a variety of targeting rules. While the current Where, When, Device and Who rules cover a vast majority cases, a few cases are still left out.
Use Case
One such case is when you want to show a message only when user clicks on a button or link. You want to use your own button or styling, and then invoke a message when user clicks on it.
Solutions
There are two methods of achieving message display on button / link click. First is to use Behavior Triggers addon (which makes it extremely simple), and the other is without using any addon – with just Icegram Engage core.
In both approaches, we first ensure message does not display automatically, and then trigger it with JavaScript.
Let me walk you through both approaches.
Using Behavior Triggers
The magic method for creating a popup trigger on click in WordPress is to use a plugin that allows you to select the ‘Using JavaScript’ option as the message display option via the Behavior Triggers setting, and then call the JavaScript function when the button or link clicks.
- Configure your campaign. Create a message and fill in details as usual.
- Go to the Show Trigger option and set it to Using JavaScript.
- Copy the JavaScript code shown after the “Show Trigger” dropdown. The code looks something like:
window.icegram.get_message_by_id({message_id}).show(); - Add targeting rules and any other campaign settings as needed and save your campaign.
- Go to the page where this message would be displayed. Create your button or link and paste the JavaScript code in the
onclickattribute. - For buttons, the code may look like:
<button onclick="window.icegram.get_message_by_id({message_id}).show();return false;">Show me a Popup!</button> - For links, the code may look like:
<a href="#" onclick="window.icegram.get_message_by_id({message_id}).show();return false;">Show me a Popup!</a>
For example: Suppose the message id = 6344.
The code will look like:
<a href=”#” onclick=”window.icegram.get_message_by_id(6344).show();return false;”> Show me a Popup!</a>
Make sure to ensure correct message id is present in the code, and that you are adding return false; after the code. Now test and verify everything is working as expected!
Congratulations! You’ve successfully implemented “Using Javascript” functionality of Behavior triggers add-on!
Learn how to trigger a popup on a link click in WordPress using a simple plugin and some JavaScript code, and create engaging and interactive experiences for your website visitors.
No Behavior triggers? No problem!
If you do not have behavior triggers addon, but still wish to show messages on click, it is possible. Though not as simple but still possible!
Here’s how to do it…
Configure your campaign. Create a message and fill in details as usual. Copy the shortcode of this campaign.
The code looks something like: [ icegram campaigns=”campaign_id” ]
Shortcode to show an offer/optin on-click of a LINK
Shortcode to show an offer/optin on-click of a BUTTON
[ icegram campaigns="XXXX"]<button>Your Text</button> [/icegram]
It is necessary to insert the message into a campaign and then use the campaign id. If you insert the message-id it will give you an error.
What’s the difference in these two methods?
The Behavior Triggers method works using campaigns. So all the analytics tracking – both on campaign and message will work.
The message embed with shortcode will not track analytics at campaign level, but only at message level.
Taking this beyond onclick…
The JavaScript code to show a message works from anywhere. In this example, we used it on a button or link. But you can also use it in your own JavaScript code. Easily add a popup-on-click feature to your WordPress website using a plugin and a bit of custom JavaScript, and create engaging and interactive experiences for your visitors.
Icegram Engage has extensive JavaScript API to show / hide messages. Experiment with it and let us know if you have any questions!
Hope you found this useful! Do try it out and share your site with us!
Hello,
I am trying to create an exit insterstitial when a person clicks on a button on my site. I have tried everything, all the add ons and still can’t get it to work.
That’s a great use case. Our support team was communicating with you about this. Hope it’s sorted now.
Cannot seem to find javascript mentioned in step 6:
Go back to the campaign, and copy the JavaScript code to show the message. The code looks something like: window.icegram.get_message_by_id({message_id}).show();
Help please
Okay, have tried using a link but the link doesn’t work, any help would be much appreciated!
@James: Do contact us and give us a link to a page where you’ve setup the JS / link to open a message. We can take a look and tell you how to make it work.
It won’t let me save a -1 value in the campaign…what to do?
It doesn’t work…
Cannot seem to find javascript mentioned in step 6 too…
!! step 8:” <button onclick=" !!
onclick method doesn't nothing and link method can't open a url…
All others features are realy good !!
Thanks for help
Jérôme
This plugin give me an error, when i implement into the page
“TypeError: window.icegram is undefined
window.icegram.get_message_by_id(18190).show();
”
Other funtionality is working weel, but not triggering with javascript?
So I have a pretty script heavy theme (divi – elegant themes) I need the popup to trigger when a prospect hits a button on the home page which the Divi theme already renders with Java. Is this possible with this plugin?
Yes this is possible. Just follow the steps mentioned in the blog. If you face any issues, send us an email at hello@icegram.com. Will look into it asap!
Not working at all. And anyway those instructions are not so clear.
Did you try with correct message ID? Open up Developer Console on the page you are trying to get this to work, and see what happens when you type in “icegram” in the console. Does it show “undefined” or “Object”?
Additionally, try running that window.icegram.get_message_by_id().show() code from Developer Console. See if that shows any errors.
That can point to the direction of the problem and help solve it.
If you find it difficult, contact us and we can take a look.
When I tried running window.icegram.get_message_by_id().show() code from Developer Console I get this.
Uncaught TypeError: Cannot read property ‘get_message_by_id’ of undefined
at :2:15
at Object.InjectedScript._evaluateOn (:905:140)
at Object.InjectedScript._evaluateAndWrap (:838:34)
at Object.InjectedScript.evaluate (:694:21)
I’ve used this code exactly except I replace with the correct ID
It doesn’t work for me.
This is working as expected for me on a desktop.
On my android phone and tablet however, neither the link or the button do anything.
I have both phone and tablet ticked in the campaign settings.
I checked your page https://www.icegram.com/demos/ and none of the links show up on my tablet. The live demos do not seem to work either.
Is this supposed to work on mobile devices?
Is there a way to tie the JS method to the WordPress integrated Menu system? Trying to put a “subscribe” link on the Menu…but not sure how to tie the onclick event to it. Would appreciate any help. Thanks!
The easiest way is to create a campaign with popup targeting to the page,
which opens on the “Subscribe” link in Menu.
Or
You can also bind/tie the popup with menu item.
For that, please follow the steps below.
1. Create campaign and use “Behavior Trigger” to set show trigger > using javascript.
It will give you a code, which will be used in the bind event.
e.g.
window.icegram.get_message_by_id(902).show();(For help on how to get the code. Kindly look into the above article.)
2. Find the id/class of the Menu link.
e.g. menu-item-873
How to find the id/class? read this.
3. Add the below code in the message body of the popup with the script tag.
/*Replace "menu-item-873" with your link id*/
jQuery(document).on('click', '#menu-item-873 a', function(e){
e.preventDefault();
/*Replace with javacript code to show message*/
window.icegram.get_message_by_id(902).show();
});
how do you make the link dissapear after the button is clicked. i have the icegram window popup, but I want the link to disappear
@kelechi azuogu: Can you please explain little more about, which link you have to disappear. Do contact us at hello@icegram.com and give us a link to a page where you’ve setup the JS / link to open a message.
We can take a look and tell you how to make it work.
Hi,
this is a great guide and everything works after some trial. However, after you click the popup background and the same button right after, the popup is not shown. You can check this here: http://yourbuilder.co.nz/services/new-homes/
Please wait for the document to be fully loaded and then click any of the “View Plan” buttons to show the popup.
I have already contacted your support and will appreciate any help.
Thanks,
Alex.
You’re so interesting! I don’t suppose I’ve read a single thing like this before. So nice to find someone with original thoughts on this subject matter.
Seriously.. many thanks for starting this up. This website is something that’s needed on the internet, someone with a bit of originality!