{"id":50311820,"url":"https://github.com/suprsend/suprsend-web-components","last_synced_at":"2026-05-28T21:31:01.694Z","repository":{"id":288219967,"uuid":"953762436","full_name":"suprsend/suprsend-web-components","owner":"suprsend","description":"SuprSend SDK that provides drop-in components for features like InApp feed, preferences","archived":false,"fork":false,"pushed_at":"2026-05-18T07:19:37.000Z","size":377,"stargazers_count":0,"open_issues_count":7,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-05-18T09:36:23.099Z","etag":null,"topics":["angular","notifications","suprsend","vanilla-js","vuejs"],"latest_commit_sha":null,"homepage":"https://suprsend.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/suprsend.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-03-24T03:16:28.000Z","updated_at":"2026-05-18T07:19:06.000Z","dependencies_parsed_at":"2025-08-19T14:23:03.830Z","dependency_job_id":"268f3a6d-244d-463e-8752-d623ab815806","html_url":"https://github.com/suprsend/suprsend-web-components","commit_stats":null,"previous_names":["suprsend/suprsend-web-components"],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/suprsend/suprsend-web-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suprsend%2Fsuprsend-web-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suprsend%2Fsuprsend-web-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suprsend%2Fsuprsend-web-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suprsend%2Fsuprsend-web-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/suprsend","download_url":"https://codeload.github.com/suprsend/suprsend-web-components/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suprsend%2Fsuprsend-web-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33627934,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-28T02:00:06.440Z","response_time":99,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","notifications","suprsend","vanilla-js","vuejs"],"created_at":"2026-05-28T21:31:01.012Z","updated_at":"2026-05-28T21:31:01.685Z","avatar_url":"https://github.com/suprsend.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @suprsend/web-components\n\nThis library provides drop-in components to intergrate SuprSend features like InApp feed, Preferences etc in web applications like vanillajs, angular, vuejs etc. If you want to build UI from scratch, use [@suprsend/web-sdk](https://github.com/suprsend/suprsend-web-sdk).\n\n## Integration\n\n### Integrate using script tag\n\nThis integration is used in Vanillajs, Django, Laravel, ruby etc where npm is not used.\n\n```html\n\u003c!-- for dropin inbox with bell --\u003e\n\u003cdiv id=\"suprsend-inbox\"\u003e\u003c/div\u003e\n\n\u003c!-- for feed without bell as a fullscreen notification etc --\u003e\n\u003cdiv id=\"suprsend-feed\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\n  window.suprsendConfig = {\n    distinctId: \"YOUR_DISTINCT_ID\",\n    publicApiKey: \"YOUR_PUBLIC_API_KEY\",\n    userAuthenticationHandler: ({ response }) =\u003e {\n      console.log(\"User Authentication Response\", response);\n    },\n  };\n\n  let scriptElem = document.createElement(\"script\");\n  scriptElem.async = 1;\n  scriptElem.src = \"https://web-components.suprsend.com/v0.6.0/bundle.umd.js\";\n  scriptElem.onload = () =\u003e {\n    console.log(\"SuprSend SDK loaded\", window.suprsend);\n  };\n  document.body.appendChild(scriptElem);\n\u003c/script\u003e\n```\n\n### Integrate as NPM Package\n\nThis integration is used in framework based applications like angular, vuejs etc.\n\n```bash\nnpm install @suprsend/web-components@latest\n```\n\n```javascript\nimport { initSuprSend, clearSuprSend } from \"@suprsend/web-components\";\n\n// for dropin inbox with bell\n\u003cdiv id=\"suprsend-inbox\"\u003e\u003c/div\u003e\n\n// for feed without bell as a fullscreen notification etc\n\u003cdiv id=\"suprsend-feed\"\u003e\u003c/div\u003e\n\nconst suprsendConfig = {\n  distinctId: \"YOUR_DISTINCT_ID\",\n  publicApiKey: \"YOUR_PUBLIC_API_KEY\",\n  userAuthenticationHandler: ({ response }) =\u003e {\n    console.log(\"User Authentication Response\", response);\n  },\n};\n\ninitSuprSend(suprsendConfig) // for creating instance and rendering component\nconsole.log(\"Instance created but user authentication pending\", window.suprsend)\n```\n\n**NOTE:** If you are using `suprsend-feed`, specify height for the container for infinite scroll to work properly.\n\n```javascript\nconst suprsendConfig = {\n  distinctId: \"YOUR_DISTINCT_ID\",\n  publicApiKey: \"YOUR_PUBLIC_API_KEY\",\n  feed: {\n    theme: { notificationsContainer: { container: { height: \"100vh\" } } }, // add this to specify height\n  },\n};\n```\n\n## Removing Instance\n\n### Using script tag integration\n\n```javascript\n// integration using script tag\n\nwindow.suprsend.clearSuprSend(); // clears instance and remove all components\nwindow.suprsend.clearSuprSendInbox(); // unmount only inbox component\nwindow.suprsend.clearSuprSendFeed(); // unmount only feed component\n```\n\n### Using npm package integration\n\n```javascript\nimport {\n  clearSuprSend,\n  clearSuprSendInbox,\n  clearSuprSendFeed,\n} from \"@suprsend/web-components\";\n\nclearSuprSend(); // clears instance and remove all components\nclearSuprSendInbox(); // unmount only inbox component\nclearSuprSendFeed(); // unmount only feed component\n```\n\n## Updating configuration dynamically\n\n```javascript\nwindow.suprsend.updateSuprSendConfig(config: IUpdateSuprSendConfigOptions); // refresh userToken, change locale, translations dymanically\nwindow.suprsend.updateInboxConfig(config: IInbox);\nwindow.suprsend.updateFeedConfig(config: IFeed);\nwindow.suprsend.updateToastConfig(config: IToastNotificationProps);\n```\n\n## Accessing other instance methods\n\nSDK internally calls `new SuprSend()` when you call `initSuprSend()` then you can access instance using `window.suprsend.client`. This instance has methods like [preferences](https://docs.suprsend.com/docs/js-preferences), [webpush](https://docs.suprsend.com/docs/js-webpush), [event and user updates](https://docs.suprsend.com/docs/js-events-and-user-methods).\n\n```javascript\n// example methods\nwindow.suprsend.client.isIdentified();\nwindow.suprsend.client.user.addEmail(email: string);\nwindow.suprsend.client.track(event: string, properties?: Dictionary)\nwindow.suprsend.client.webpush.registerPush();\nwindow.suprsend.client.user.preferences.getPreferences();\n```\n\n## Config Options\n\nTo customise SuprSend components you can pass config object.\n\n```typescript\ninterface ConfigProps {\n  publicApiKey: string;\n  distinctId?: unknown;\n  userToken?: string; // jwt token needed when enhanced security mode is enabled\n  host?: string; // custom host url\n  initOnLoad?: boolean; // pass false if you dont want to initialise instance just after loading script\n  refreshUserToken?: (\n    oldUserToken: string,\n    tokenPayload: Dictionary\n  ) =\u003e Promise\u003cstring\u003e; // called after current user token expiry, call your BE api and return new user token\n  vapidKey?: string; // for webpush notifications\n  swFileName?: string; // for webpush notifications\n  userAuthenticationHandler?: ({ response: ApiResponse }) =\u003e void; // callback will be called after internally authenticating user.\n  locale: \"en / fr / es / de / ar\"; // pass locale to add internal translations\n  translations: ITranslations; // pass this to override existing strings or adding new language that we dont support internally.\n  inbox?: IInbox;\n  feed?: IFeed;\n  toast?: IToastNotificationProps;\n}\n\n// inbox config options\ninterface IInbox extends {\n  tenantId?: string;\n  stores?: IStore[] | null; // for multiple tabs support\n  host?: {\n    socketHost?: string;\n    apiHost?: string;\n  };\n  pageSize?: number;\n  pagination?: boolean;\n  theme?: ITheme; // to customise css of inbox\n  themeType?: ThemeType; // dark or light mode\n  popperPosition?: Placement; // position of popper wrt bell ex: top, bottom-start, left-end\n  hideAvatar?: boolean;\n  showUnreadCountOnTabs?: boolean; // hiding unread count in multi tab setup\n  hideToast?: boolean; // by default toast is shown on new notification. To stop it pass false\n  headerIconUrl?: string; // icon url to be shown on right side of mark all as read button on header\n  headerIconClickHandler?: () =\u003e void; // on click of above mentioned icon this is called\n  notificationClickHandler?: (notification: IRemoteNotification) =\u003e void;\n  primaryActionClickHandler?: (notification: IRemoteNotification) =\u003e void;\n  secondaryActionClickHandler?: (notification: IRemoteNotification) =\u003e void;\n}\n\n// feed config options\ninterface IFeed{\n  tenantId?: string;\n  pageSize?: number;\n  stores?: IStore[] | null; // for multiple tabs support\n  host?: {\n      socketHost?: string;\n      apiHost?: string;\n  };\n  pagination?: boolean;\n  showUnreadCountOnTabs?: boolean; // hiding unread count in multi tab setup\n  hideAvatar?: boolean;\n  themeType?: ThemeType; // to customise css of feed\n  theme?: INotificationFeedTheme; // dark or light mode\n  hideToast?: boolean; // by default toast is shown on new notification. To stop it pass false\n  hideFeed?: boolean; // useful if you dont want to show feed but only show toast notif on new notification\n  headerIconUrl?: string; // icon url to be shown on right side of mark all as read button on header\n  headerIconClickHandler?: () =\u003e void; // on click of above mentioned icon this is called\n  notificationClickHandler?: (notification: IRemoteNotification) =\u003e void;\n  primaryActionClickHandler?: (notification: IRemoteNotification) =\u003e void;\n  secondaryActionClickHandler?: (notification: IRemoteNotification) =\u003e void;\n}\n\n// toast notification config options\ninterface IToastNotificationProps{\n  position?: ToastPosition; // \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"\n  duration?: number; // milliseconds toast should be shown default to 3s\n  hideAvatar?: boolean;\n  themeType?: ThemeType;  // dark or light mode\n  theme?: ToastNotificationCardTheme; // to customise css of toast notification\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuprsend%2Fsuprsend-web-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsuprsend%2Fsuprsend-web-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuprsend%2Fsuprsend-web-components/lists"}