How to create pop-up with direct link, not form

[micheleguilford]

I'm looking for the abiity to have a lightbox pop up on a page that simply redirects to another page on my site. Heard about a special we have but lost the email with the direct link? Click here and there you are. Seems so much simpler than a form pop-up, but I don't want to use a store template. 

Possible? Not?

-Michele 

[DomRychlik]

Hi everyone, I’ve some exciting news to share - we’ve launched a brnad new pop-up builder in HubSpot Marketing Hub and CMS Hub into public beta that will allow you to create a pop-up form (or any other type of pop-up, including one without a form) that will trigger on button click. If you’re inetersted in checking it out you can DM me or opt yourself in (if you’re Super Admin and in MH or CMSH starter - you’ll find the beta opt in in the existing Pop-up forms editor)

[TonySegui]

I'm interest in adding pop ups to my webpage, could you please help me in knowing how to?, thanks!

[alanamcconnell]

Hey Tony - Popups are now part of the CTA feature - here is some information: https://knowledge.hubspot.com/forms/create-pop-up-forms

It no longer has to be just forms, they still call it pop up forms, but you can just have a link.

[GPettinau]

Hi, I've used the url Non Hubspot as destination, but it doesn't track the clicks. In the stats I see visualization but not clicks on CTA. How can I set this? Thanks 

[AllanG]

Is this only available in starter?....Super Admin in enterprise and not seeing this feature. Thx

[AMartinez33]

Can I get some documentation on how to use this feature. Thanks.

[DomRychlik]

Hi, here's a Knowldge Base article with more details on how to use it.

https://knowledge.hubspot.com/ctas/create-ctas

[Hubspotlien]

Hi all, with Google's upcoming Page Experience update. Will we now be penalised for using pop-ups or "intrusive interstitials" in our sites?

[DomRychlik]

Hi HubSpot Community,

I'm Dom and I’m a Product Manager at HubSpot. My team is currently looking to build out this functionality beyond the simple solution that we put in place in 2020. I’d be really interested in hearing more about your use cases and generally finding out how you are currently using pop ups and CTAs, what’s working for you and what’s not working. Please DM me if you’re interested in sharing your feedback and jumping on a quick 30 min call with myself and the team.

Best,

Dom

[Mishra-vivek]

Hey ,

This option is available in HS. 

Go to Marketing=> Lead capture=> Forms => Pop up form. 

Then While creating the form go to Callout and select the correct option as shown in the image below.

Thanks

[Hubspotlien]

Hi everyone, I think Google will penalise sites for using pop-ups when the new 'Page Experience' update rolls out in May?

[dennisedson]

@Hubspotlien 

Interesting.  do you have any documentation on that?

(also, thanks for adding here)

[Hubspotlien · Accepted solution]

"Instead of full page interstitials, use banners that take up only a small fraction of the screen to grab your users' attention. These can be implemented in various ways. For example, for app install banners, you can use a browser-supported banner, such as Smart App Banners for Safari or in-app install experience for Chrome. Another option is to create a simple HTML banner, similar to a typical small advertisement, that links to the correct app store for download. You can reuse these small containers for other kinds of notifications, such as newsletter sign-up prompts." From Google Developers Portal

[jessebeginbound]

Hi @micheleguilford and everyone!

I know I'm a little late to the party but we do have a custom module for this that can help if anyone is interested. It allows for you to put a HubSpot Form, PDF, Image, YouTube Video, or iframe of another webpage into a beautiful Popup. It's triggered by a custom button you can style and place on any HubSpot CMS template or page - no coding required!

check it out if it sounds like something you might be interested in.

http://beginbound.hs-sites.com/ultimate-popup-wizard-begin-bound-hubspot-custom-module

Happy HubSpotting!

Jesse

[kathleendavis9]

I believe this has been solved with the new hubspot form pop-ups forms! Doesn't have to actually be a form, they really should move it from the forms section. 

Create a pop-up form, then on the first step, for the question "What should the button link to?", you can just set it to a non-hubspot URL and bypass the form altogether. 

[JRaudys]

@kathleendavis9 I created an account on here just to thank you for pointing this out. 

[AlexHutson]

Thanks! Yes - you're correct. Cheers!

[is_ppce]

Just chiming in to echo this - Having to use an external pop up creator like GetSiteControl is fine, but I'd really rather do it in house at Hubspot and it seems like a no-brainer.

[MarketingMax]

Bump. Think this should be pretty simple to implement. Have it so that you can replace the form with a CTA that directs the user to a specific page.

[DanielSanchez]

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! 🙂