Hi Michele!
I created a special offer popup using a custom page module... I used a CTA in place of a regular link.
You can place this code into the HTML + HUBL section:
<div class="modal" style="background: url('{{ module.pop_up_img.src }}'); background-position: center top; background-size: 100%; background-repeat: no-repeat; background-color: #fff;">
<div class="modal-close-outer">
<div class="modal-close"><i class="fal fa-times-circle"></i></div>
</div>
{{ widget.pop_up_text }}
</div>
<div class="modal-mask"></div>
<script>
$(document).ready(function() {
$(document).ready(function () {
setTimeout(function(){
$(".modal, .modal-mask").fadeIn(); }, {{ widget.modal_delay }});
});
$('.modal-close').click(function(){
$('.modal').hide();
$('.modal-mask').hide();
});
});
</script>And this for the CSS:
.modal {
display: none;
position: fixed;
top: 30px;
bottom: 30px;
right: 0;
left: 0;
margin: 0 auto!important;
background-color: #fff;
max-width: 420px;
max-height: 38%;
overflow-y: hidden;
padding: 80px 60px 80px 65px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 2px solid #eaeaea;
z-index: 100;
}
.modal h3 {
margin-top: 120px;
}
.modal strong {
font-weight: 700;
}
.modal-mask {
display: none;
z-index: 99;
height: 100%;
width: 100%;
position: fixed;
background-color: rgba(0,0,0,.7);
top: 0;
left: 0;
}
.modal-close-outer {
position: absolute;
right: 45px;
top: 20px;
}
.modal-close {
text-decoration: none;
color: #fff;
position: fixed;
cursor: pointer;
font-size: 30px;
}
@media (max-width: 767px) {
.modal {max-width: 76%; padding: 30px 7%!important;}
}And I set up the fields like so:
And here is the finished product:
You may have to adjust the css to fit your styles/etc. Also, I used Font Awesome for the close button. 🙂
Hope this helps!
We did a simplified redirect to the landing page which has the entire process (landing page, thank you page, confirmation email) by creating the pop-up form and then in the section where you create the "thank you page" you put a link in there that directs them to the landing page you want to promote. In our initial form that the system requires you to create you can put only 1 field (i.e. email address). We have progressive forms so when they click on the link in the thank you page from the pop-up they do not have to populate additional fields and/or nominal fields - depending on whether they were previously cookied. Not ideal but a workaround
I'd love this feature to exist too, and to be honest, I think it's pretty shocking that it doesn't exist already.
While I wait for HubSpot to do this, I've been using this free tool for my clients: https://www.addthis.com
Create an account and then add the Link Promotion tool:
Then you just need to design the pop-up which is super-easy and quick.
Once you're happy, embed the code in your HS pages and it'll start working.
I hope that helps?
Thanks,
Alex
Hi @micheleguilford and @dariakg
I create one custom module without JavaScript. Look:
1) Create one file in your Design Manager and select "Custom Module";
2) Create 1 rich text field and 2 color fields;
3) Paste the code bellow in your space for HTML and CSS in the module.
HTML
<div id="openModal" class="modalDialog popup-auto-open">
<div> <a href="#openModal" title="Close" class="close" style="background:{{ your_field_color.color }};color:{{ your_field_color_2.color }};">X</a>
Here you insert your value of rich text field or image field
</div>
</div>CSS
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 1;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: auto;
}
.modalDialog:target {
opacity: 0;
pointer-events: none;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
padding:2px;
border-radius:100%;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
box-shadow: 0 0 5px #333333;
padding: 5px;
border-radius: 100%;
transition: 0.1s linear all;
}
.popup-auto-open img{
max-width:100%;
}4) Is important replace where I left pink with the value of the fields you created.
Obs: u can use the above codes in your site code, dont need create custom module. But if use HubSpot, is bether one module to inser in templates os sites and blogs and easy customization.
Did this post help solve your problem? If so, please mark it as a solution.
Best Regasrds! 🙂
