# new ImmersHUD()
Web Component heads-up display for Immers profile login. Unobtrusively connects your Immersive Web experience to Immers Space, allowing immersers to connect with their profiles from your site and share your site with their friends. Grants access to profile information so you can bring users' preferred identity into your experience.
The HTML attributes are listed in the Properties table below. Properties you can access from the element object directly are listed under Members.
The following CSS properties can be set on the immers-hud:
color: text color for floating text
--main-margin: distance from edge of window in overlay mode
--inner-margin: gap between elements
--handle-input-width: size of the handle input
Properties:
| Name | Type | Attributes | Description |
|---|---|---|---|
position |
'top-left'
|
'top-right'
|
'bottom-left'
|
'bottom-right'
|
<optional> |
Enable overlay positioning. |
token-catcher |
string
|
<optional> |
OAuth redirect URL, a page on your domain that runs catchToken on load (default: current url) |
access-role |
string
|
<optional> |
Requested authorization scope from roles. Users are given the option to alter this and grant a different level. (default: modAdditive) |
destination-name |
string
|
<optional> |
Title for your experience (default: meta[og:description], document.title) |
destination-url |
string
|
<optional> |
Sharable URL for your experience (default: current url) |
destination-description |
string
|
<optional> |
Social share preview test (default meta[og:description], meta[twitter:description]) |
destination-image |
string
|
<optional> |
Image url for social share previews (default: meta[og:image], meta[twitter:image]) |
local-immer |
string
|
<optional> |
Origin of your local Immers Server, if you have one |
allow-storage |
boolean
|
<optional> |
Enable local storage of user identity to reconnect when returning to page |
open |
'true'
|
'false'
|
Toggles between icon and full HUD view (default: true is user's handle is saved but login is needed, false otherwise) |
- immers-hud-connected - On successful login, detail.event:profile will include users Profile
Examples
Load & register the custom element via import (option 1)
import { ImmersHUD } from 'immers-client';
ImmersHUD.Register();Load & register the custom element via CDN (option 2)
<script type="module" src="https://cdn.jsdelivr.net/npm/immers-client/dist/ImmersHUD.bundle.js"></script>Using the custom element in HTML
<immers-hud position="bottom-left" access-role="friends"
destination-name="My Immer" destination-url="https://myimmer.com/"
token-catcher="https://myimmer.com/"></immers-hud>