Event for Dropdown Banner Form

Developer Support CMS Development
1

Is there any event for dropdown banner form when it is about to be shown/animating and on closing the banner?

2

Hey @manojdev

Are you asking if the HubSpot Dropdown banner has an event or if you can create an event?

What are you wanting to do?

3

Hi Dennis,

Does HubSpot Dropdown banner has any event like when banner will be shown and also how can I move the position of the banner to bottom?

4

@stefen have you ever hijacked the dropdown banner to display elsewhere?

@manojdev , you can set when and to whome the banner will be displayed in the form settings

5

@dennisedson @manojdev can’t say that i’ve tried hacking a HubSpot popup form. If I need something custom I will typically build it myself. It’s not too difficult if you use the HTML Dialog element if you only need modern browser support. If you need older browser support Magnific Popup is also a pretty simple one that is very popular.

6

Hey @stefen ,

I got your point. I also prefer to build a custom banner. But I wanted email submission for my banner on click and integration of hubspot for it. As hubspot has that feature of the banner so tried to implement it with some customization. It seems like I won’t be having much control of it.

7

Hey @manojdev ,

In the pop-up forms targeting settings towards the bottom you can control when the banner will be shown.

With a little bit of CSS you should be able to position the banner to live at the bottom as well.
If you target the .leadinModal class you can set top to initial and bottom to a value 0 you may need some !important tags.
This is what the default modal outputs in HubSpot

.leadinModal {
position: fixed;
top: initial; /* change this */
right: 0;
bottom: 0 !important; /* change this */
left: 0;
overflow: visible;
-webkit-overflow-scrolling: touch;
z-index: 9999;
font-size: 16px;
}

Hope that works and feel free to shoot us a link so we can take a look if it doesn’t work

// edit
As @manojdev, the banner will animate so using the below styles will remove that animation

.leadinModal-content {
animation: none !important;
}

8

@jonchim ,

Thanks for the helping out for moving banner to bottom. I also needed to disable the animation for .leaninModal else the banner will start animating from top to bottom in this case.

9

Hey @manojdev,

No problem good catch, targeting the .leadinModal-content class with animation of none should do the trick.

.leadinModal-content {
animation: none !important;
}