Monetization Framework

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>

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

VariableDescription
descriptionThe main description of the ad. Example: "All the tools your team needs in one place. Slack: Where work happens."
callToActionCall to action, for example "Learn More"
companyThe company name that runs the ads. Example: "Slack"
taglineCompany tagline. Example: "Where work happens"
statlinkThe URL the user should be directed to on click

Images

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

VariableDimension (Pixels)
image80 × 80
logo250 × 100

Colors

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

VariableDescription
backgroundColorThe ad background color
ctaBackgroundColorCall to Action background color
ctaTextColorCall to Action text color
textColorThe description font color