Call to Action Popup

[BomAle]

v1.0.2 Beta 2

bug fix

• groups changes was not stored
• now to edit the plugin require it is enabled.

v1.0.2 Beta 3

bug fix

• close when click outside the popup
• exit, scroll, wait event works

thanks to @topek and @dokdok for reports

Edited April 17, 2017 by BomAle

[Joey_M]

Does this allow for multiple popups? Sorry to ask, though I would like to display a message inside articles and two others in various locations (if possible).

[BomAle]

not currently, I will do for future.

[BomAle]

from suggestion: 

Content

<p>
	<a class="ipsAttachLink ipsAttachLink_image ipsAttachLink_left" href="https://i.imgur.com/2Q9nu8m.jpg" style="float: left;"><img alt="book cover" class="ipsImage" height="206" src="https://i.imgur.com/2Q9nu8m.jpg" style="width: 148px; height: 220px;" width="196"></a>
</p>

<p style="text-align: left;">
	<span style="font-size:22px;line-height:1.5;"><strong>12 Proven Ways to Convert Abandoning Visitors into Subscribers</strong></span>
</p>

<p style="text-align: left;line-height:1.8;">
	Over 70% of visitors who abandon your website will never return! Learn how to unlock the highest conversion revenue from each of your website visitors!
</p>

removed class ipsImage_thumbnailed, unset the border for attached image.

Template

<div id='bacalltoactionpopup' data-controller='plugins.bacalltoactionpopup' class="ipsHide"
	data-size="{$p->size}"
	data-modal="{$p->modal}"
	data-content="{$p->content}"
	data-title="{$p->title}"
	data-close="{$p->close}"
	data-close-on-click="{$p->closeOnClick}"
	data-open-on-click="{$p->openOnClick}"
	data-class-name="{$p->className}"
	data-transition-popup-show="{$p->transitionPopupShow}"
	data-transition-popup-hide="{$p->transitionPopupHide}"
	data-transition-modal-show="{$p->transitionModalShow}"
	data-transition-modal-hide="{$p->transitionModalHide}"
	data-exit="{$p->exit}"
	data-scroll="{$p->scroll}"
	data-unset="{$p->unset}"
	data-align="{$p->align}"
	data-position="{$p->position}"
	data-wait="{$p->wait}"
>
	<div class='ipsPad ipsType_center'>
	{$p->msg|raw}
	</div>
{{$form = new \IPS\Helpers\Form( 'form', null, \IPS\Http\Url::internal( 'app=core&module=system&controller=register', 'front', 'register' )/*, array( 'data-controller' => 'core.front.system.register')*/ );}}
{{$email = new \IPS\Helpers\Form\Email( 'email_address', NULL, TRUE, array( 'accountEmail' => TRUE, 'maxLength' => 150, 'bypassProfanity' => TRUE, 'placeholder' => 'Email' ) );$form->addHtml( $email->html() );}}
{{$form->addHtml(\IPS\Theme::i()->getTemplate( 'forms', 'core', 'global' )->button( 'sign_up', 'submit', null, 'ipsButton ipsButton_primary ipsButton_small', array( 'tabindex' => '2', 'accesskey' => 's' ) ));}}{{$form = preg_replace(['/data-ipsForm/', '/<div class="ipsAreaBackground_light ipsClearfix ipsPad ipsType_center">[.\s]*<\/div>/'], '', $form );}}
<div class="ipsPad" style="background: #d0d0d0;text-align:center">{$form|raw}</div>
</div>

