Wildfire APIs

Implementing Offer Showcase [BETA]

9min

Wildfire's Offer Showcase is meant to help partners create Offer Walls without needing to manipulate a bunch of JSON feeds reduce the number of APIs needed to successfully display offers to end users.
﻿
The Offer Showcase utilizes an NPM package with instructions on how to deploy the Offer Showcase from there. Reference this NPM package, but note that the user needs to have access before being able to review the document there. Contact your Client Success Associate if you are interested in this feature and do not yet have access.
NPM Package Prerequisites - Environment must have the following installed
NodeJS 16.12 or above
NPM Deployment Steps:
Step 1 - Install:
Terminal
npm install @wildlink/wf-offer-showcase
npm install @wildlink/wf-offer-showcase
﻿
Step 2 - Instantiate package with config:
JS
import { Config, WildfireOffers } from '@wildlink/wf-offer-showcase';

const config: Config = {
    appID: '100', //your app ID. This will be assigned by Client Success
    uuid: 'user-uuid', //your UUID for your user. If blank, logged out mode will occur
    jumpPage: false, //if true, jump page displays before sending user to merchant
    deviceID: '112233', //device ID you should pass from user
    mobileTile: true, //changes mobile view from tiles to rows
    options: { //these options apply to the main offer showcase view
      banner: {
        count: 3, //controls the # of slides for the carousel
      },
      formatA: {
        count: 30, //controls the # of featured offer tiles
      },
    },
    name: 'LifePotion', //name of your business for use on T&Cs
    splitRate: 0.5, //user share to display as part of overall commission you receive
    ctaText: {
      oneLiner: 'Up to %RATE% cash back', //adjustments to verbiage for 1 line offer titles
      twoLiner: ['Up to %RATE%', 'cash back'], //adjustments to verbiage for 2 line offer titles
    },
    authConfig: {
      nonAuthUrl: 'https://www.google.com', //users are redirected here when activating cash back with no auth information (UUID is blank)
      openNewTab: false, //determines if the nonAuthURL opens in a new tab (recommend same tab)
    },
};

//this wildfireOffers instance will also be needed
//later for the category dropdown logic
const wildfireOffers = new WildfireOffers(config);
import { Config, WildfireOffers } from '@wildlink/wf-offer-showcase';

const config: Config = {
    appID: '100', //your app ID. This will be assigned by Client Success
    uuid: 'user-uuid', //your UUID for your user. If blank, logged out mode will occur
    jumpPage: false, //if true, jump page displays before sending user to merchant
    deviceID: '112233', //device ID you should pass from user
    mobileTile: true, //changes mobile view from tiles to rows
    options: { //these options apply to the main offer showcase view
      banner: {
        count: 3, //controls the # of slides for the carousel
      },
      formatA: {
        count: 30, //controls the # of featured offer tiles
      },
    },
    name: 'LifePotion', //name of your business for use on T&Cs
    splitRate: 0.5, //user share to display as part of overall commission you receive
    ctaText: {
      oneLiner: 'Up to %RATE% cash back', //adjustments to verbiage for 1 line offer titles
      twoLiner: ['Up to %RATE%', 'cash back'], //adjustments to verbiage for 2 line offer titles
    },
    authConfig: {
      nonAuthUrl: 'https://www.google.com', //users are redirected here when activating cash back with no auth information (UUID is blank)
      openNewTab: false, //determines if the nonAuthURL opens in a new tab (recommend same tab)
    },
};

