@obslysdk/bridge
v2.4.0
Published
A typed bridge/wrapper for the Obsly SDK when loaded via CDN or injected into a webview. Provides type safety and a convenient interface for the global `window.ObslySDK` instance.
Downloads
96
Readme
@obslysdk/bridge
Overview
The @obslysdk/bridge package provides a typed, convenient interface for interacting with the Obsly SDK when it has been loaded onto a web page globally (e.g., via a CDN script tag or injected into a WebView).
This library does not bundle the Obsly SDK itself. Its primary purpose is to act as a "bridge" that provides full TypeScript support and a familiar API for the window.ObslySDK instance that is already present on the page.
Who is this for?
This package is designed for developers who are in one of the following scenarios:
- Using the CDN: You are loading the Obsly SDK using a
<script>tag in your HTML file from our CDN. - Injected SDK: You are working in an environment (like a mobile WebView) where the Obsly SDK is injected into the page by a native application.
- Dynamic Loading: You want to dynamically load the SDK from a script and then interact with it using a typed API.
If you are using a bundler like Webpack or Vite and want to include the Obsly SDK directly in your application bundle, you should use the @obslysdk/browser package instead.
Installation
npm install @obslysdk/bridgeUsage
After installing the package, you can import the ObslySDK functions directly. The bridge will automatically connect to the window.ObslySDK object.
For a complete explanation of all available functions and their usage, please refer to the documentation in the @obslysdk/browser README. The functions and types provided by @obslysdk/bridge are identical to those in @obslysdk/browser.
Example: Using with a CDN Script
Here is an example of how to use this library when the main SDK is loaded from a CDN.
index.html
<!doctype html>
<html>
<head>
<title>My App</title>
<!-- Load the core Obsly SDK from the CDN -->
<script src="https://librarycdn.com/sdk/latest/browser.iife.js"></script>
<!-- Load your application's bundled JavaScript -->
<script src="./my-app.js" defer></script>
</head>
<body>
<h1>Welcome to my application!</h1>
</body>
</html>my-app.ts (Your application code)
import { init, addTag, Performance } from '@obslysdk/bridge'
// Since the Obsly SDK is already loaded on the page (e.g., from a CDN script),
// this library acts as a typed bridge to the global `window.ObslySDK` object.
init({
ObslyKey: 'YOUR_OBSLY_KEY',
instanceURL: 'https://api.obsly.com'
}) // This will internally call `window.ObslySDK.init`
// All other functions work the same way. Import what you need and use it directly in your application.
// For example, to add a tag:
addTag([{ key: 'user_tier', value: 'premium' }], 'User Properties') // This will internally call `window.ObslySDK.addTag`
// You can start a transaction:
Performance.startTransaction('test-transaction', 'test-transaction-description') // This will internally call `window.ObslySDK.Performance.startTransaction`
// ... later in your code, you can end the transaction:
Performance.endTransaction('test-transaction', 'test-transaction-description') // This will call `window.ObslySDK.Performance.endTransaction`Getting Help
For questions, feedback, or support, please email us at [email protected].