BrightOffers Integration Guide

Campaign Name: Concussion SMS > Offer Wall > Auto Insurance Traffic

Campaign Key: f986381c3287-0b7e-7182-4e67-449f-883b5159

Affiliate: Bright Horizons Media (TEST ACCOUNT) (2)

Note: The creative(s) displayed below were designed to match the look and feel of your site while leveraging the CSS on your site. Since we can not load your CSS here in this integration, rest assured that the creative(s) will adjust (look better) when integrated on your page(s).

Implementing BrightOffers

Only 2 simple steps are needed to allow BrightOffers to deliver offers on your pages.

Step 1: Placing the BrightOffers HTML Code

Copy/paste the code directly below into your page(s) where you want BrightOffers to display offers.

Step 2: Placing the BrightOffers JavaScript Code

Copy/paste the code directly at the bottom of your page(s) right before the closing </body> tag.

Pre-popping

Included below is JavaScript that allows you to pre-pop offers to help increase conversion rates. Simply replace the placeholders and the surronding brackets with the consumer information. If you choose not to leverage pre-popping, you can simply omit the additional JavaScript (which begins with START BRIGHTOFFERS PRE-POP and ends with END BRIGHTOFFERS PRE-POP).

Pre-popping the consumer information through the Javascript can significantly improve conversion rates—and ultimately the revenue generated. In cases where you do not have all the consumer information, just pass empty values.
If you need to pass a transaction/click id to be passed back through your postback, bhm_sub1 or bhm_sub2 can be used. Please discuss with your Account Manager.

Custom Parameters

Custom parameters let you, as the publisher, send extra information to BrightOffers so the system can more effectively target offers, improving both performance and monetization. Your Account Manager will help determine which parameters to include, along with their parameter names and value types. All custom parameters must: begin with "bhm_", use only lowercase letters and use underscores to separate words. Examples of commonly used parameters include (but are not limited to): bhm_employment_type, bhm_debt_amount, bhm_credit_rating and bhm_rent_own.

Include the section of code only one time on your page. Even if we have provided multiple campaigns for one page, include the code below only once

<script type="text/javascript">
var bhm_firstname = "[INSERT_FIRSTNAME]";
var bhm_lastname = "[INSERT_LASTNAME]";
var bhm_phone = "[INSERT_PHONE]";
var bhm_email = "[INSERT_EMAIL]";
var bhm_dob = "[INSERT_DOB]"; // YYYY-MM-DD format
var bhm_address = "[INSERT_ADDRESS]";
var bhm_city = "[INSERT_CITY]";
var bhm_state = "[INSERT_STATE]";
var bhm_zip = "[INSERT_ZIP]";
var bhm_monthly_income = "[INSERT_MONTHLY_INCOME]";
var bhm_sub1 = "[INSERT_SUB1]";
var bhm_sub2 = "[INSERT_SUB2]";
var bhm_sub3 = "[INSERT_SUB3]";
var bhm_sub4 = "[INSERT_SUB4]";
</script>

<script src="https://get.brightoffers.io/js/get.min.js"></script>

Step 3: Styling

Option #1: If your team is able to handle adding styling to the ads to match and look and feel of your site, below is the general structure of how ads may be displayed on your pages.

Notes:

BrightOffers returns some basic styling but you can easily override any styling by including your CSS after the #bhm-offer element.
Additional data attributes and inline styles may be returned but are excluded below.
If an alement has a class, it means there may be one or more of those elements returned.
Elements with id unique and you will only find one element with that id.
Depending on the setup, you may find that one or more elements below are not found; thats ok and is to be expected.

Option #2: If you need assistance the styling of the ads that are returned, simply reach out to your Account Manager and we'll handle everything for you.

Staging and Production URLs

Best Practices

Loading BrightOffers Efficiently

To ensure BrightOffers loads quickly and reliably:

Place the BrightOffers <script> tag directly in your HTML, not inside a tag manager.
Avoid wrapping the BrightOffers <script> in setTimeout, scroll listeners, or other delayed loaders.
Do not block the script behind additional custom conditions unless required for compliance (e.g., consent tools).

JavaScript & CSS Best Practices

To avoid performance issues and CSS conflicts:

Vendor Libraries

Use the same CDN source whenever possible for vendor libraries such as Bootstrap and jQuery
Example: use https://cdn.jsdelivr.net/ for all dependencies
Host resources on your server to avoid additional DNS lookups
Load vendor libraries (jQuery, Bootstrap) BEFORE your own scripts that depend on them
BrightOffers does not have jQuery or Bootstrap as a dependency

Custom Styling

BrightOffers delivers default CSS styling for all ad units and creatives. However, you have full control to override these styles with your own custom CSS.

To add custom styling:

Place your custom CSS code AFTER the .bhm-offer container in your HTML
Your styles will override BrightOffers' default styling due to CSS cascade specificity
Note: BrightOffers uses nested SCSS for its default styling, which creates very specific CSS selectors. You may need to use equally specific selectors or higher specificity to override default styles.

Best Practices for Custom Styling:

Use specific selectors to avoid unintended style conflicts
Test thoroughly across different ad unit types (Mini-Path, Offer Wall, Path-Wall)
Consider mobile responsiveness when adding custom styles
Avoid using !important unless absolutely necessary

Performance Hint: Defer tag and Preconnect

For the fastest display of BrightOffers content, we recommend not using defer on the script tag. This allows BrightOffers to start loading and rendering offers as soon as possible. If your page is very script-heavy and you prefer to keep defer for layout reasons, you can still use:

To help the browser establish a faster connection to BrightOffers, add the following tags inside your <head>:

Additionally, consider adding preconnects for other vendor libraries (Bootstrap, jQuery, Google Fonts, etc.) you include from third-party CDNs. These hints allow the browser to start the DNS lookup, TLS handshake, and connection to BrightOffers earlier, which can reduce the time it takes for BrightOffers content to appear.

Multiple Placements

Use a separate .bhm-offer container for each campaign. (You will be provided one integration doc for each campaign.)
Do not place BrightOffers containers inside elements that are permanently hidden (display: none) or removed from the DOM.
BrightOffers can find multiple campaigns on the page so the BrightOffers JavaScript only needs to be included once on a page.

Preventing Google AdSense Conflicts

Important: If you use Google AdSense auto ads or any automated ad insertion, you must exclude BrightOffers containers to prevent ads from appearing within the BrightOffers campaigns.

Why this matters: Auto-inserted ads within BrightOffers campaigns can disrupt the user experience, break campaign layouts, and interfere with tracking pixels. This exclusion ensures clean, professional presentation of offers.

Quick Integration Checklist

✅ Submit your Staging and Production URLs above.
✅ Ensure that the BrightOffers JavaScript code is placed on the page only once.
✅ A .bhm-offer container is present in the correct location on the page.
✅ Preconnect to BrightOffers is configured in <head>.
✅ The BrightOffers <script> is in the HTML, not delayed by tag managers, custom timeouts or the defer tag (unless necessary).
✅ (Optional but recommended) Only one CDN source is used (if applicable) for third-party vendor scripts.
✅ Remove any code that unintentionally blocks or delays the BrightOffers code and images.