Blog, Website & Page Publishing

michellestern
Participante

How can I add a subscribe button at the header of my blog?

resolver

Hello, 

 

Does anyone know how I can add in a subscribe button to the header of my blog, like HubSpot has on their blog here? https://blog.hubspot.com/marketing You'll notice how the subscribe button only shows up once the user tries to scroll (see screen shot attached) and I'd love to replicate something on my blog if possible. Appreciate any help. 

Thanks,

Michelle

Screen Shot 2019-03-18 at 5.02.51 PM.png

0 Me gusta
5 Soluciones aceptadas
jennysowyrda
Solución
Administrador de la comunidad
Administrador de la comunidad

How can I add a subscribe button at the header of my blog?

resolver

Hi all, 

 

I want to pull some design experts into this thread to keep the conversation in one place and avoid duplicate work on your end.

 

@dennisedson , @Kevin-C@tjoyce do you have any insight for @michellestern on how to add a "subscribe" button to the header, similar to how it is done in this blog?

 

Thank you,
Jenny

Ver la solución en mensaje original publicado

0 Me gusta
dennisedson
Solución
Equipo de producto de HubSpot
Equipo de producto de HubSpot

How can I add a subscribe button at the header of my blog?

resolver

@michellesternhere is a link with a rough demo. i commented the jquery for you so you can see what is going on.

style however you want to.

hope this helps

Ver la solución en mensaje original publicado

tjoyce
Solución
Experto reconocido | Partner nivel Elite
Experto reconocido | Partner nivel Elite

How can I add a subscribe button at the header of my blog?

resolver

@michellestern, you could drop the following javascript into your page and it should move your existing form into a sticky header.

here's a demo:

https://monosnap.com/file/oriFKvgv9pWXb960ZGOJTUIgR4cFHh

and here's the code:

$(function(){
var subscribeBar = $('<div class="sticky-subscribe"><button class="btn">Subscribe</button><div id="stickyFormHolder"><div class="inner-wrapper"></div></div></div>').css({"background": "#ff500a","color": "white", "text-align": "right", "position": "fixed","width":"100%", "z-index": "9999"});
subscribeBar.find('button').css({
	'background' : 'rgba(255, 255, 255, 0.34)',
	'border' : '1px solid white',
	'color' : 'white',
	'font-size' : '16px',
	'border-radius' : '8px',
	'padding' : '17px 30px',
	'outline' : 'none',
	'text-transform' : 'uppercase',
	'font-weight' : 'bold',
	'margin' : '25px',
	'cursor' : 'pointer',
    'letter-spacing': '1px'
});
subscribeBar.find('#stickyFormHolder .inner-wrapper').css({
	'position' : 'relative',
	'width' : '0',
	'height' : '0',
	'overflow' : 'visible',
	'float' : 'right'
})
.html($('#hs_form_target_module_154038860336049'));
subscribeBar.find('#hs_form_target_module_154038860336049').css({
	'position' : 'absolute',
	'right' : '200px',
	'width' : '350px',
	'padding' : '25px',
	'background' : '#ff500a',
	'z-index' : '99999',
	'top' : '-80px',
	'-webkit-box-shadow' : '-1px 5px 12px -1px rgba(0,0,0,0.75)',
	'-moz-box-shadow' : '-1px 5px 12px -1px rgba(0,0,0,0.75)',
	'box-shadow' : '-1px 5px 12px -1px rgba(0,0,0,0.75)',
	'border' : '2px solid white'
});
subscribeBar.find('button').on('click', function(e){
  $('#stickyFormHolder').toggle();
  e.preventDefault();
  return false;
});
$('body').prepend(subscribeBar);
$('#stickyFormHolder').toggle();
$('.sticky-subscribe').slideToggle();
$(window).on('scroll', function(e){
  if(!$('.sticky-subscribe').hasClass('active') && $(document).scrollTop() > 150){
    $('.sticky-subscribe').addClass('active');
    $('.sticky-subscribe').slideToggle("fast");
  }
  if($('.sticky-subscribe').hasClass('active') && $(document).scrollTop() <= 150){
    $('.sticky-subscribe').removeClass('active');    
    $('.sticky-subscribe').slideToggle("fast");
  }
});
});

If this answer helped, please, mark as solved 😄


tim@belch.io 

Ver la solución en mensaje original publicado

tjoyce
Solución
Experto reconocido | Partner nivel Elite
Experto reconocido | Partner nivel Elite

How can I add a subscribe button at the header of my blog?

resolver

