Custom Templates

Quickly design your own ad template to more closely match the design of your site.

Custom templates allow you to design an ad unit by using the values returned from the API. It works similarly to the quickstart template integration, except you also pass an HTML template into the ad tags.

1. Load monetization.custom.js#

Monetization.js is the base framework with everything you will need (including the custom template features) and it is 67KB. If you are not using other quickstart templates, you can load the base framework and the custom template features only by using monetization.custom.js which is only 16KB. Simply copy and paste the JavaScript code below into the <head> tag of your website:

<script
  src="//m.servedby-buysellads.com/monetization.custom.js"
  type="text/javascript"
></script>

2. Create a target element where the ad will get injected#

Best practice is to use a unique id for this element like so:

<div id="badge-js"></div>

3. Initiate the ad script with your own `zonekey` and include the custom template:#

<script>
  ;(function () {
    if (typeof _bsa !== 'undefined' && _bsa) {
      _bsa.init('custom', 'CWYDC2QE', 'placement:demo', {
        target: '#badge-js',
        template: `

<style>
.bsa__##external_id## {
	background-image: linear-gradient(145deg, ##backgroundColor##, 90%, ##backgroundColor##80),
		linear-gradient(##textColor## 1px, transparent 0),
		linear-gradient(90deg, ##textColor## 1px, transparent 0);
	background-color: ##backgroundColor##;
}
</style>

<a class="badge-container bsa__##external_id##" style="background-color: ##backgroundColor##; color: ##textColor##; border-color: ##textColor##" href="##link##" rel="sponsored noopener" target="_blank" title="##company## — ##tagline##">
<img class="badge-icon" style="background-color: ##backgroundColor##" src="##image##">
<div class="badge-flex">
	<div class="badge-title">##company## — ##tagline##</div>
	<div class="badge-description">##description##</div>
	<img class="badge-logo" src="##logo##">
	<div class="badge-cta" style="background-color: ##ctaBackgroundColor##; color: ##ctaTextColor##">##callToAction##</div>
</div>
</a>
<a class="badge-ad-via" title="ad via BuySellAds" style="background-color: ##textColor##; color: ##backgroundColor##" href="##ad_via_link##">Ads via BuySellAds</a>
`,
      })
    }
  })()
</script>

View our Collection of Custom Templates on CodePen

You'll notice that there are syntaxes enclosed with double hashtags ## in the template. These are the values that render the ad title, description, and colors which you can use to design the ad.

Template Variables#

We package a variety of creative assets to help you design a unique and well integrated format for your implementation. Below is a list of all of the standard variables we provide via the API.

Strings#

Variable	Description
`description`	The main description of the ad. Example: "All the tools your team needs in one place. Slack: Where work happens."
`callToAction`	Call to action, for example "Learn More"
`company`	The company name that runs the ads. Example: "Slack"
`tagline`	Company tagline. Example: "Where work happens"
`statlink`	The URL the user should be directed to on click

Images#

We recommend pairing each image with ##backgroundColor## because some images and logos are transparent. If paired with ##image##, you should add padding around the image.

Variable	Dimension (Pixels)
`image`	80 × 80
`logo`	250 × 100

Colors#

All of the color values returned are in hex code format. For example #8CC252.

Variable	Description
`backgroundColor`	The ad background color
`ctaBackgroundColor`	Call to Action background color
`ctaTextColor`	Call to Action text color
`textColor`	The description font color

Need help with your integration? Contact supportView source