pop up on website

Need help? Please give a detailed explanation of your problem.
Post Reply
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 500
meble kuchenne Mikołów Knurów Czechowice-Dziedzice
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

pop up on website

Post by Agalassi1792 »

Hello,

Is it possible to add pop-ups to websites in APWT? Like in WordPress, you can make pop-ups with certain conditions, like show the pop-up after so many seconds on the page, control the conditions of the pop-up (such as hide on mobile devices) and even set a cookie so that if the pop-up is closed, it doesn't show up again for a certain amount of time.

Are any of the above possible within APWT?

Let me know, thanks!
User avatar
Dave
Support Team
Support Team
Posts: 790
Joined: Wed May 11, 2011 10:30 am
Website: www.allprowebtools.com
Contact:

Re: pop up on website

Post by Dave »

Yes, all of these features are available from 3rd party providers. They will provide you with an "embed code" that you can add to your AllProWebTools header or page header for a specific page (You will find this in the settings for that page where it says "Add to HTML <head> for this page only")

You can learn more by doing a Google search for "javascript popup form"

You can also create your own as explained in this post: https://www.allprowebtools.com/forum/vi ... f=1&t=3342
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 500
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: pop up on website

Post by Agalassi1792 »

Hi,

I followed the instructions but I do not know where to place that code for it to work. All that code is doing is darkening the screen and no pop up is showing, and with the screen darkened nothing can happen. This is my code....

I tried placing it on the page itself, then in the settings where it says 'Add to HTML <head> for this page only" and both places produced the same unusable result.

Please advise, thank you.

<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>

<div class="modal hide fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3 style="text-align: center;">Get on my VIP list!</h3>
</div>
<div class="modal-body">
<p style="text-align: center;">My words</p>
<p>&nbsp;</p>
<p style="text-align: center;"><a class="btn btn-primary" href="#">Join the List!</a></p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
</div>
</div>
User avatar
NoahBaldwin
Support Team
Support Team
Posts: 108
Joined: Fri Jan 04, 2019 11:21 am
Website: www.allprowebtools.com

Re: pop up on website

Post by NoahBaldwin »

Hi Alex,

Looks like Bootstrap changed their method. Removing the "hide" class from the modal fixes this issue.
Here's the new HTML:

Code: Select all

<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>

<div class="modal fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3 style="text-align: center;">Get on my VIP list!</h3>
</div>
<div class="modal-body">
<p style="text-align: center;">My words</p>
<p>&nbsp;</p>
<p style="text-align: center;"><a class="btn btn-primary" href="#">Join the List!</a></p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
</div>
</div>
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 500
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: pop up on website

Post by Agalassi1792 »

Hi Noah,

Thanks for that.

However it is still displaying badly. I had to add a background color to the script in order to see any of the words, but it still looks very bad. It overtakes the entire screen. Is there anyway that It can open in a lightbox or something without overtaking the entire screen?


Here is a screenshot with how it came out, with the code:

<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>

<div class="modal fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
</div>
<div class="modal-body style="background-color:#ffffff;">
<h3 style="text-align: center;"><img src="/content/uploads/bubbles.png">Get on my VIP list!</h3>
<p style="text-align: center;">Receive monthly tips and tricks that can help you market your biz!</p>
<p>&nbsp;</p>
<p style="text-align: center;"><a class="btn btn-primary" href="#">Join the VIP List!</a></p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
</div>
</div>
Attachments
screencapture-assistforthewin-2020-05-01-16_28_52.png
screencapture-assistforthewin-2020-05-01-16_28_52.png (92.52 KiB) Viewed 1810 times
Mitchell326
AllPro Provider
AllPro Provider
Posts: 2
Joined: Wed Apr 08, 2020 11:04 am
Website: www.allprowebtools.com

Re: pop up on website

Post by Mitchell326 »

Hello, Alex.
It looks like the modal was missing some div elements.

Try this:

Code: Select all

<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4></div>
<div class="modal-body">
<h3 style="text-align: center;"><img src="/content/uploads/bubbles.png">Get on my VIP list!</h3>
<p style="text-align: center;">Receive monthly tips and tricks that can help you market your biz!</p>
<p>&nbsp;</p>
<p style="text-align: center;"><a class="btn btn-primary" href="#">Join the VIP List!</a></p>
</div>
<div class="modal-footer"><a class="btn" href="#">Close</a></div>
</div>
</div>
</div>
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 500
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: pop up on website

Post by Agalassi1792 »

Hi Mitchell,

thank you, that helps.

Now that we got the pop up to display correctly, we need to get the pop up working right.

There are a few things not quite right with this yet.

1) the "close' this window doesn't really work - it doesn't work wiht the "#" in the href, nor does it work by pasting the same page link, as it just refreshed the page and the pop up shows up once again. For now I have instructions to click outside of the box to close the window, but this should work better.

2) we need to set a cookie so the pop up does not appear again after someone closes the pop up so it doesn't show up again immediately once they visit that page again. Can we set cookies to hide the pop up for a certain amount of time? And if so how would we go about doing this?

Let me know about these things, thanks!
User avatar
Dave
Support Team
Support Team
Posts: 790
Joined: Wed May 11, 2011 10:30 am
Website: www.allprowebtools.com
Contact:

Re: pop up on website

Post by Dave »

The code provided in this thread is a proof of concept to demonstrate how code can be embeded in AllProWebTools. Pop up forms are not a native feature available or supported by AllProWebTools, though they can still be installed with embeded code.

As was mentioned before, you can learn more by doing a Google search for "javascript popup form". You can also create your own or hire a web developer who is familiar with javascript and CSS.

There are also a number of 3rd party providers who can generate pop up embed code for you and offer a number of different features.

Here are some resources to get you started (but you can certainly do some searches on Google for other options):
* None of the website links included in this post have been specifically tested or verified to work with AllProWebTools, research your solution carefully and use at your own risk.
Post Reply