Enhance your React app by integrating our advertising widget. The Uptick React Web SDK provides a single component, UptickFlow, that loads our web SDK and renders an offer flow. It takes the same parameters as the
Web Integration
, and the same props as the
React Native SDK
. It works in any React app that runs in a browser or a WebView, including Capacitor and Ionic apps.
Building with React Native? See React Native SDK .
openUrl prop and the React reporting rely on. Ask your Uptick contact if you are not sure which version your integration uses.
The SDK is published to npm as @uptick-ads/react-web-sdk.
npm install @uptick-ads/react-web-sdk
There is no script tag to add: the component loads your integration’s script itself. If your app still has the uptick-script tag or the hand-written UptickFlow component from our earlier React guide, remove them.
Import UptickFlow and render it where offers should appear, usually on the order confirmation page. The integrationId is the ID assigned to your integration, and the placement identifies the page type.
import { UptickFlow } from "@uptick-ads/react-web-sdk"; <UptickFlow integrationId="AAAAAAAA-BBBB-CCCC-DDDD-EEEEEEEEEEEE" placement="order_confirmation" first_name="Reggie" total_price="49.99" shipping_price="9.99" order_id="12345" />
Whether offers render inline or as a popup is configured by the Uptick offers team on your integration, per placement, so place UptickFlow where an inline offer belongs and we can switch between the two without a change to your app.
| Prop | Default | Purpose |
|---|---|---|
integrationId |
required | Your integration’s public ID |
placement |
order_confirmation |
checkout, order_confirmation or order_status - see
Placement Types
|
callback |
(event, data), called with the flow’s events - see
Tracking Uptick Events
|
|
openUrl |
window.open |
How accepted offers open. Supply your own to use an in-app browser |
host |
uptick.com |
Uptick domain, only for testing against other environments |
Flow parameters are passed as flat props and use the same names as the web integration. All values are strings. Props outside this list are not forwarded to the SDK or to the page.
We strongly recommend passing the following props to improve performance through better personalization of offers:
first_name: The first name of the person receiving the offer, used for personalization
total_price: Total price of the order
shipping_price: Just the shipping price of the order
order_id: The merchant’s order confirmation number or order ID
Site
site_id: If you have unique site identifiers, you can use this instead of the domain.
User
customer_id: A unique identifier for the customer. This can be very useful for things like frequency capping
first_name: The first name of the person receiving the offer
locale: The customer’s locale
Order
order_id: The order id received for the transaction
order_name: The order name or number shown to the customer, if it differs from order_id
payment_method: What payment method was used such as: paypal, venmo, credit_card, etc.
currency: The currency of the transaction using the 3-digit ISO code
total_price: Total price of the order
shipping_price: Just the shipping price of the order
discount: Whether the order had a discount, "true" or "false". Pass the flag, not the discount amount or code
zip: The customer’s postal code
province: The customer’s state or province
country_code: The customer’s country as a 2-letter ISO code
Each mount of UptickFlow starts its own flow, and a new flow starts when integrationId, placement or order_id changes. A customer who places a second order in the same session sees offers again, as long as the new order has a new order_id.
Other props are read when the flow starts, so changing them later does not restart it. When the component unmounts it empties its container and stops sending events.
To show offers after a later event, such as a click or a payment confirmation, render UptickFlow only once that event happens. Call preloadUptick when the page loads so the script has already downloaded by then.
import { useEffect, useState } from "react"; import { UptickFlow, preloadUptick } from "@uptick-ads/react-web-sdk"; const INTEGRATION_ID = "AAAAAAAA-BBBB-CCCC-DDDD-EEEEEEEEEEEE"; function OrderConfirmation({ order }) { const [showOffers, setShowOffers] = useState(false); useEffect(() => { preloadUptick({ integrationId: INTEGRATION_ID }); }, []); return ( <> <button onClick={() => setShowOffers(true)}>See your rewards</button> {showOffers && <UptickFlow integrationId={INTEGRATION_ID} order_id={order.id} total_price={order.total} />} </> ); }
preloadUptick takes the same integrationId and host as the component. It only loads the script: nothing renders until UptickFlow mounts.
When a user accepts an offer, the SDK opens the advertiser’s page in a new tab with window.open and the flow continues to the next offer. To open accepted offers some other way, pass an openUrl function. The SDK calls it with the URL instead of window.open and continues in the same way.
You can include a callback if you want to track the events within the flow. This can be useful to inform internal analytics about the performance. The events and their payloads are the same as the web integration.
const callback = (event, data) => { // You're going to see events like: // - init // - flow_initialized // - flow_delayed // - offer_requested // - offer_viewed // - offer_accepted // - offer_rejected // - flow_complete console.log(event, data); }; <UptickFlow integrationId="AAAAAAAA-BBBB-CCCC-DDDD-EEEEEEEEEEEE" placement="order_confirmation" callback={callback} />
In addition to the web SDK events, the component reports:
script_error: { src } when the integration’s script fails to load. Nothing renders, and the next mount tries again
open_url_failed: { url, message } when the promise returned by openUrl rejects
Capacitor runs your web app inside the phone’s WebView, so use this package rather than the React Native SDK.
By default Capacitor opens window.open links in the system browser. To open accepted offers in an in-app browser instead, pass openUrl with
@capacitor/browser
:
import { Browser } from "@capacitor/browser"; <UptickFlow integrationId="AAAAAAAA-BBBB-CCCC-DDDD-EEEEEEEEEEEE" placement="order_confirmation" order_id={order.id} openUrl={(url) => Browser.open({ url })} />
Capacitor serves your app from capacitor://localhost on iOS and https://localhost on Android, so that is the page address offers in the app load from.
A working Capacitor app for iOS and Android is in the
capacitor example
.
Note:
integrationId prop contains an ID (AAAAAAAA-BBBB-CCCC-DDDD-EEEEEEEEEEEE). Ensure that you replace this with the correct ID assigned to your integration. Using an incorrect or generic ID will lead to unsuccessful widget activation.
Troubleshooting Tips:
callback receives script_error when the integration’s script cannot load.
order_id.