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.

The template value is enclosed with backticks (also known as template literals) as a way for you to pass HTML into the script without escaping quotes.

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+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 ##backgroundColor## because some images and logos are transparent. If paired with ##image##, you should add padding around the image.

For best result on HD display, you need to scale down the image by 50% with CSS to maintain a high-resolution rendered quality.

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
`backgroundHoverColor`	The ad background color on hover
`ctaBackgroundColor`	Call to Action background color
`ctaBackgroundHoverColor`	Call to Action background color on hover
`ctaTextColor`	Call to Action text color
`ctaTextColorHover`	Call to Action text color on hover
`textColor`	The description font color
`textColorHover`	The description font color on hover