Jump to content

Call to Action Popup

Featured Replies

  • Author

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 by BomAle

  • 4 months later...
  • Replies 67
  • Views 8.6k
  • Created
  • Last Reply

Top Posters In This Topic

Most Popular Posts

  • What's New in Version 1.0.1 Fix Avoid to refresh to show popup after edit (setcookie) (req) Show popup only to selected Groups.NEW Added support link on edit form, me

  • In progress, I will add also: Some template for popup with ability to custom inside editor (if possible) or a button for live preview. Display options: show after x seconds, when scroll d

  • Into next major version will be possible to add more popups, the plugin has been thought only to offer an instance

Posted Images

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).

  • Author

not currently, I will do for future.

  • 6 months later...
  • Author

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 by BomAle

  • 4 weeks later...

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#

1948147104_Capturadepantalla2018-03-23alas21_50_37.thumb.png.67cbfa9910b210aaf9a05eb61063a17d.png

Edited by Pedro Ibáñez

  • Author
  On 3/23/2018 at 8:53 PM, 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.

  On 3/23/2018 at 8:53 PM, 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

image.thumb.png.315131dbf15725c531b625709519932f.png

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"]

image.thumb.png.c27202bfcaf2794299e439ae058c70c1.png

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

Edited by BomAle

Thanks BomAle!

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

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

  On 3/23/2018 at 8: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

1005284639_Capturadepantalla2018-03-25alas15_22_15.thumb.png.cefcf3723594007348943aa5c019feea.png

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

 

Sorry BomAle,

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

Sorry my english

 

Captura de pantalla 2018-03-25 a las 22.19.01.png

Edited by Pedro Ibáñez

  • Author

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

Ok

Edited by Pedro Ibáñez

  • Author

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

Screenshot_20180325-224148_cropped.thumb.png.20c0ebfe4face2d2b8649e7324475fb8.png

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>

  • Author

go into Display Rules and find open popup on click elemets and write the old value a [href....] (see the comment on support topic)Screenshot_20180325-224817.thumb.jpg.27d238bf66548fed1e7060076e9a2698.jpg

Thanks BomAle!

It's working very well!.

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

  • Author
  On 3/25/2018 at 9: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.

  On 3/26/2018 at 10:50 PM, BomAle said:

Yes, I have correct into beta 8.

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

Edited by Pedro Ibáñez

  • Author
  On 3/27/2018 at 1:20 PM, 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)

test.thumb.gif.c79c6a18f44221485ae7d1018e36fd4b.gif

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?

 

  • Author

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 by BomAle

  • 5 months later...

Just purchased it, looks good.

Couple questions.

This is how it currently looks:

image.thumb.png.751b04955bb2e68af833cf6ded2a393e.png

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 by steadyoptions

  • Author
  On 9/9/2018 at 3:28 AM, steadyoptions said:

Just purchased it, looks good.

Thanks for purchase it 🙂

  On 9/9/2018 at 3:28 AM, steadyoptions said:

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

image.thumb.png.3e689be1be9335efac73f472c69b55e5.png

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

  On 9/9/2018 at 3:28 AM, 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 by BomAle

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

image.thumb.png.7182d01fcb404c751eb5b02b08993fb4.png

Do you see any way to improve the look?

Recently Browsing 0

  • No registered users viewing this page.