Note: This example demonstrates the custom web
component for the profile widget. Replace the placeholder token with a
real authentication token for your user. See the
Widgets Docs Index for
theming and embed attributes.
Basic Usage
Include the script and use the custom element:
<!-- Include the web component script --> <script
src="/js/profile-widget.js"></script> <!-- Use the
custom element --> <profile-widget
api-url="https://your-domain.com" auth-token="your-jwt-token"
width="400" height="400"> </profile-widget>
Attributes
-
api-url: Base URL of your API (default: current
origin)
-
auth-token: JWT authentication token (required)
-
width: Widget width in pixels (default: 400)
-
height: Widget height in pixels (default: 400)
- theme: Theme preference (default: light)
Responsive Example
<style> .profile-container { width: 100%; max-width: 400px;
margin: 0 auto; } @media (max-width: 768px) { .profile-container {
max-width: 300px; } } </style> <div
class="profile-container"> <profile-widget
api-url="https://your-domain.com" auth-token="your-jwt-token"
width="100%" height="400"> </profile-widget> </div>
Dynamic Token Update
You can update the token dynamically:
// Get the widget element const widget =
document.querySelector('profile-widget'); // Update the auth token
widget.setAttribute('auth-token', 'new-jwt-token'); // The widget
will automatically re-render
Error Handling
The widget handles various error states:
- Missing authentication token
- Invalid or expired tokens
- Network connectivity issues
- Server errors
Browser Support
The web component works in all modern browsers that support:
- Custom Elements v1
- Shadow DOM v1
- ES6 Classes
Supported: Chrome 54+, Firefox 63+, Safari 10.1+,
Edge 79+