Lightweight JavaScript library for SaaS providers to embed services on client websites as a floating tab/window.
- Zero Dependencies — Pure vanilla JavaScript, works on any website
- Multiple Installation Options — npm package, CDN script tag, or self-hosted
- Drop-in Configuration — Query strings, data attributes, or programmatic API
- Mobile-Aware — Auto-detects mobile and opens in new tab for better UX
- Interactive Window — Draggable, resizable with touch support
- Dockable — Snap to screen edges like browser DevTools
- Wrapper Mode — Host external content with your floating overlay
- Fully Customizable — Templates, styles, and themes
- TypeScript Support — Full type definitions included
npm install service-injectorimport { ServiceInjector } from 'service-injector';
const injector = new ServiceInjector({
saasUrl: 'https://my-saas.com',
position: 'right',
draggable: true
});
injector.install();<script id="service-injector"
src="https://unpkg.com/service-injector/dist/index.iife.js?url=https://my-saas.com">
</script>Or use jsDelivr:
<script id="service-injector"
src="https://cdn.jsdelivr.net/npm/service-injector/dist/index.iife.js">
</script>The simplest setup - just add the script tag:
<script id="service-injector"
src="https://unpkg.com/service-injector/dist/index.iife.js"
data-url="https://my-saas.com"
data-position="right">
</script>A floating tab appears. Click it to open your service in a popup window.
For detailed documentation, see the docs/ folder:
| Document | Description |
|---|---|
| Overview | Introduction and navigation |
| Installation | npm, CDN, script tag, self-hosting |
| Configuration | All options for position, size, behavior |
| Customization | Templates, styles, themes |
| Docking | Snap windows to screen edges |
| Wrapper Mode | Host external content with overlay |
| API Reference | Methods, global functions, TypeScript |
| Mobile Behavior | How mobile devices are handled |
Try it live: https://orienteerbap.github.io/service-injector/
Apache-2.0