Enhance your react site by seamlessly integrating our advertising widget. The setup is quick and consists of two core steps. By following this guide, you can embed the widget and showcase targeted advertising to your audience.
<script type="module"> const target = document.head || document.body; const script = document.createElement("script"); script.type = "text/javascript"; script.src = "https://app.uptick.test/i/places/AAAAAAAA-BBBB-CCCC-DDDD-EEEEEEEEEEEE/offers.js"; script.async = 1; script.src += "?async=true" script.id = "uptick-script"; target.appendChild(script); </script>
Create a new component in your application that will render ads when it’s rendered. This can be called uptick-flow.js
.
import React, { useEffect, useRef } from "react"; let isUptickInitialized = false; export default function Uptick({ children, ...properties }) { const elementRef = useRef(null); useEffect(() => { if (!isUptickInitialized) { (async () => { await new Promise((resolve) => { window.uptick ? resolve() : document.getElementById("uptick-script").addEventListener("load", () => resolve()); }); window.uptick("init", elementRef.current, properties); })(); isUptickInitialized = true; } }, [properties]); return ( <div ref={elementRef} {...properties} /> ) }
To show the Uptick Widget, import the previously created component and render it in your application.
import UptickFlow from '../uptick-flow';
When you render the component itself, make sure to include the placement key. This key is used to identify the location where the widget should be rendered.
<UptickFlow placement="order_confirmation" />
There are additional parameters you can include as well to customize the widget. These parameters are passed as props to the UptickFlow component.
$4.99
with the currency symbol included.Note:
Troubleshooting Tips:
If you encounter any layout disruptions, confirm that you’ve placed the script tag correctly and used the appropriate integration ID.
Ensure that no other scripts or styles on your page conflict with our widget’s functionality. If the issue persists, reach out to our technical support team for further assistance.