@michellestern - yes, the form ID changed (actually, I'm noticing the form on your blog listing page is just different than the one on your blog post individual page)

In the javascript code, do a search and replace for the following. 

find: #hs_form_target_module_154038860336049

replace with: #hs_form_target_module_1539198611234158

Ver la solución en mensaje original publicado

0 Me gusta
tjoyce
Solución
Experto reconocido | Partner nivel Elite
Experto reconocido | Partner nivel Elite

How can I add a subscribe button at the header of my blog?

resolver
.sticky-subscribe .hs-button.primary {
    background: #131313;
}

Ver la solución en mensaje original publicado

0 Me gusta
18 Respuestas 18
ConnorSlivensky
Asesor destacado | Partner nivel Elite
Asesor destacado | Partner nivel Elite

How can I add a subscribe button at the header of my blog?

resolver

This is what's called a Pop-up Form. They can be set to show up after a set time on page (7 seconds min) or a point they scroll to on the page. Hope that article helps, it explains the details better than I could.

 

If this helped make sure to mark the thread as solved so others can find the answer easier. 

michellestern
Participante

How can I add a subscribe button at the header of my blog?

resolver

Thanks Conor. But is there a way to keep the subscribe form from disappearing? I.e. if the reader closes the pop up but after reading more decides they want to subscirbe?

0 Me gusta
MFrankJohnson
Líder intelectual

How can I add a subscribe button at the header of my blog?

resolver

Thanks for the tag @ConnorSlivensky ...

 

@michellestern, are your pages hosted on HubSpot ??


A subscribe button does't work like a Pop-Up (by design). Ask over in the dev section about triggering a HubSpot Pop-Up from a button (or link).


That being said, you can drop an omnipresent CTA in the blog post section of your HubSpot blog template. That will make it appear in the same place for every post.
- see Frank's HubSpot Dev Blog


The CTA at the bottom of every blog post in that dev blog is part of the template. Same with the 'author' CTA in the footer.

 

There are also custom modules you can use with HubSpot blogs. You'll find those in the marketplace -- Marketing -> Files and Templates -> Marketplace


Hope that helps.

 

 

Note: Please search for recent posts as HubSpot evolves to be the #1 CRM platform of choice world-wide.

 

Hope that helps.

 

Be well,
Frank


www.mfrankjohnson.com
michellestern
Participante

How can I add a subscribe button at the header of my blog?

resolver

Hi Frank, 

 

Yes, the blog is hosted on HubSpot. We actually already have a form at the bottom of the blog template now i.e. see this blog here: https://brandinsights.wattpad.com/2018/7/19/take-gen-z-from-singleplayer-to-multiplayer but I'm not in love with the look and we haven't received lots of signups, so I'm hoping to play around and create something more engaging (and ideally closer to the top of the page). I may ask the dev community forum. 

 

Thanks,

Michelle

jennysowyrda
Solución
Administrador de la comunidad
Administrador de la comunidad

How can I add a subscribe button at the header of my blog?

resolver

Hi all, 

 

I want to pull some design experts into this thread to keep the conversation in one place and avoid duplicate work on your end.

 

@dennisedson , @Kevin-C@tjoyce do you have any insight for @michellestern on how to add a "subscribe" button to the header, similar to how it is done in this blog?

 

Thank you,
Jenny

0 Me gusta
tjoyce
Solución
Experto reconocido | Partner nivel Elite
Experto reconocido | Partner nivel Elite

How can I add a subscribe button at the header of my blog?

resolver

@michellestern, you could drop the following javascript into your page and it should move your existing form into a sticky header.

here's a demo:

https://monosnap.com/file/oriFKvgv9pWXb960ZGOJTUIgR4cFHh

and here's the code:

$(function(){
var subscribeBar = $('<div class="sticky-subscribe"><button class="btn">Subscribe</button><div id="stickyFormHolder"><div class="inner-wrapper"></div></div></div>').css({"background": "#ff500a","color": "white", "text-align": "right", "position": "fixed","width":"100%", "z-index": "9999"});
subscribeBar.find('button').css({
	'background' : 'rgba(255, 255, 255, 0.34)',
	'border' : '1px solid white',
	'color' : 'white',
	'font-size' : '16px',
	'border-radius' : '8px',
	'padding' : '17px 30px',
	'outline' : 'none',
	'text-transform' : 'uppercase',
	'font-weight' : 'bold',
	'margin' : '25px',
	'cursor' : 'pointer',
    'letter-spacing': '1px'
});
subscribeBar.find('#stickyFormHolder .inner-wrapper').css({
	'position' : 'relative',
	'width' : '0',
	'height' : '0',
	'overflow' : 'visible',
	'float' : 'right'
})
.html($('#hs_form_target_module_154038860336049'));
subscribeBar.find('#hs_form_target_module_154038860336049').css({
	'position' : 'absolute',
	'right' : '200px',
	'width' : '350px',
	'padding' : '25px',
	'background' : '#ff500a',
	'z-index' : '99999',
	'top' : '-80px',
	'-webkit-box-shadow' : '-1px 5px 12px -1px rgba(0,0,0,0.75)',
	'-moz-box-shadow' : '-1px 5px 12px -1px rgba(0,0,0,0.75)',
	'box-shadow' : '-1px 5px 12px -1px rgba(0,0,0,0.75)',
	'border' : '2px solid white'
});
subscribeBar.find('button').on('click', function(e){
  $('#stickyFormHolder').toggle();
  e.preventDefault();
  return false;
});
$('body').prepend(subscribeBar);
$('#stickyFormHolder').toggle();
$('.sticky-subscribe').slideToggle();
$(window).on('scroll', function(e){
  if(!$('.sticky-subscribe').hasClass('active') && $(document).scrollTop() > 150){
    $('.sticky-subscribe').addClass('active');
    $('.sticky-subscribe').slideToggle("fast");
  }
  if($('.sticky-subscribe').hasClass('active') && $(document).scrollTop() <= 150){
    $('.sticky-subscribe').removeClass('active');    
    $('.sticky-subscribe').slideToggle("fast");
  }
});
});

If this answer helped, please, mark as solved 😄


tim@belch.io 

michellestern
Participante

How can I add a subscribe button at the header of my blog?

resolver

Thank you so much, this looks great!!

 

I've added the javascript to my HubSpot page but for some reason when I click on the subscribe button the form doesn't appear. I've reached out to HubSpot support to see if they can help and will let you know if they aren't able to. 

 

Thanks again, greatly appreciated!

Michelle

0 Me gusta
dennisedson
Equipo de producto de HubSpot
Equipo de producto de HubSpot

How can I add a subscribe button at the header of my blog?

resolver

@@michellestern , post a link to the page and maybe we can help

0 Me gusta
michellestern
Participante

How can I add a subscribe button at the header of my blog?

resolver

Hi @dennisedson and @tjoyce 

 

Sorry for the delay, I was out of the office for a few days. 

 

I pushed the exact code you sent (tjoyce) live to my page https://brandinsights.wattpad.com/ and after scrolling the subscribe banner appears but once you click the subscribe button the form doesn't appear.  Do you know why? Would appreciate any help you can provide. 

 

Many thanks,

Michelle

0 Me gusta
tjoyce
Solución
Experto reconocido | Partner nivel Elite
Experto reconocido | Partner nivel Elite

How can I add a subscribe button at the header of my blog?

resolver

@michellestern - yes, the form ID changed (actually, I'm noticing the form on your blog listing page is just different than the one on your blog post individual page)

In the javascript code, do a search and replace for the following. 

find: #hs_form_target_module_154038860336049

replace with: #hs_form_target_module_1539198611234158

0 Me gusta
michellestern
Participante

How can I add a subscribe button at the header of my blog?

resolver

Great thanks so much, that worked!

0 Me gusta
dennisedson
Equipo de producto de HubSpot
Equipo de producto de HubSpot

How can I add a subscribe button at the header of my blog?

resolver

@michellestern , might be a good idea to wrap your form in a container and add an id to the container.  That way if you ever change the form, or if the form differs per page, you wouldnt have to worry about updating the code with a new form ID

michellestern
Participante

How can I add a subscribe button at the header of my blog?

resolver

Hi again Dennis, 

 

Do you know how I can change the color of the "sign me up" button? As you can see from the screen shot, it is the same color as the background unless the user hovers over it. Please let me know if you have any ideas. 

 

Thanks,

MichelleScreen Shot 2019-04-04 at 10.38.37 AM.png

0 Me gusta
tjoyce
Solución
Experto reconocido | Partner nivel Elite
Experto reconocido | Partner nivel Elite

How can I add a subscribe button at the header of my blog?

resolver
.sticky-subscribe .hs-button.primary {
    background: #131313;
}
0 Me gusta
michellestern
Participante

How can I add a subscribe button at the header of my blog?

resolver

Thanks so much Dennis for letting me know. Forgive my lack of knowledge on this, but can you please outline the steps to add in a container and an id to the container? Thanks. 

0 Me gusta
dennisedson
Solución
Equipo de producto de HubSpot
Equipo de producto de HubSpot

How can I add a subscribe button at the header of my blog?

resolver

@michellesternhere is a link with a rough demo. i commented the jquery for you so you can see what is going on.

style however you want to.

hope this helps

ConnorSlivensky
Asesor destacado | Partner nivel Elite
Asesor destacado | Partner nivel Elite

How can I add a subscribe button at the header of my blog?

resolver

Looking at the live example page you posted it seems that is part of their header/responsive design and not a pop-up form as it appears. If that's indeed the case then it's coded into the template itself and not a module you can just drop in. 

 

I wish I could help you more but my coding is pretty limited. I'd try posting to the Developer board, you might get a more in-depth answer there. 

 

@MFrankJohnsonand @jennysowyrda have any insights on how/where you might implement this?

michellestern
Participante

How can I add a subscribe button at the header of my blog?

resolver

Thanks appreciate it. 

0 Me gusta