Close button / Onclick

Advertising
1

Hello!

Our ad network wants us to add a close button for a responsive playable ad, but I can’t seem to get it to work. They sent us a template with example code but when I try to add the code to the exported hype html document, it creates a really weird space at the bottom of the playable. I’m wondering if I have to add the close button manually.

This is the code from the ad network:

 <div id="ADNETWORKNAME-header">
        <a id="ADNETWORKNAME-close" class="hide" href="javascript:void(0)" onclick="callSDK('close')">
            <!-- CLOSE ICON -->
            <svg version="1.1" id="svg-ADNETWORKNAME-dt-close" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 414.9 416.2" style="enable-background:new 0 0 414.9 416.2;" xml:space="preserve">
                <g>
                    <path class="svg-ADNETWORKNAME-dt-close-background" d="M82.7,1h-4H2.1c55.7,0,70.9,39.8,75,61.5v198c0,26.3,13.2,49.4,33.3,63.2c12.6,9.1,28.1,14.5,44.8,14.5h195
                    c20.9,3.4,64.1,17.5,64.1,75.5v-75.5h0.2l0-337.1H82.7z" />
                    <g id="Layer_3_2_">
                        <g id="close_2_">
                            <g>
                                <polygon class="svg-ADNETWORKNAME-dt-close-icon" points="326.7,270.1 246,189.4 164.7,270.1 145.3,250.7 226.7,169.3 145.3,88.6 164.7,69.3 246,150 
                                326.7,69.3 346.1,88.6 265.4,169.3 346.1,250.7               " />
                            </g>
                        </g>
                    </g>
                </g>
            </svg>
        </a>
    </div>

Could I simply insert the close button image and give it a click action with the URL “callSDK(‘close’)”?

2

I would think so. I'm assuming "callSDK('close')" can be called from anywhere in your Hype document. If so then you could just add an image or use Hype elements to create a close button and just Run a function on Mouse Click that has "callSDK('close')" in it

3

I may be looking at it wrong, but I think the idea is that you should insert that entire block of code as the close button. You can do this by inserting a new rectangle element, removing the border/background styling, then choose Edit > Edit Element’s Inner HTML and pasting that code. Then clicking on it triggers the callSDK('close') method (though this errors as expected for me as the ad sdk/library needs to be included).

4

I also may have it wrong but it seems that the code is simply an SVG icon enclosed in a link tag so really (IMHO) it can be replaced. Also the SVG icon doesn't render well as a close icon in Hype.

5

I admit I did think it looked a little bizarre for a close indicate :slight_smile:! True - should be just as easy to use callSDK('close'); in any javascript action handler.

6

Hi DBear, is this how you write the function?

33
Screen Shot 2018-04-10 at 11.12.33.png1086×184 28.3 KB

7

Oops there is also a function for close… but replace download with close… I need to put the download callSDK for the CTA in our ad as well as a the close callSDK.

8

Looks fine :wink: Of course I’m not sure what you’re doing in your project but you would then choose whatever element you want to fire the “download” callSDK and then use Hype’s inspector to run this javascript function using whatever action you want. Assuming a “click”.

1 Like