HubSpot CMS

Welcome popup

On Hubspot creates and manage promotion modal popups for your blog or website. Powerful, and yet, easy for you to grab your visitors’ attention to introduce them to your offers, discounts or other kinds of promotional notices, welcome message, promote new products, deliver special offers or show images to your customers.

Created by: BitCot

Tags: Social, Modals

Unverified
?

After receiving a minimum of 25 recommendations, an entry earns the "Community Approved" badge.

Please keep in mind, all entries are community created and may not be fully supported by HubSpot.

3 Recommendations

View on:

GitHub

HTML + HUBL
<div id="myModal" class="modal" style="display: none;" data-period="{{ module.during_period_time }}"><!-- Modal content -->
<div class="modal-content"><span class="close">×</span>
<div class="modal__inner"><label class="modal__close" for="modal-1"></label>
<h2>{{ module.pop_up_heading }}</h2>
<p>
  {% if module.image_field.src %}
	<img src="{{ module.image_field.src }}" alt="{{ module.image_field.alt }}">
  {% endif %} 
  <span>{{ module.modal_content }}</span> 
  </p>
  
  {% set href = module.link_field.url.href %}
    {% if module.link_field.url.type is equalto "EMAIL_ADDRESS" %}
      {% set href = "mailto:" + href %}
    {% endif %}
    <a href="{{ href }}"
      {% if module.link_field.open_in_new_tab %}target="_blank"{% endif %}
      {% if module.link_field.no_follow %}rel="nofollow"{% endif %}
      class="shop_Btn" >
      {{ module.button_name }}
    </a>
</div>
</div>
</div>
          
        
CSS
          
            /* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
	background-color: #fafafa;
	margin: auto;
	padding: 20px;
	border: 0;
	width: 100%;
	border-radius: 4px;
	display: block;
	max-width: 640px;
}
/* The Close Button */
.close {
	color: #aaa;
	float: right;
	font-size: 24px;
	font-weight: 500;
	border: solid 1px #aaa;
	width: 28px;
	height: 28px;
	border-radius: 100px;
	text-align: center;
	line-height: 28px;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  border-color: #000;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.modal__inner p img {
	height: 150px;
	float: left;
	margin: 0 0 15px;
	object-fit: cover;
	width: 100%;
	object-position: center bottom;
}
.modal__inner h2 {
	margin: 0 0 20px;
	font-size: 22px;
	font-weight: 600;
	display: block;
	width: 100%;
	border-bottom: solid 1px #e7e7e7;
	padding-bottom: 15px;
	color: #4d5c6e;
	text-align: center;
}
.modal__inner p {
	display: block;
	width: 100%;
	font-size: 15px;
  margin-bottom: 0;
  text-align: center;
}
.modal__inner p span {
    display: block;
    width: 100%;
    font-size: 18px;
    font-style: italic;
}
.modal__inner {
    display: block;
    width: 100%;
}
.shop_Btn {
	display: block;
margin: 25px auto;
border: solid 1px #999;
max-width: 160px;
padding: 10px 15px;
border-radius: 6px;
color: #999;
font-weight: 600;
text-align: center;
}
.shop_Btn:hover, .shop_Btn:focus {
  color: #34495e;
  border-color: #34495e;
    -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
          
        
JS
          
            var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];
jQuery(window).scroll(function(){
   setTimeout( function() {
			showModalPopup();
		}, 1000 );
 });
window.onclick = function(event) {
  if (event.target == modal) {
    //modal.style.display = "none";
    //setLocalStorageScope();
  }
}
span.onclick = function() {
  //modal.style.display = "none";
  jQuery("#myModal").fadeOut(700); 
 setLocalStorageScope();
}
function showModalPopup()
{
  if (typeof(Storage) !== "undefined") {
    if (localStorage.getItem("popup_active") !== null) {
      var popup_active = localStorage.getItem("popup_active");
      let currentDate = new Date();
      let currnetTimestring = currentDate.getTime()
      
      if( popup_active > currnetTimestring) {
        modal.style.display = "none";
      }else {
        //modal.style.display = "block";
        jQuery("#myModal").fadeIn(900);
      }
    }else {
      //modal.style.display = "block"; 
      jQuery("#myModal").fadeIn(900);     
    } 
  
  }
};
function setLocalStorageScope() {
  if (typeof(Storage) !== "undefined") {
    localStorage.removeItem('popup_active');
    let duringperiod = jQuery("#myModal").attr("data-period");
    duringperiod = parseInt(duringperiod);
    let currentDate = new Date();
    let currnetIncreaseDate = new Date ( currentDate );
     currnetIncreaseDate.setMinutes ( currentDate.getMinutes() + duringperiod );
    let currnetTimestring = currnetIncreaseDate.getTime();
    localStorage.setItem("popup_active", currnetTimestring);
  }
}
          
        
Have Questions?

Ask technical questions in Slack.

HubSpot Developer Slack

Not a member yet? - join here
READ ME (VIEW IN GITHUB)

HubSpot

Welcome Popup


Description:

On Hubspot creates and manage promotion modal popups for your blog or website. Powerful, and yet, easy for you to grab your visitors’ attention to introduce them to your offers, discounts or other kinds of promotional notices, welcome message, promote new products, deliver special offers or show images to your customers.

Template Usage code:

{% module "module_158021480218568" path="/Welcome Popup", label="Welcome Popup" %}

Features:

  • Create and manage only one pop-up but can be used on multiple pages
  • Customize the look and feel of the popup
  • Set popup location on the screen
  • Show popup after X amount of page scrolling/Scroll popups
  • Repetitive pop up – show popup every X period of time
  • Responsive popup
  • Redirect user to another page when he/she clicks on popup button
  • Html popup
  • Shortcode/template code popup
  • Manage title, image and content

Support:

If you find any issue or need help, please ask us. We are active in https://help.hubspot.com/ Support Forum.

 
3 Recommendations

BitCot

www.bitcot.com

BitCot delivers digital products for all businesses by building mobile apps, Web tools, SaaS platforms to drive digital growth for success.

View BitCot’s Gallery (5 Entries)

Contribute to the Gallery!

We bet you’ve coded some amazing stuff. Showcase them and help the community grow.

Contribute

Other Open Source Projects

Browse all other open source projects

CrankShaft Framework

A modern framework for accelerating build times on the HubSpot CMS. Based on a modified Bootstrap 4 framework.

Lead developers: Jon McLaren

Developer Chrome Extension

Chrome/Chromium extension for HubSpot CMS Developers that adds a developer menu, dark theme and useful shortcuts to commonly used HubSpot query parameters, resources, and tools for making HubSpot Development easier and more enjoyable.

Lead developers: Jon McLaren , William Spiro , Gonzalo Torreras

VS Code HubL Language Extension

This extension enables super fast local development of CMS pages, and is a great compliment to using the new local HubL server. It contains comprehensive HubL tag, function, filter and expression test auto-complete snippets, as well as their documentation.

Lead developers: William Spiro

Not coding on HubSpot CMS yet?

We invite you to explore why thousands of developers LOVE coding with HubSpot!

Contribute
Made with  by community members: InboundLabs.co