Subscribe Newsletter Feature 
Author: Ionescu C.
Visited 982,
Followers 1,
Shared 0
Hello,
It is possible to add a widget like newsletter, when the user reaches the bottom of the website a pop up is displayed stating: Sign in for our newsletter ?
And the use has to only complete only one filed, e-mail adress to be exact.
Any idea/script whould be highly appreciated.
Regards,
Cristi
Posted on the
Maybe you could be inspired by this: https://blog.hartleybrody.com/adding-subtle-pop-ups-to-your-website/
I have made a little test here: https://pindown.eu/sparta13/page04.html
If it is something like this you mean, then I can poste the code for it.
Hi Ionescu,
I have marked this post as Idea. Meanwhile, you could use the Sendinblue Newsletter service: we ourselves use it and are happy with it.
Thanks! Kind regards.
Author
Hello,
Can you tell me were exactly were did you put the code/script?
In the page Properties or Html Box ?
I have also found this post: https://helpcenter.websitex5.com/en/post/184502
But I belive this one (https://pindown.eu/sparta13/page04.html) it is more subtle.
Regards,
Cristi
I have a page like this:
In 1 I have:
<div id="trigger-div">Chapter 4</div> You could change it to:
<div id="trigger-div"></div>
In 2 I have:
<div id="slider">
<!--call-to-action-->
<a href="mailto:***?subject=Newsletter" target="_blank" style="font-size:40px;">Sign in for our newsletter !</a>
<p>This popup is only for test - <mark>so don't </mark>try to send a mail</p>
</div>
<style type="text/css">
#slider{
/*hide the window*/
position:fixed;
bottom:-200px;
right:0px;
height:195px; width:600px;
background-color:#fff;
/*add border*/
border-top:1px solid #000;
border-left:1px solid #000;
/*add shadow*/
-moz-box-shadow: 0px 0px 15px #888;
-webkit-box-shadow: 0px 0px 15px #888;
box-shadow: 0px 0px 15px #888;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function isScrolledTo(elem) {
var docViewTop = $(window).scrollTop(); //num of pixels hidden above current screen
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top; //num of pixels above the elem
var elemBottom = elemTop + $(elem).height();
return ((elemTop <= docViewBottom)); //if the bottom of the current viewing area is lower than the top of the trigger
}
var trigger = $('#trigger-div'); //set the trigger
var reached = false;
$(window).scroll(function() {
if(isScrolledTo(trigger)) {
//slide CTA onto screen
if(!reached){
$('#slider').animate({
bottom: 0
}, "fast");
reached = true;
}
}
if (!isScrolledTo(trigger)) {
//slide CTA off of screen
if(reached){
$('#slider').animate({
bottom: -250
}, "fast");
reached = false;
}
}
});
});
</script>
This should function right away for you.
You then have to change :
<a href="mailto:***?subject=Newsletter" target="_blank" style="font-size:40px;">Sign in for our newsletter !</a>
<p>This popup is only for test - <mark>so don't </mark>try to send a mail</p>
The *** should be changed to the mailaddress where you want to receive the request.
You can change the text and font size to what you want. Maybe you have to style it to be adaptive for smaller screens.
This is totally free, and you have full control over what happens. For many 3. party services you have to pay and maybe live with advertisements.
Hope this is the answer to your "problem".
The code (2) can be put in a html (like in the example) but it could also be put in the page properties.
But - it can also be put on all pages using the "Statistics and code"
On the pages you want the "popup" to be shown, you then have to place a html-object with the code in 1, so you have the trigger for that page.
I will not recommend it on all pages. I think a user will find it annoying - I just mention the possibility.
Please tell us when you have found a proper solution - and what you have chosen.
@John,
Nice...
One thing... When ther eis not text behin the popup the link is ok
If there is text behind, linl does not works properly.
Any idea ?
Enjoy!
Axel
You could change the z-index for the html object.
Maybe you could give a link to your test?
@John,
Great remark. You are right....
I have reduced the size of the popup and this superposition issue is solved.
On my demo: https://wsx5demo.afsoftware.fr
Just one thing.
With the previous script you have this error with Chrome Inspect
To avoid this one just put this line into a comment
<!--<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> -->
Now the Jquery library is loaded with WSX5 .
and everyhting will work fine
Enjoy!
Axel
@Cristi
Here is a new version of the content in 2.
I have made it more suitable for also mobile devices. As Axel discovered, then the div in the object was "behind" the text on the footer. I have placed a z-index to avoid that.
You have to find the ID of the html-object that contains the code, so it can be "lifted" above the text.
When you have the ID you replace the xx in this line: #imCell_xx with your actual value.
Then this should function:
<div id="slider">
<!--call-to-action-->
<a href="mailto:***?subject=Newsletter" target="_blank" style="font-size:30px;">Sign in<br>for our newsletter !</a>
<p>This popup is only for test<br><mark>so don't</mark> try to send a mail</p>
</div>
<style type="text/css">
#slider{
/*hide the window*/
position:fixed;
bottom:-200px;
right:0px;
height:200px; width:300px;
background-color:#fff;
/*add border*/
border-top:1px solid #000;
border-left:1px solid #000;
/*add shadow*/
-moz-box-shadow: 0px 0px 15px #888;
-webkit-box-shadow: 0px 0px 15px #888;
box-shadow: 0px 0px 15px #888;
}
#imCell_xx {
z-index:10000;
}
</style>
<!--<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> -->
<script type="text/javascript">
$(document).ready(function() {
function isScrolledTo(elem) {
var docViewTop = $(window).scrollTop(); //num of pixels hidden above current screen
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top; //num of pixels above the elem
var elemBottom = elemTop + $(elem).height();
return ((elemTop <= docViewBottom)); //if the bottom of the current viewing area is lower than the top of the trigger
}
var trigger = $('#trigger-div'); //set the trigger
var reached = false;
$(window).scroll(function() {
if(isScrolledTo(trigger)) {
//slide CTA onto screen
if(!reached){
$('#slider').animate({
bottom: 0
}, "fast");
reached = true;
}
}
if (!isScrolledTo(trigger)) {
//slide CTA off of screen
if(reached){
$('#slider').animate({
bottom: -250
}, "fast");
reached = false;
}
}
});
});
</script>
Enjoy
great
Author
@John S. can the script be made so taht the user inserts his email adress and than presses Submit/Send/Subscribe?
Something like this :
Regards,
Cristi
The short answer is: yes
The longer answer is: You have to make some html that grabs the data and that can invoke a PHP script that can send data. Also some JS to check the input and a "response" page.
You find code for that here: https://html.form.guide/email-form/php-form-to-email/
You can from the page make a download of a zip containing the full code.
You then have to edit the code so it meet your needs. The original code contains also a name and a text to be forwarded.
I have made a test here: https://pindown.eu/sparta13/page03.html
The code is put into "call to action"
<!--call-to-action-->
<style>
label,a
{
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
}
</style>
<!-- a helper script for vaidating the form-->
<script language="JavaScript" src="scripts/gen_validatorv31.js" type="text/javascript"></script>
<!-- Start code for the form-->
<br>
<p style="text-align:center;font-size:30px;">SUBSCRIBE</p>
<br>
<form method="post" name="myemailform" action="form-to-email.php">
<input type="text" name="email" placeholder="Enter a valid email address">
<input type="submit" name='submit' value="submit">
</form>
<script language="JavaScript">
// Code for validating the form
// Visit http://www.javascript-coder.com/html-form/javascript-form-validation.phtml
// for details
var frmvalidator = new Validator("myemailform");
frmvalidator.addValidation("email","req","Please provide your email");
</script>
Submitting the form will invoke the "form-to-email.php" script.