//this wildfireOffers instance will also be needed
//later for the category dropdown logic
const wildfireOffers = new WildfireOffers(config);
﻿
Note:
Script won't start running unless this method is invoked, the script has retry logic to look for DOM elements; however it is best to only invoke this method after DOM elements are loaded
﻿
Modifiable Config Settings
The NPM package contains a group of config settings that allow Wildfire Partners to control various behaviors of the Offer Showcase. Below is a table describing each config setting:
Config Setting
Type
Description
appID
number
The App ID you are provided for Offer Showcase by Wildfire
uuid
string
User's anonymized Unique Identifier used for tracking commission to the appropriate user when they click affiliate links. If this field is blank at runtime, the Showcase will be in "Logged-Out Mode"
jumpPage
﻿
boolean
If this setting is set to true, the jump/interstitial page will show up for a few seconds after the user clicks an activation CTA from the Offer Showcase
deviceID
number
IDs generated by calling Wildfire's DeviceAPI in order to assign one to a given end user
mobileTile
boolean
If this field is true, a different mobile UI will display when in responsive mode where only rows with merchant names / rates display. This is primarily a test case for Wildfire and early adopters.
options
object with multiple number configs
Contains the different Offer Showcase sections and a count of the number of tiles / offers that should display within each
name
string
Wildfire Partner Company's name to display in terms and conditions for offers
splitRate
number
Calculation for what rate to display to the end user. 1.0 would pass 100% of the partner's commission to the user as Cashback; 0.1 would pass 10% of the partners commission.
ctaText
object with multiple string configs
﻿
Configuration to adjust what text is displayed for the offer tile text e.g. "cashback" vs "Cash Back"
authConfig
object
nonAuthURL is the page the user is sent to if the user clicks an Offer Showcase tile, AND the UUID was not passed at runtime. openNewTab is a boolean setting that determines if this "Logged-Out" behavior opens in a new tab or on the same page.
﻿
Setting Up Offer Showcase Category Support
﻿
Package Types
Below are the types expected from the main package
JS
interface IWildfireOffers {
  init: () => void; //initialization - must call function to run package
  getCategories: () => Promise<ICategory[]>; //gets all available categories for use with render category drop-down/menu
  selectCategory: (category: ICategory) => void; //enables selection of a category
  deselectCategory: () => void; //enables de-selection of a category
}

export interface ICategory {
  CategoryID: number; //ID of category
  CategoryName: string; //name of category
  URL: string; //URL for category feed that allows cateogory offers to render
}
interface IWildfireOffers {
  init: () => void; //initialization - must call function to run package
  getCategories: () => Promise<ICategory[]>; //gets all available categories for use with render category drop-down/menu
  selectCategory: (category: ICategory) => void; //enables selection of a category
  deselectCategory: () => void; //enables de-selection of a category
}

export interface ICategory {
  CategoryID: number; //ID of category
  CategoryName: string; //name of category
  URL: string; //URL for category feed that allows cateogory offers to render
}
﻿
Package Interface
Type / Description
init: () => void;
Initialization - must call function to run package
getCategories: () => Promise<ICategory[]>;
Gets all available categories for use with render category drop-down/menu
selectCategory: (category: ICategory) => void;
This method has to be called once a user has selected a category in the UI
deselectCategory: () => void;
Provides a command for the UI to be able to clear category where the end user would then see the main offer showcase view again
CategoryID
Number; ID of a given category
CategoryName
Name of category - this can be overridden by the partner if the default category names don't align with their business
URL
URL of the JSON feed for the given category - partner will pass the whole object to the Wildfire code
﻿
﻿
Category Drop-Down Setup
This example will allow for the Offer Showcase categories to be displayed in a drop-down. Note that there are other solutions for this category display that a partner may decide to customize instead of using this direct example.
JS
const getCategories = async (): Promise<ICategory[]> => {
    try {
      //this wildfireOffers is the instance of WildfireOffers class instantiated from above
      const categories = await wildfireOffers.getCategories();
      if (!categories.length) throw new Error('Cannot fetch categories');
      return categories;
    } catch (error) {
      console.error('Error fetching categories');
      return [];
    }
  };
  
  const onCategorySelected = () => {
    //other logic goes here

    wildfireOffers.selectCategory(); //calls this
  }

  const onCategoryDeselected = () => {
    //other logic goes here

    wildfireOffers.deselectCategory();
  }
const getCategories = async (): Promise<ICategory[]> => {
    try {
      //this wildfireOffers is the instance of WildfireOffers class instantiated from above
      const categories = await wildfireOffers.getCategories();
      if (!categories.length) throw new Error('Cannot fetch categories');
      return categories;
    } catch (error) {
      console.error('Error fetching categories');
      return [];
    }
  };
  
  const onCategorySelected = () => {
    //other logic goes here

    wildfireOffers.selectCategory(); //calls this
  }

  const onCategoryDeselected = () => {
    //other logic goes here

    wildfireOffers.deselectCategory();
  }
﻿
﻿
Setting up DOM Elements
The script looks for DOM elements with the class wildfire-offer-wall to inject the offers into.
There are 2 types of offers
Other DOM elements can be added anywhere before, between or below any of the below elements
Text
//script will only inject offers into these divs, they can be wrapped
//in other DOM elements for styling purposes
<div class='wildfire-offer-wall' type='BANNER'></div>
<div class='wildfire-offer-wall' type='LOGO'></div>


