How To Add Banner

[guybower1]

Hi

I’d like to add a hotel booking banner to a global block so I can add it on select pages. I was wondering what the best way to do this was. I tried it in a content area and nothing showed in the preview.

Here is the code supplied by Agoda, but just curious as to where best to add it so I can adjust the width to match screen size.

<div id="adgshp909915700"></div>
<script type="text/javascript" src="//cdn0.agoda.net/images/sherpa/js/init-dynamic_v8.min.js"></script><script type="text/javascript">
var stg = new Object(); stg.crt="5960744546341";stg.version="1.05"; stg.id=stg.name="adgshp909915700"; stg.Width="728px"; stg.Height="90px";stg.RefKey="yYmmba6ny5f7KHYjvMH+ag==";stg.AutoScrollSpeed=5000;stg.AutoScrollToggle=true;stg.SearchboxShow=false;stg.DiscountedOnly=false;stg.Layout="widedynamic"; stg.Language="en-us";stg.ApiKey="00000000-0000-0000-0000-000000000000";stg.Cid="1759773";  stg.City="17019";stg.Currency="THB";stg.OverideConf=false; new AgdDynamic('adgshp909915700').initialize(stg);
</script>

Thanks in advance

[jade]

Hello @guybower1,

Please try adding the code in a Raw Content element. I tried this in my setup and it works fine:

Hope this helps.

[guybower1]

Thanks so much Jade. Yes, seems a much better option. I actually stacked 2 of the banners together, but it is odd, they don’t align, as you can see from this image

One is slightly offset, as you can see, yet the divs they are both in are the same: Here is the full code

<div style="position: relative; /*or static*/; width: 50%; height: 90px; margin: 0 auto"><div id="adgshp909915700"></div></div>
<p><script type="text/javascript" src="//cdn0.agoda.net/images/sherpa/js/init-dynamic_v8.min.js"></script><script type="text/javascript">
var stg = new Object(); stg.crt="5960744546341";stg.version="1.05"; stg.id=stg.name="adgshp909915700"; stg.Width="728px"; stg.Height="90px";stg.RefKey="yYmmba6ny5f7KHYjvMH+ag==";stg.AutoScrollSpeed=5000;stg.AutoScrollToggle=true;stg.SearchboxShow=false;stg.DiscountedOnly=false;stg.Layout="widedynamic"; stg.Language="en-us";stg.ApiKey="00000000-0000-0000-0000-000000000000";stg.Cid="1759773";  stg.City="17019";stg.Currency="THB";stg.OverideConf=false; new AgdDynamic('adgshp909915700').initialize(stg);
</script></p>

<div style="position: relative; /*or static*/; width: 50%; height: 90px; margin: 0 auto">
<ins class="bookingaff" data-aid="2002210" data-target_aid="2002210" data-prod="banner" data-width="728" data-height="90" data-lang="en">
    <!-- Anything inside will go away once widget is loaded. -->
        <a href="//www.booking.com?aid=2002210">Booking.com</a>
</ins></div>
<script type="text/javascript">
    (function(d, sc, u) {
      var s = d.createElement(sc), p = d.getElementsByTagName(sc)[0];
      s.type = 'text/javascript';
      s.async = true;
      s.src = u + '?v=' + (+new Date());
      p.parentNode.insertBefore(s,p);
      })(document, 'script', '//aff.bstatic.com/static/affiliate_base/js/flexiproduct.js');
</script>

Any thoughts what is causing the offset? Both banners are 728px x 90px

Thanks again

[friech]

Hi @guybower1,

Please provide us the direct URL of the page where we can see the issue, I don’t see that ads on your /food-tours/ page.

Did you check that on mobile? hows that look on mobile? Try just having the raw code from Agoda and booking.com, no custom CSS, and place them on a separate Content Area element. Then use the Flexbox option of the Column to center both.

• 
  
  
  

Thanks,

[guybower1]

Hi Friech

Thanks for getting back to me.

At the moment it isn’t up anywhere. It was a global block which mysteriously vanished from our site. Only the shortcode [cs_global_blocks block="10262"] is still visible now, so I am trying to recreate it.

If you wish to see where the shortcode is, the url is feastthailand.com/food-tours/ and all of the tours listed on that page also have the same issue

Yes, I think your suggestion works well. When I first brought the code in, the Agoda one appeared on the left, so I wrapped it in a <div> to centre it, but I just tried using only the raw code and then using the flexbox to centre it and it seems to have worked fine for making it all centred. Just wasn’t that familiar with using flexboxes

I guess my only concern is that the raw content doesn’t appear to shrink at different screen widths, with it too large and cropped at smaller sizes. I will get it up at the staging server first and see how to get it responsive down to mobile devices.

Thanks again for your help

Regards

[ruenel]

You’re welcome!
We’re glad we were able to help you out.