Using SDK Components

the appstorys react web sdk includes prebuilt react components for every supported campaign type after you initialize the sdk and track a screen, these components automatically subscribe to the sdk state, fetch eligible campaigns, and render them in your application you do not need to build campaign uis yourself mount the sdk components once, and appstorys manages when each campaign appears based on dashboard configuration and targeting rules importing components import { story, banner, pip, floater, widget, tooltip, bottomsheet, survey, csat, modal, trackable, } from '@appstorys/react web'; import only the components required by your product all sdk components except widget and trackable require no props, and each one renders null whenever no eligible campaign exists for the active screen widget component widget is the only campaign component that optionally accepts props interface widgetprops { position? string; } use position when placing more than one widget on the same screen — see dom integration docid\ awwrmfej37hnsmcstkzzl for how host elements are matched the trackable helper some elements can't easily be given a custom id or data attribute — for example, a third party component that doesn't forward extra props to its root element wrap it in \<trackable> instead; it adds the identifier via a wrapper with no effect on your layout import { trackable } from '@appstorys/react web'; \<trackable id="checkout button"> \<thirdpartybutton>checkout\</thirdpartybutton> \</trackable> rendering components mount sdk components once near the root of your application — typically inside your top level app component keep them mounted throughout the application's lifetime when navigation occurs, call appstorys trackscreen( ) instead of remounting components production example react import { useeffect } from 'react'; import { appstorys, story, banner, pip, floater, widget, tooltip, bottomsheet, survey, csat, modal, } from '@appstorys/react web'; function app() { useeffect(() => { const setup = async () => { await appstorys initialize({ appid 'add your app id', accountid 'add your account id', navigatetoscreen (screen) => navigatetoscreen(screen), }); await appstorys trackscreen('home screen'); }; setup(); }, \[]); const navigatetoscreen = (name) => { // your navigation logic }; return ( <> {/ your application ui /} \<main> {/ pages / routes /} \</main> {/ mount appstorys sdk components once /} \<story /> \<banner /> \<pip /> \<floater /> \<widget /> \<tooltip /> \<bottomsheet /> \<survey /> \<csat /> \<modal /> \</> ); } export default app; overlay campaigns such as tooltips, bottom sheets, surveys, modals, and csat should be mounted high in the component tree so they can render above the rest of your application ui