Enhance your site by seamlessly integrating our advertising widget. The setup is quick and consists of two core steps. By following these guidelines, you can embed our widget and showcase targeted advertising to your audience.
Uptick supports many placement types to display offers at different points in the customer journey, including:
See the Placement Types section below for detailed implementation guidance for each placement.
The initial step involves setting a placeholder where the advertising widget will appear. Utilize the following HTML snippet to designate the widget’s position on your page:
<div id="uptick-offers" data-uptick-target="content" class="uptick-target section"></div>
For Styling: To ensure a seamless appearance that complements your site’s design, we advise enhancing the HTML snippet with any additional classes that might help. The offer HTML will render inside this div.
Our integration is designed to be as minimal as possible in order to ensure the best performance for your users. Add this script tag on your page in the <head> section before other third-party integrations.
<script type="module"> window.UptickScript = new Promise((resolve, reject) => { const target = document.head || document.body; const script = document.createElement("script"); script.id = "uptick-script"; script.type = "text/javascript"; script.async = true; script.src = "https://app.uptick.com/i/places/AAAAAAAA-BBBB-CCCC-DDDD-EEEEEEEEEEEE/offers.js"; script.src += "?path=" + encodeURIComponent(window.location.pathname); script.src += "&async=true" script.addEventListener('load', () => resolve()); script.addEventListener('error', (error) => reject(error)); target.appendChild(script); }); </script>
Troubleshooting Tips:
The next step is to activate the offer flow. By default this is done as soon as the script is loaded. If you need this to activate on another event you can modify the function below to achieve that.
<script type="module"> await window.UptickScript; const target = document.getElementById("uptick-offers"); window.uptick( "init", target, { placement: "order_confirmation", first_name: "Reggie", total_price: "$49.99", shipping_price: "$9.99", order_id: "12345" } ) </script>
While only placement is required, we strongly recommend including the following parameters to improve performance through better personalization of offers:
{ placement: "order_confirmation", first_name: "Reggie", total_price: "$49.99", shipping_price: "$9.99", order_id: "12345" }
placement: The page type where offers are displayed (e.g., "checkout", "order_confirmation", or "order_status") - see
Placement Types
for details
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 order confirmation number, or alternatively the order id, from your system
You may also specify additional optional parameters. See the full parameter list below for all available options.
Site
placement: The page type ("checkout", "order_confirmation", or "order_status") - see
Placement Types
required
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 very useful for things like frequency capping
first_name: The first name of the person receiving the offer
Order
order_id: The order id received for the transaction
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
The placement parameter determines where and when offers are displayed in your customer’s journey. Choose the appropriate placement based on the page type where you’re integrating Uptick.
Use the checkout placement to display pre-purchase offers during the checkout flow, before the customer completes their order. This placement is ideal for showing offers above payment options.
When to use: On checkout pages where customers enter payment and shipping information, before they click “Place Order” or complete payment.
Key difference from order_confirmation: The checkout placement shows offers before purchase completion, while order_confirmation shows offers after the purchase is complete.
window.uptick( "init", target, { placement: "checkout", first_name: "Reggie", total_price: "$49.99", shipping_price: "$9.99", customer_id: "cust_12345" } )
Recommended parameters for checkout:
placement: Must be "checkout"
first_name: Customer’s first name for personalization
total_price: Current cart total
shipping_price: Shipping cost
customer_id: Unique customer identifier for frequency capping
Use the order_confirmation placement to display post-purchase offers on thank you and receipt pages. This is the most common placement and shows offers immediately after a customer completes their purchase.
When to use: On order confirmation pages, thank you pages, and receipt pages displayed after successful checkout.
Key difference from checkout: The order_confirmation placement shows offers after purchase completion, when the customer has already committed to their order.
window.uptick( "init", target, { placement: "order_confirmation", first_name: "Reggie", total_price: "$49.99", shipping_price: "$9.99", order_id: "12345" } )
Recommended parameters for order_confirmation:
placement: Must be "order_confirmation"
first_name: Customer’s first name for personalization
total_price: Final order total
shipping_price: Shipping cost
order_id: Your system’s order confirmation number
Use the order_status placement to display offers on order tracking and status pages. This placement targets customers who return to check on their order delivery status.
When to use: On order tracking pages, shipment status pages, and any page where customers check the progress of their existing orders.
Key difference from order_confirmation: The order_status placement is for returning customers checking on existing orders, while order_confirmation is shown immediately after the initial purchase.
window.uptick( "init", target, { placement: "order_status", first_name: "Reggie", order_id: "12345", customer_id: "cust_12345" } )
Recommended parameters for order_status:
placement: Must be "order_status"
first_name: Customer’s first name for personalization
order_id: The order being tracked
customer_id: Unique customer identifier for frequency capping
placement parameter is the only required field. However, including the recommended parameters significantly improves offer personalization and performance.
You can include a JavaScript callback when initializing the flow if you want to track the events within the flow. This can be useful to inform internal analytics about the performance
const callback = function(event, data) { // If needed, process custom event data here // // You're going to see events like: // - flow_initialized // - flow_delayed // - offer_requested // - offer_viewed // - offer_accepted // - offer_rejected // - flow_complete console.log(event, data); } window.uptick( "init", target, { placement: "order_confirmation" }, callback )