CMS Development

micheleguilford
Participant

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

Résolue

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 

1 Solution acceptée
Hubspotlien
Solution
Participant

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

Résolue

"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

Voir la solution dans l'envoi d'origine

37 Réponses
DomRychlik
Équipe de développement de HubSpot
Équipe de développement de HubSpot

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

Résolue

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)

GPettinau
Membre

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

Résolue

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 

0 Votes
AllanG
Participant | Partenaire solutions Diamond
Participant | Partenaire solutions Diamond

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

Résolue

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

0 Votes
AMartinez33
Participant

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

Résolue

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

DomRychlik
Équipe de développement de HubSpot
Équipe de développement de HubSpot

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

Résolue

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

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

0 Votes
Hubspotlien
Participant

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

Résolue

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
Équipe de développement de HubSpot
Équipe de développement de HubSpot

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

Résolue

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

VMishravivek
Participant

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

Résolue

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.

 

VMishravivek_0-1615289811636.png

 

Thanks

 

Hubspotlien
Participant

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

Résolue

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

0 Votes
dennisedson
Équipe de développement de HubSpot
Équipe de développement de HubSpot

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

Résolue

@Hubspotlien 

Interesting.  do you have any documentation on that?

(also, thanks for adding here)

0 Votes
Hubspotlien
Solution
Participant

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

Résolue

"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
Participant | Partenaire solutions Platinum
Participant | Partenaire solutions Platinum

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

Résolue

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
Membre

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

Résolue

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
Participant

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

Résolue

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

AlexHutson
Contributeur | Partenaire solutions
Contributeur | Partenaire solutions

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

Résolue

Thanks! Yes - you're correct. Cheers!

0 Votes
is_ppce
Participant

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

Résolue

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.

0 Votes
MarketingMax
Participant | Partenaire solutions Elite
Participant | Partenaire solutions Elite

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

Résolue

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.

0 Votes
DanielSanchez
Conseiller clé | Partenaire solutions Platinum
Conseiller clé | Partenaire solutions Platinum

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

Résolue

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

0 Votes
dariakg
Participant

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

Résolue

Need this too! How is it possible it's not there yet??

0 Votes
Lmartin
Participant

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

Résolue

We also need this 🙂 

0 Votes