[Resolved] Is it possible to create a floating hook?

[Andy]

Hi there,

Is it possible to create a floating hook for mobile and desktop banner Ads?

Ideally, as the user scrolls down a page, a little banner Ad can sit at the bottom of the screen.

Similar to this:

View post on imgur.com

Thank you

[Elvin]

Hi,

There are multiple ways of doing this.

One way is, if you have the markup, style(position:fixed) and script(position toggle, if needed), you can place them in a Hook Element that is hooked to either generate_after_content or generate_before_footer.

One other way is, to make a Block Element. Add in a GenerateBlocks Container Block with a custom CSS selector styled to have “position:fixed” and place a custom html block with your ads markup on it. You then hook this Block Element to either generate_after_content or generate_before_footer.

Lastly is, to install an ad plugin that does this for you. I’m not exactly sure what’s the best one for this though.

[Andy]

Hi Elvin,

The first method sounds the easiest. Please see the code below. How do I mark this up to get it style(position:fixed)? Or am I misunderstanding your instruction?

<div id="xxxxx">
    <script type="text/javascript">
        try {
            window._mNHandle.queue.push(function (){
                window._mNDetails.loadTag("xxxxx", "728x90", "xxxxx");
            });
        }
        catch (error) {}
    </script>
</div>

Thank you!

[Elvin]

You can add this style markup on your Hook Element.

<style>
#yourDivID{
position: fixed;
bottom: 0;
left: 50%; 
transform: translateX(-50%);
}
</style>

[Andy]

Hi Elvin,

I tried this out unsuccessfully. Just clarifying:

1. I added this code to generate_before_footer with hooks:

<div id="xxxxx">
    <script type="text/javascript">
        try {
            window._mNHandle.queue.push(function (){
                window._mNDetails.loadTag("xxxxx", "728x90", "xxxxx");
            });
        }
        catch (error) {}
    </script>
</div>

2. Now, where do I add this style Markup specifically? I tried several places unsuccessfully. Maybe I’m adding it at the wrong place:

<style>
#xxxxx{
position: fixed;
bottom: 0;
left: 50%; 
transform: translateX(-50%);
}
</style>

Thank you

[Elvin]

Can you link us to the site/page you’re working on? So we could have an idea of what might be causing it not to work.

Does the script work when you place it somewhere else? Can you verify if its actually working?

[Andy]

Sure thing! Please see private info.

Please scroll to the bottom of Empower, and you will see the Ad loading (before the footer). I want to pop it off and load it as a floating banner in desktop and mobile view.

By the way, I linked you nickiswift again. Once that page loads, you should see a floating Ad banner as well on the bottom of the screen. That’s a live example.

[Elvin]

Thanks.

The ad seems to be using “911311315” as its id. But the problem is I’m not exactly sure if that’s dynamic.

If it isn’t dynamic, try this CSS:

<style>;
#911311315{
position: fixed;
bottom: 0;
left: 50%; 
transform: translateX(-50%);
}
</style>

But if in case it is actually dynamic, meaning the id changes, just add the position:fixed; and other things as an inline style.

Example:

<div id="xxxxx" style="position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);">
    <script type="text/javascript">
        try {
            window._mNHandle.queue.push(function (){
                window._mNDetails.loadTag("xxxxx", "728x90", "xxxxx");
            });
        }
        catch (error) {}
    </script>
</div>

[Andy]

Awesome, thanks Elvin!

[Elvin]

Awesome, thanks Elvin!

No problem. 🙂

[Author]

Posts