WebSite X5Help Center

 
Ionescu C.
Ionescu C.
User

Subscribe Newsletter Feature  en

Autor: Ionescu C.
Visitado 372, Followers 1, Compartido 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

Publicado en
17 RESPUESTAS - 2 úTIL
Incomedia
Elisa B.
Incomedia

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.

Leer más
Publicado en de Elisa B.
John S.
John S.
User

I have a page like this:

Leer más
Publicado en de John S.
John S.
John S.
User

In 1 I have:

<div id="trigger-div">Chapter 4</div> You could change it to:

<div id="trigger-div"></div>

Leer más
Publicado en de John S.
John S.
John S.
User

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>

Leer más
Publicado en de John S.
John S.
John S.
User

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

Leer más
Publicado en de John S.
John S.
John S.
User

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.

Leer más
Publicado en de John S.
Axel  
Axel  
User

@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

Leer más
Publicado en de Axel  
John S.
John S.
User

You could change the z-index for the html object.

Leer más
Publicado en de John S.
John S.
John S.
User

Maybe you could give a link to your test?

Leer más
Publicado en de John S.
Axel  
Axel  
User

@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

Leer más
Publicado en de Axel  
John S.
John S.
User

@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>

Enjoysmile

Leer más
Publicado en de John S.
Axel  
Axel  
User

great wink

Leer más
Publicado en de Axel  
Ionescu C.
Ionescu C.
User
Autor

@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

Leer más
Publicado en de Ionescu C.
John S.
John S.
User

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.

Leer más
Publicado en de John S.