Fix double image request

Use official framework for the "custom" ad design integration.

2 files changed, 43 insertions, 72 deletions

diff --git a/docs/_templates/hacks.html b/docs/_templates/hacks.html
index 61252a5c..3af2e578 100644
--- a/docs/_templates/hacks.html
+++ b/docs/_templates/hacks.html
@@ -57,47 +57,54 @@
 
 <!-- Native CPC by BuySellAds -->
 
-<script src="{{ pathto('_static/', 1) }}/native.js"></script>
-<script>
-  _native.init("CK7D62JU", {
-    targetClass: 'native-js'
-  });
-</script>
+<script type="text/javascript" src="//m.servedby-buysellads.com/monetization.js"></script>
+
+<div id="native-ribbon">
+</div>
 
-<div class="native-js">
-  <div class="native-sponsor">Sponsored Ad by #native_company# — Learn More</div>
-  <a href="#native_link#" class="native-flex">
+<script>
+_bsa.init('custom', 'CK7D62JU', 'placement:pythonrequestsorg',
+    {
+      target: '#native-ribbon',
+      template: `
+<div class="native-sponsor">Sponsored by ##company## — Learn More</div>
+  <a href="##link##" class="native-flex">
     <style>
-      .native-js {
-        background: linear-gradient(-30deg, #native_bg_color#E5, #native_bg_color#E5 45%, #native_bg_color# 45%) #fff;
-      }
-
-      .native-details,
-      .native-sponsor {
-        color: #native_color# !important;
-      }
-
-      .native-details:hover {
-        color: #native_color_hover# !important;
-      }
-
-      .native-cta {
-        color: #native_cta_color#;
-        background-color: #native_cta_bg_color#;
-      }
-
-      .native-cta:hover {
-        color: #native_cta_color_hover;
-        background-color: #native_cta_bg_color_hover#;
-      }
+    #native-ribbon #_custom_ {
+      background: linear-gradient(-30deg, ##backgroundColor##E5, ##backgroundColor##E5 45%, ##backgroundColor## 45%) #fff;
+    }
+
+    .native-details,
+    .native-sponsor,
+    .native-bsa {
+      color: ##textColor## !important;
+    }
+
+    .native-details:hover {
+      color: ##textColorHover## !important;
+    }
+
+    .native-cta {
+      color: ##ctaTextColor##;
+      background-color: ##ctaBackgroundColor##;
+    }
+
+    .native-cta:hover {
+      color: ##ctaTextColorHover##;
+      background-color: ##ctaBackgroundColorHover##;
+    }
     </style>
     <div class="native-main">
-      <img class="native-img" src="#native_logo#">
+      <img class="native-img" src="##logo##">
       <div class="native-details">
-        <span class="native-company">#native_title#</span>
-        <span class="native-desc">#native_desc#</span>
+        <span class="native-company">##title##</span>
+        <span class="native-desc">##description##</span>
       </div>
-      <span class="native-cta">#native_cta#</span>
     </div>
+    <span class="native-cta">##callToAction##</span>
   </a>
 </div>
+`
+    }
+  );
+</script>
diff --git a/docs/_templates/sidebarintro.html b/docs/_templates/sidebarintro.html
index 6bfc5cef..a97483b7 100644
--- a/docs/_templates/sidebarintro.html
+++ b/docs/_templates/sidebarintro.html
@@ -69,41 +69,5 @@
   <li><a href="http://es.python-requests.org/">Spanish</a></li>
 </ul>
 
-<div class="native-js">
-  <div class="native-sponsor">Sponsored by #native_company# — Learn More</div>
-  <a href="#native_link#" class="native-flex">
-    <style>
-      .native-js {
-        background: linear-gradient(-30deg, #native_bg_color#E5, #native_bg_color#E5 45%, #native_bg_color# 45%) #fff;
-      }
-
-      .native-details,
-      .native-sponsor,
-      .native-bsa {
-        color: #native_color# !important;
-      }
-
-      .native-details:hover {
-        color: #native_color_hover# !important;
-      }
-
-      .native-cta {
-        color: #native_cta_color#;
-        background-color: #native_cta_bg_color#;
-      }
-
-      .native-cta:hover {
-        color: #native_cta_color_hover;
-        background-color: #native_cta_bg_color_hover#;
-      }
-    </style>
-    <div class="native-main">
-      <img class="native-img" src="#native_logo#">
-      <div class="native-details">
-        <span class="native-company">#native_title#</span>
-        <span class="native-desc">#native_desc#</span>
-      </div>
-    </div>
-    <span class="native-cta">#native_cta#</span>
-  </a>
+<div id="native-ribbon">
 </div>