//the script will inject offers into this div when a category is selected
<div class='wildfire-offer-wall-category'></div>
//script will only inject offers into these divs, they can be wrapped
//in other DOM elements for styling purposes
<div class='wildfire-offer-wall' type='BANNER'></div>
<div class='wildfire-offer-wall' type='LOGO'></div>


//the script will inject offers into this div when a category is selected
<div class='wildfire-offer-wall-category'></div>
﻿
﻿
Styling Customizations
Below are ways to add custom stylings to the offers wall UI. Please feel free to experiment with the classes since quite a lot can be modified each of them
Text
.wildfire-offer {
  font-family: "Poppins", sans-serif;
}
.wildfire-offer-button {
  // background-color: pink !important;
  // color: red !important;
  border-radius: 20px
}
.wildfire-offer-name   {

}
.wildfire-offer-rate-text {

}
.wildfire-mobile-rate-text {

}
.wildfire-logo-rate-text {

}
.wildfire-tile-rate-text {

}
.wildfire-banner-rate-text {

}
.wildfire-offer-card {
  // background-color: yellow !important;
  border-radius: 10px !important
}
.wildfire-offer-modal {
  border-radius: 10px !important
}
.wildfire-banner-indicator-active {
  // background-color: red !important
}
.wildfire-banner-indicator-inactive {
  // background-color: black !important
}
.wildfire-offer-help-button {
  fill: yellow !important
}
.wildfire-offer {
  font-family: "Poppins", sans-serif;
}
.wildfire-offer-button {
  // background-color: pink !important;
  // color: red !important;
  border-radius: 20px
}
.wildfire-offer-name   {

}
.wildfire-offer-rate-text {

}
.wildfire-mobile-rate-text {

}
.wildfire-logo-rate-text {

}
.wildfire-tile-rate-text {

}
.wildfire-banner-rate-text {

}
.wildfire-offer-card {
  // background-color: yellow !important;
  border-radius: 10px !important
}
.wildfire-offer-modal {
  border-radius: 10px !important
}
.wildfire-banner-indicator-active {
  // background-color: red !important
}
.wildfire-banner-indicator-inactive {
  // background-color: black !important
}
.wildfire-offer-help-button {
  fill: yellow !important
}
﻿
﻿

Config Setting	Type	Description
appID	number	The App ID you are provided for Offer Showcase by Wildfire
uuid	string	User's anonymized Unique Identifier used for tracking commission to the appropriate user when they click affiliate links. If this field is blank at runtime, the Showcase will be in "Logged-Out Mode"
jumpPage	boolean	If this setting is set to true, the jump/interstitial page will show up for a few seconds after the user clicks an activation CTA from the Offer Showcase
deviceID	number	IDs generated by calling Wildfire's DeviceAPI in order to assign one to a given end user
mobileTile	boolean	If this field is true, a different mobile UI will display when in responsive mode where only rows with merchant names / rates display. This is primarily a test case for Wildfire and early adopters.
options	object with multiple number configs	Contains the different Offer Showcase sections and a count of the number of tiles / offers that should display within each
name	string	Wildfire Partner Company's name to display in terms and conditions for offers
splitRate	number	Calculation for what rate to display to the end user. 1.0 would pass 100% of the partner's commission to the user as Cashback; 0.1 would pass 10% of the partners commission.
ctaText	object with multiple string configs	Configuration to adjust what text is displayed for the offer tile text e.g. "cashback" vs "Cash Back"
authConfig	object	nonAuthURL is the page the user is sent to if the user clicks an Offer Showcase tile, AND the UUID was not passed at runtime. openNewTab is a boolean setting that determines if this "Logged-Out" behavior opens in a new tab or on the same page.

Package Interface	Type / Description
init: () => void;	Initialization - must call function to run package
getCategories: () => Promise<ICategory[]>;	Gets all available categories for use with render category drop-down/menu
selectCategory: (category: ICategory) => void;	This method has to be called once a user has selected a category in the UI
deselectCategory: () => void;	Provides a command for the UI to be able to clear category where the end user would then see the main offer showcase view again
CategoryID	Number; ID of a given category
CategoryName	Name of category - this can be overridden by the partner if the default category names don't align with their business
URL	URL of the JSON feed for the given category - partner will pass the whole object to the Wildfire code

Updated 10 May 2024

Did this page help you?

Understanding merchant categories

Merchant Images