Page 1 of 1

pop up on website

Posted: Thu Apr 30, 2020 3:59 pm
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!

Re: pop up on website

Posted: Fri May 01, 2020 9:50 am
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

Re: pop up on website

Posted: Fri May 01, 2020 10:53 am
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>

Re: pop up on website

Posted: Fri May 01, 2020 3:39 pm
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>

Re: pop up on website

Posted: Fri May 01, 2020 4:31 pm
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>

Re: pop up on website

Posted: Mon May 04, 2020 8:28 am
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>

Re: pop up on website

Posted: Mon May 04, 2020 12:02 pm
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!

Re: pop up on website

Posted: Mon May 04, 2020 12:17 pm
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.