removed {{if !member.member_id}}...{{endif}} from Template field, I suggest to adopt "Show to selected Group" option for filter by groups (so it's easier to manage and decrease confusion).

Edited March 18, 2018 by BomAle

[Pedro Ibáñez]

Hi i bought this plugin but it's very difficult for me to understand. I have two questions please:

1- With this plugin only can be set one pop up?

2- I want to make a pop up which appears when cliking in a block in the sidebar. At the moment it works calling an iframe. You can look it working here.

Any help for doing it please?

http://encontinuo.com/index.php#

Edited March 23, 2018 by Pedro Ibáñez

[BomAle]

9 hours ago, Pedro Ibáñez said:

1- With this plugin only can be set one pop up?

The plugin configuration is restricted to only one instance, but you can create a lot of popup if you don't would cookie remember.

I must convert this plugin to app when I have some free time.

9 hours ago, Pedro Ibáñez said:

I want to make a pop up which appears when cliking in a block in the sidebar.

No problem, you must configure popup panel as follow:

Customize Popup tab

1. Close popup on click elements, leave empty

2. Template, replace with

<div id='bacalltoactionpopup' data-controller='plugins.bacalltoactionpopup' class="ipsHide"
	data-url="http://encontinuo.com/calc.html"
	data-size="{$p->size}"
	data-modal="{$p->modal}"
	data-content="{$p->content}"
	data-title="{$p->title}"
	data-close="{$p->close}"
	data-close-on-click="{$p->closeOnClick}"
	data-open-on-click="{$p->openOnClick}"
	data-class-name="{$p->className}"
	data-transition-popup-show="{$p->transitionPopupShow}"
	data-transition-popup-hide="{$p->transitionPopupHide}"
	data-transition-modal-show="{$p->transitionModalShow}"
	data-transition-modal-hide="{$p->transitionModalHide}"
	data-exit="{$p->exit}"
	data-scroll="{$p->scroll}"
	data-unset="{$p->unset}"
	data-align="{$p->align}"
	data-position="{$p->position}"
	data-wait="{$p->wait}"
>
	<div class='ipsPad ipsType_center'>
	{$p->msg|raw}
	</div>
</div>
<script type="text/javascript">
;( function($, _, undefined){
"use strict";
ips.controller.mixin('bacalltoactionpopup', 'plugins.bacalltoactionpopup', true, function () {
	this.around('close',function(fn){
		var orig = fn();
		orig.done(function(){
			ips.utils.cookie.unset('bacalltoactionpopup');
		});
		return orig;
	});
});
}(jQuery, _));
</script>

Display Rules tab

3. Show Again, check Always option

4. Open popup on click elements, insert 

a[href*="//encontinuo.com/calc.html"]

or for sidebar specific

#ipsLayout_sidebar a[href*="//encontinuo.com/calc.html"]

NOTE: Now I upload 1.0.2 beta 7 it is a small fix for Open popup on click elements

Edited March 24, 2018 by BomAle

[Pedro Ibáñez]

Thanks BomAle!

On 24/3/2018 at 7:06 AM, BomAle said:

I must convert this plugin to app when I have some free time.

On 23/3/2018 at 9:53 PM, Pedro Ibáñez said:

It will be very good to use more than one instance!

 

I was configuring the panel and I can't get it to work properly:

This is the good one

http://encontinuo.com/calc.html

and the result of the popup is this

It's not showed well and also the calculator is not working...

I have sent you the passwords for I you can take a look please.

 

Much thanks

 

[BomAle]

edit page calc.html with this, the calcolator seem not work fine.

calc.html

@Pedro Ibáñez

Edited March 25, 2018 by BomAle

[Pedro Ibáñez]

Hi BomAle,

Sorry I get the same result but in this last version the calculator doesn't work.

Here the iframe working

http://encontinuo.com/calc 2.html

and not working here

http://encontinuo.com/calc.html

[BomAle]

6 minutes ago, Pedro Ibáñez said:

Hi BomAle,

Sorry I get the same result but in this last version the calculator doesn't work.

Here the iframe working

http://encontinuo.com/calc 2.html

and not working here

http://encontinuo.com/calc.html

Now, go into admincp plugin configuration and repeat those step:

and reupload the file calc.html

[Pedro Ibáñez]

Sorry BomAle,

Both calculators are working fine, the problem is the pop up does not show the full heigh

Sorry my english

 

Edited March 25, 2018 by Pedro Ibáñez

[BomAle]

Can you put here the Template field located on plugin settings?

[Pedro Ibáñez]

Ok

Edited March 25, 2018 by Pedro Ibáñez

[BomAle]

AdminCP > plugin > click pencil on right of row and will open the dialog with the settings. Go to Template and copy and paste here.

[Pedro Ibáñez]

Yes sorry

<div id='bacalltoactionpopup' data-controller='plugins.bacalltoactionpopup' class="ipsHide"
    data-url="http://encontinuo.com/calc.html"
    data-size="{$p->size}"
    data-modal="{$p->modal}"
    data-content="{$p->content}"
    data-title="{$p->title}"
    data-close="{$p->close}"
    data-close-on-click="{$p->closeOnClick}"
    data-open-on-click="{$p->openOnClick}"
    data-class-name="{$p->className}"
    data-transition-popup-show="{$p->transitionPopupShow}"
    data-transition-popup-hide="{$p->transitionPopupHide}"
    data-transition-modal-show="{$p->transitionModalShow}"
    data-transition-modal-hide="{$p->transitionModalHide}"
    data-exit="{$p->exit}"
    data-scroll="{$p->scroll}"
    data-unset="{$p->unset}"
    data-align="{$p->align}"
    data-position="{$p->position}"
    data-wait="{$p->wait}"
>
    <div class='ipsPad ipsType_center'>
    {$p->msg|raw}
    </div>
</div>
<script type="text/javascript">
;( function($, _, undefined){
"use strict";
ips.controller.mixin('bacalltoactionpopup', 'plugins.bacalltoactionpopup', true, function () {
    this.around('close',function(fn){
        var orig = fn();
        orig.done(function(){
            ips.utils.cookie.unset('bacalltoactionpopup');
        });
        return orig;
    });
});
}(jQuery, _));
</script>

[BomAle]

go into Display Rules and find open popup on click elemets and write the old value a [href....] (see the comment on support topic)

[Pedro Ibáñez]

Thanks BomAle!

It's working very well!.

Can I make it to close clicking outside the popup without having the close button?

[BomAle]

On 25/3/2018 at 11:26 PM, Pedro Ibáñez said:

Can I make it to close clicking outside the popup without having the close button?

Yes, I have correct into beta 8.

[Pedro Ibáñez]

On 27/3/2018 at 12:50 AM, BomAle said:

Yes, I have correct into beta 8.

Much thanks BomAle, I just updated but I don't how to configure...

Edited March 27, 2018 by Pedro Ibáñez

[BomAle]

21 hours ago, Pedro Ibáñez said:

Much thanks BomAle, I just updated but I don't how to configure...

Change into Template field the content:

<script....</script>

into

<script type="text/javascript">
;( function($, _, undefined){
"use strict";
ips.controller.mixin('bacalltoactionpopup', 'plugins.bacalltoactionpopup', true, function () {
	this.around('close',function(fn){
		var orig = fn();
		orig.done(function(){
			ips.utils.cookie.unset('bacalltoactionpopup');
		});
		return orig;
	});
	this.after('setup',function(){
		$('#'+this.bacalltoactionpopup.dialogID)
		.find('.' + this.data.className + '_content')
		.prev('[data-action="dialogClose"]')
		.css("display", "none");
	});
});
}(jQuery, _));
</script>

and active Close Button field.

make sure you have modal active (because of a bug that are correcting, the option must remain active i think until 4.3)

[Pedro Ibáñez]

Thanks BomAle it's working!

One more thing please, for me it's not working the preview. It can be because I'm in Mac?

 

[BomAle]

The preview probably works, from your configuration the dialog show when you click a link (/calc.html). if you would a preview active into Display Rules the exit, wait or scroll options don't save or restore after the test.

Edited March 28, 2018 by BomAle

[steadyoptions]

Just purchased it, looks good.

Couple questions.

This is how it currently looks:

How I get rid of "Just now"? Looks like it indicates the time it has been changed.

Also, is it possible to change the background color of the whole popup?

Thanks!

Edited September 9, 2018 by steadyoptions

[BomAle]

18 hours ago, steadyoptions said:

Just purchased it, looks good.

Thanks for purchase it 🙂

18 hours ago, steadyoptions said:

How I get rid of "Just now"? Looks like it indicates the time it has been changed.

remove the highlighted part and save (deselect "Last Edit" to avoid the cancellation of cookie)

18 hours ago, steadyoptions said:

Also, is it possible to change the background color of the whole popup?

add this code after last </div> inside "Template" field

<script>
;( function($, _, undefined){
"use strict";
ips.controller.mixin('bacalltoactionpopup', 'plugins.bacalltoactionpopup', true, function () {
     this.after('setup',function(){
        $('#'+this.bacalltoactionpopup.dialogID)
             .find('.' + this.data.className + '_content')
               .css("background-color", "rgba(255, 255, 200, 0.7)")
             .end().prev('.ipsModal')
	               .css("background", "rgba(0, 0, 0, 0.7)")
     });
});
}(jQuery, _));
</script>

you must change second parameter inside "css" function with color value you would. I suggest https://www.css3maker.com/css-3-rgba.html for choose it.

Into Documentation tab you can read all explanation about usage and interaction with plugin

Edited September 9, 2018 by BomAle

[steadyoptions]

That's great thank you! And the ability to ask guests to register is what I was looking for for a long time!!



Do you see any way to improve the look?