Installation
Add this line of code at the end of the <body> in your HTML page:
<script src="https://example.com/widget-loader.js"></script>
The widget will be automatically injected into your page.
Features
Single Script
One line of code for everything
Auto-injection
Automatically added to the body
Isolated
No interference with other scripts
Responsive
Works on any device
Files
widget-loader.js- Loader script (2 KB)widget.js- Compiled Angular bundle (487 KB)styles.css- Widget stylesindex.html- This page
Note: The script automatically detects the base URL from where
widget-loader.js is loaded, so you don't need to configure paths manually.
Usage Example
Create an HTML file with this content:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>Your page content...</p>
<!-- Phone Widget -->
<script src="https://example.com/widget-loader.js"></script>
</body>
</html>
Ready to go: The widget will appear in the bottom right corner of your page, fully functional and independent.
Troubleshooting
CORS errors?
If the widget is on a different domain, make sure your server configures the appropriate
If the widget is on a different domain, make sure your server configures the appropriate
Access-Control-Allow-Origin headers.
Widget not showing?
Open the browser console (F12 → Console) and look for
Open the browser console (F12 → Console) and look for
[PhoneWidget] messages to diagnose the issue.