Initialize the SDK

initialize the sdk once when your application starts this is typically done in your root component (such as app tsx), using react's useeffect hook during initialization, provide the app id and account id supplied by the appstorys team optionally pass a user id to associate sdk activity with a specific user in your application react import { useeffect } from 'react'; import { appstorys, story, banner, tooltip } from '@appstorys/react web'; function app() { useeffect(() => { const initsdk = async () => { await appstorys initialize({ appid 'add your app id', accountid 'add your account id', userid 'add your user id', navigatetoscreen (screen) => { navigatetoscreen(screen); }, }); }; initsdk(); }, \[]); const navigatetoscreen = (name) => { // your navigation logic, e g navigate(`/${name}`) }; return ( <> {/ your existing page content /} {/ mount once — render nothing until a matching campaign exists /} \<story /> \<banner /> \<tooltip /> \</> ); } export default app; parameters field type required description appid string yes issued by the appstorys team identifies your application accountid string yes issued by the appstorys team identifies your application userid string no your identifier for the current user omit for anonymous visitors—see below navigatetoscreen (screen string) => void no called by the sdk when a campaign needs to send the visitor to another screen wire this to your router anonymous user support if the user has not signed in when the sdk initializes, you can omit userid the sdk automatically creates and persists an anonymous user once the user logs in or their identifier becomes available, call initialize() again using the same appid and accountid along with the new userid — the sdk automatically reconciles the anonymous profile with the identified user await appstorys initialize({ appid 'add your app id', accountid 'add your account id', userid 'user id', navigatetoscreen (screen) => { navigatetoscreen(screen); }, }); how screen navigation works the sdk uses a callback based navigation mechanism to handle screen transitions triggered by campaigns provide a navigation callback by passing navigatetoscreen when initializing the sdk when a visitor interacts with a campaign that requires navigation, the sdk invokes that callback with the target screen name — route it using your own router pausing and resuming the sdk to temporarily stop appstorys activity—for example, during a checkout flow — read or set visibility directly appstorys visibility = false; // pause appstorys visibility = true; // resume if initialization fails an invalid app id or account id does not throw an error from initialize() itself check your browser console for "appstorys initialization failed" and confirm your credentials with the appstorys team trackscreen(), trackevent(), and setuserproperties() all wait for initialization to finish and will throw after 10 seconds if it never completes