In some cases you may not want to modify your existing registration start flow. Maybe there isn't enough space on the page. Maybe you have a registration call to action that you want to stick with. Maybe you just like the word popup. Whatever the reason, it's simple to make the InGo Activator Widget pop up.
Making the Activator "Pop":
Let's say you were given the following javascript element to embed in your flow for the Activator widget:
<script src="//cdn.ingo.me/widgets-loader/1.4.4/js/ingo.loader.widget.js"
data-ingo-id="AMTR3SOAIYCBNFZUL3P2DBL0CFZ1L1T4" data-ingo-manual="http://www.insert_your_next_page_URL_here.com" >
</script>
There are a few different ways to make the Activator widget a popup/dialog:
A popup tied to an HTML element, like a button:
In this configuration, when the element that you select is clicked, the popup will be displayed.
Configure Through Admin:
In admin, edit the widget configuration and make sure the "Is widget running as dialog?" option is checked. This changes the widget to be a modal (pop-up).
OR Configure Through Script Attribute:
Alternatively you can set this parameter by adding the attribute "data-ingo-modal" with a setting of "true"
<script
src="//cdn.ingo.me/widgets-loader/1.4.4/js/ingo.loader.widget.js"
data-ingo-id="AMTR3SOAIYCBNFZUL3P2DBL0CFZ1L1T4" data-ingo-manual="http://www.insert_your_next_page_URL_here.com"
data-ingo-modal="true">
</script>
Alternatively, if you are using the longer form to load your widget, you would set the "modal" parameter like this:
<script>
$(function() {
$('#widget').loaderWidget(
{"widgetId": "AMTR3SOAIYCBNFZUL3P2DBL0CFZ1L1T4",
"modal": "true"});
})
</script>
After making the appropriate configuration change, reload your page, click the element you've selected, and the Activator widget is now displayed as a popup dialog.
A popup that dispalys on page load:
To get your user engaged right away, you may want to load the Activator widget as a popup when the page loads. No problem. First set the widget to be a popup dialog with the above instructions, then,
Configure Through Admin:
In admin, edit the widget configuration and make sure the "Should dialog auto opened on load?" option is checked. This causes the widget to load when the page loads, rather than waiting for a user's interaction(s).
OR Configure Through Script Attribute:
Alternatively you can set this parameter by adding the attribute "data-ingo-autostart" with a setting of "true"
<script
src="//cdn.ingo.me/widgets-loader/1.4.4/js/ingo.loader.widget.js"
data-ingo-id="AMTR3SOAIYCBNFZUL3P2DBL0CFZ1L1T4" data-ingo-manual="http://www.insert_your_next_page_URL_here.com"
data-ingo-modal="true" data-ingo-autostart="true">
</script>
Alternatively, if you are using the longer form to load your widget, you would set the parameter like this:
<script>
$(function() {
$('#widget').loaderWidget(
{"widgetId": "AMTR3SOAIYCBNFZUL3P2DBL0CFZ1L1T4",
"modal": "true", "autostart": "true"});
</script>
Now reload your page and the Activator widget is now displayed as a popup dialog automatically when the page finishes loading.
Encouraging Interaction:
The Activator dialog will automatically be hidden when your user clicks away from it to some part of the page behind it. You may, however, only want users to be able to close the Activator dialog by choosing one of the registration options (social or manual).
Configure Through Admin:
In admin, edit the widget configuration and make sure the "Can user close dialog?" option is checked. This causes the widget to ignore background page clicks and requires that the user select one of the available actions before the widget will close and move to the next page in sequence. (yes, the option is not well named and seems backward).
OR Configure Through Script Attribute:
Alternatively you can set this parameter by adding the attribute "data-ingo-disableclose" with a setting of "true"
<script
src="//cdn.ingo.me/widgets-loader/1.4.4/js/ingo.loader.widget.js"
data-ingo-id="AMTR3SOAIYCBNFZUL3P2DBL0CFZ1L1T4" data-ingo-manual="http://www.insert_your_next_page_URL_here.com"
data-ingo-modal="true" data-ingo-disableclose="true">
</script>
Alternatively, if you are using the longer form to load your widget, you would set the parameter like this:
<script>
$(function() {
$('#widget').loaderWidget(
{"widgetId": "AMTR3SOAIYCBNFZUL3P2DBL0CFZ1L1T4",
"modal":"true", "disableClose": "true"});
</script>
Now, once the popup is displayed (either by your user clicking the element on the page you've selected, or automatically if you've set the autostart property to true) the popup dialog will not allow the user to "click away" from it. The user must select one of the modes of registration.
Close on Manual:
In many cases, the "manual" registration option is a form on the same page that the Activator widget "pops" over. When the user chooses to engage without social media, you may just want the dialog to close, rather than have the dialog redirect the user to a "next" page. This is especially true in cases where you've make the Activator widget autostart.
Configure Through Admin:
In admin, edit the widget configuration and make sure the "Close on manual registration?" option is checked. This causes the widget to simply close if the "manual" option is chosen on the Activator widget.
OR Configure Through Script Attribute:
Alternatively you can set this parameter by adding the attribute "data-ingo-" with a setting of "true"
<script
src="//cdn.ingo.me/widgets-loader/1.4.4/js/ingo.loader.widget.js"
data-ingo-id="AMTR3SOAIYCBNFZUL3P2DBL0CFZ1L1T4"
data-ingo-modal="true" data-ingo-autostart="true"
data-ingo-closeModalOnManual="true">
</script>
Alternatively, if you are using the longer form to load your widget, you would set the parameter like this:
<script>
$(function() {
$('#widget').loaderWidget(
{"widgetId": "AMTR3SOAIYCBNFZUL3P2DBL0CFZ1L1T4",
"modal": "true", "autostart": "true",
"closeModalOnManual": "true"});
</script>
With this configuration, the Activator widget dialog with simply close when the manual option is chosen.
Combine, mix and match the above settings to get the right flow for your event.
Pop goes the Activator Widget! Enjoy!