service-injector

Lightweight JavaScript library for SaaS providers to embed services on client websites as a floating tab/window.

Features

• 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

Installation

npm

npm install service-injector

import { ServiceInjector } from 'service-injector';

const injector = new ServiceInjector({
  saasUrl: 'https://my-saas.com',
  position: 'right',
  draggable: true
});

injector.install();

CDN

<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>

Quick Start

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.

Documentation

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 |

Demo

Try it live: https://orienteerbap.github.io/service-injector/

License

Apache-2.0

Links

• GitHub Repository
• npm Package
• Demo