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


Step 2 - Instantiate package with config:

JS


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


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




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




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