Unblu Branch Client App Component API
    Preparing search index...

    Class UnbluBranchClientAppElement

    By itself this contains only the definition of the custom element and will load further JavaScript from the collaboration server on initialization to provide the full functionality.

    To use the custom element just place a tag named "unblu-branch-client-app" somewhere into the webpages body`.

    ...
    <body>
    ...
        <div>
            <unblu-branch-client-app></unblu-branch-client-app>
        </div>
    ...
    </body>
    ...

    The size and positioning fully depends on the styles applied to the element by the website it is embedded into. The styling within the unblu branch-client app can't be influenced by the website's styles however as a shadow root is used for its content. Unblu provides a large list of configuration properties to nicely integrate the unblu branch-client app's visual appearance with the website it is embedded into.

    The example above will simply add the unblu branch-client app into the DOM but it won't initialize anything. To initialize the element with Unblu content at least the attribute ATTR_API_KEY or property UnbluBranchClientAppElement.apiKey need to be defined. If UnbluBranchClientAppElement.autoInit is set to true (default), it will automatically start the initialization, as soon as the API key is defined either via its attribute ATTR_API_KEY or property UnbluBranchClientAppElement.apiKey. If not a call to UnbluBranchClientAppElement.initialize has to be done to trigger the initialization.

    Initializing:

    Initialization can either be done manually or automatically. If the element is configured to do automatic initialization ATTR_AUTO_INIT / UnbluBranchClientAppElement.autoInit the initialization will be automatically started as soon as at least the API key ATTR_API_KEY / UnbluBranchClientAppElement.apiKey is defined. If you intent to define other attributes/properties relevant for the initialization these must all be set in the same JavaScript execution cycle. If automatic initialization is disabled the initialization must be done manually by calling the UnbluBranchClientAppElement.initialize method.

    There are additional attributes/properties which can be defined to define from where and how the Unblu JavaScript code is loaded from the collaboration server.

    The Unblu UI inside the custom element will always fill the whole content of the unblu-branch-client-app independent of what size it is given.

    Note: if an Unblu Floating UI is already integrated on the website via the Floating JS API, the branch-client app will automatically deinitialize it as there can always only one active instance of Unblu on the page.

    MDN Custom Element

    Hierarchy

    • HTMLElement
      • UnbluBranchClientAppElement

    Implements

    • InitializedUnbluElement
    Index

    Constructors

    constructor

    Properties

    ATTR_API_KEY ATTR_AUTO_INIT ATTR_BRANCH_CLIENT_TOKEN ATTR_CONVERSATION_ID ATTR_ENTRY_PATH ATTR_FULLSCREEN ATTR_INIT_TIMEOUT ATTR_LOCALE ATTR_NAMED_AREA ATTR_SERVER_URL

    Accessors

    apiKey apiState autoInit branchClientToken conversationId entryPath fullscreen initTimeout locale namedArea serverUrl

    Methods

    addEventListener deinitialize initialize removeEventListener

    Events

    ACTIVE_CONVERSATION_CHANGE AVAILABLE_LANGUAGES_CHANGE AVAILABLE_NAMED_AREAS_CHANGE DEINITIALIZED DEINITIALIZING ERROR FULLSCREEN_CHANGE LOCALE_CHANGE NAMED_AREA_CHANGE READY STATE_CHANGE

    Constructors

    Properties

    ATTR_API_KEY: "api-key" = 'api-key'

    The API Key to connect this app with a specific Unblu account This is the minimum configuration that has to be done to trigger the initialization of Unblu.

    Note: Changes to this attribute trigger a reinitialization of Unblu if UnbluBranchClientAppElement.ATTR_AUTO_INIT is true.

    UnbluBranchClientAppElement.apiKey to set or get this via a property

    ATTR_AUTO_INIT: "auto-init" = 'auto-init'

    Defines if Unblu automatically tries to (re-)initialize as soon as an attribute or property changes that triggers (re-)initialization.

    To trigger a initialization at least the attribute ATTR_API_KEY or property UnbluBranchClientAppElement.apiKey.

    true.

    UnbluBranchClientAppElement.autoInit to set or get this via a property

    ATTR_BRANCH_CLIENT_TOKEN: "branch-client-token" = 'branch-client-token'

    The token to validate a Branch client This is a minimum configuration that has to be done to trigger the initialization of Unblu Branch.

    Note: Changes to this attribute trigger a reinitialization of Unblu if [[UnbluBranchClientAppElement.ATTR_AUTO_INIT]] is true.

    UnbluBranchClientAppElement.branchClientToken to set or get this via a property

    ATTR_CONVERSATION_ID: "conversation-id" = 'conversation-id'

    Opens the conversation with the specified ID. If Unblu is not initialized yet, it will wait for the initialization and then automatically open the specified conversation. If Unblu is already initialized, the conversation will be opened directly.

    If the conversation doesn't exist or the user doesn't have the right to access it, a dialog will be displayed with the respective error message.

    • UnbluBranchClientAppElement.openConversation to set this value and also retrieve a promise to know, when the conversation was opened.
    • UnbluBranchClientAppElement.conversationId to read the value as property. This will always represent the currently opened conversation.

    Static ReadonlyATTR_ENTRY_PATH

    ATTR_ENTRY_PATH: "entry-path" = 'entry-path'

    The path pointing to the root of the Unblu collaboration server.

    "/unblu".

    Note: Changes to this attribute trigger a reinitialization of Unblu if UnbluBranchClientAppElement.ATTR_AUTO_INIT is true.

    UnbluBranchClientAppElement.entryPath to set or get this via a property

    ATTR_FULLSCREEN: "fullscreen" = 'fullscreen'

    When this attribute is set to true, the branch-client app will ignore the position and size set to its element and will used fixed positioning to display itself to cover the whole website.

    This is useful when the user is currently in a call.

    This can be set even if the API is not initialized yet. The value will then be applied on initialization.

    Note: The user itself can also toggle this inside the UI.

    UnbluBranchClientAppElement.fullscreen to set or get this via a property

    false
    ATTR_INIT_TIMEOUT: "init-timeout" = 'init-timeout'

    The timeout im milliseconds that should be waited for the Unblu integration to load.

    30'000 (30 seconds).

    UnbluBranchClientAppElement.initTimeout to set or get this via a property

    ATTR_LOCALE: "locale" = 'locale'

    The locale (language) used for all Unblu UIs. If not specified this is derived from the webpage or the browser.

    Note: Changes to this attribute trigger a reinitialization of Unblu if UnbluBranchClientAppElement.ATTR_AUTO_INIT is true.

    ATTR_NAMED_AREA: "named-area" = 'named-area'

    The named area for which the configuration should be loaded and with which new queue requests will be labeled. If not specified this can be derived from the corresponding meta tag on the webpage or the domain.

    Note: Changes to this attribute trigger a reinitialization of Unblu if UnbluBranchClientAppElement.ATTR_AUTO_INIT is true. If this is not desired it can be prevented by changing the named area via a meta tag, however in this case this will only effect the queue routing and not the configuration. Alternatively you can disable the automatic initialization.

    ATTR_SERVER_URL: "server-url" = 'server-url'

    The URL to the collaboration server.

    If not specified it is assumed that the server is reachable on the domain of the current webpage at the defined UnbluBranchClientAppElement.entryPath

    Note: Changes to this attribute trigger a reinitialization of Unblu if UnbluBranchClientAppElement.ATTR_AUTO_INIT is true.

    UnbluBranchClientAppElement.serverUrl to set or get this via a property

    Accessors

    • get apiKey(): string

      Returns string

    • set apiKey(apiKey: string): void

      The API Key to connect this app with a specific Unblu account. This is the minimum configuration that has to be done to trigger the initialization of Unblu.

      Note: Changes to this property trigger a reinitialization of Unblu if UnbluBranchClientAppElement.autoInit is true.

      Parameters

      • apiKey: string

      Returns void

      UnbluBranchClientAppElement.ATTR_API_KEY to set this as an attribute

    • get autoInit(): boolean

      Returns boolean

    • set autoInit(autoInit: boolean): void

      Defines if Unblu automatically tries to (re-)initialize as soon as an attribute or property changes that triggers (re-)initialization. Attributes/properties that trigger a (re-)initialization have a note in their documentation. At least the attribute ATTR_API_KEY or property UnbluBranchClientAppElement.apiKey has to be configured to trigger an initialization.

      If this property gets set from false to true, it will automatically initialize if it is not already initialized. If it is already initialized, it will NOT deinitialize.

      Parameters

      • autoInit: boolean

      Returns void

      true.

      UnbluBranchClientAppElement.ATTR_AUTO_INIT to set this as an attribute

    • get branchClientToken(): string

      Returns string

    • set branchClientToken(branchClientToken: string): void

      The token to validate a Branch Client. This is a required configuration that has to be done to trigger the initialization of Unblu Branch.

      Note: Changes to this property trigger a reinitialization of Unblu if UnbluBranchClientAppElement.autoInit is true.

      Parameters

      • branchClientToken: string

      Returns void

      UnbluBranchClientAppElement.ATTR_BRANCH_CLIENT_TOKEN to set this as an attribute

    • get conversationId(): string

      Returns string

    • set conversationId(conversationId: string): void

      Opens the conversation for the given conversation ID.

      This can be set already before Unblu is initialized. The conversation will then be opened as soon as Unblu gets initialized.

      If the conversation doesn't exist or the user doesn't have the right to access it, a dialog will be displayed with the respective error message. In such a case the conversation ID will be reset to null.

      Parameters

      • conversationId: string

        The id of the conversation to open

      Returns void

      UnbluBranchClientAppElement.ATTR_CONVERSATION_ID to set this as an attribute

    • get entryPath(): string

      Returns string

    • set entryPath(entryPath: string): void

      The entry path on the collaboration server.

      Parameters

      • entryPath: string

      Returns void

      "/unblu".

      Note: Changes to this property trigger a reinitialization of Unblu if UnbluBranchClientAppElement.autoInit is true.

      UnbluBranchClientAppElement.ATTR_ENTRY_PATH to set this as an attribute

    • get fullscreen(): boolean

      Returns boolean

    • set fullscreen(fullscreen: boolean): void

      When this attribute is set to true, the branch-client app element will ignore the position and size set to its element and will used fixed positioning to display itself to cover the whole website.

      This is useful when the user is currently in a call.

      This can be set even if the API is not initialized yet. The value will then be applied on initialization.

      Note: The user itself can also toggle this inside the UI.

      Parameters

      • fullscreen: boolean

        True to enable fullscreen, false otherwise.

      Returns void

      false
    • get initTimeout(): number

      Returns number

    • set initTimeout(initTimeout: number): void

      The timeout im milliseconds that should be waited for the Unblu integration to load.

      Parameters

      • initTimeout: number

      Returns void

      30'000 (30 seconds).

      UnbluBranchClientAppElement.ATTR_INIT_TIMEOUT to set this as an attribute

    • get locale(): string

      Returns string

    • set locale(locale: string): void

      The locale (language) used for all Unblu UIs. If not specified this is derived from the webpage or the browser.

      Note: Changes to this property trigger a reinitialization of Unblu if UnbluBranchClientAppElement.autoInit is true.

      Parameters

      • locale: string

      Returns void

      UnbluBranchClientAppElement.ATTR_LOCALE to set this as an attribute

    • get namedArea(): string

      Returns string

    • set namedArea(namedArea: string): void

      The named area for which the configuration should be loaded and with which new queue requests will be labeled. If not specified this can be derived from meta tags on the webpage.

      Note: Changes to this property trigger a reinitialization of Unblu if UnbluBranchClientAppElement.autoInit is true. If this is not desired it can be prevented by changing the named area via a meta tag, however in this case this will only effect the queue routing and not the configuration. Alternatively you can disable the auto init.

      Parameters

      • namedArea: string

      Returns void

      UnbluBranchClientAppElement.ATTR_NAMED_AREA to set this as an attribute

    • get serverUrl(): string

      Returns string

    • set serverUrl(serverUrl: string): void

      The URL to the collaboration server.

      If not specified it is assumed that the server is reachable on the same domain of the current webpage at the defined UnbluBranchClientAppElement.entryPath

      Note: Changes to this property trigger a reinitialization of Unblu if UnbluBranchClientAppElement.autoInit is true.

      Parameters

      • serverUrl: string

      Returns void

      UnbluBranchClientAppElement.ATTR_SERVER_URL to set this as an attribute

    Methods

    • Registers for the UnbluBranchClientAppElement.STATE_CHANGE event

      Parameters

      • type: "stateChange"
      • listener: (event: StateChangeEvent) => void
      • Optionaloptions: boolean | AddEventListenerOptions

      Returns void

    • Registers for the UnbluBranchClientAppElement.READY event

      Parameters

      • type: "ready"
      • listener: (event: ReadyEvent) => void
      • Optionaloptions: boolean | AddEventListenerOptions

      Returns void

    • Registers for the UnbluBranchClientAppElement.ERROR event

      Parameters

      • type: "error"
      • listener: (event: ErrorEvent) => void
      • Optionaloptions: boolean | AddEventListenerOptions

      Returns void

    • Registers for the UnbluBranchClientAppElement.DEINITIALIZING event

      Parameters

      Returns void

    • Registers for the UnbluBranchClientAppElement.DEINITIALIZED event

      Parameters

      Returns void

    • Registers for the UnbluBranchClientAppElement.ACTIVE_CONVERSATION_CHANGE event

      Parameters

      Returns void

    • Registers for the UnbluBranchClientAppElement.FULLSCREEN_CHANGE event

      Parameters

      • type: "fullscreenChange"
      • listener: (event: FullscreenChangeEvent) => void
      • Optionaloptions: boolean | AddEventListenerOptions

      Returns void

    • Registers for the UnbluBranchClientAppElement.LOCALE_CHANGE event

      Parameters

      • type: "localeChange"
      • listener: (event: LocaleChangeEvent) => void
      • Optionaloptions: boolean | AddEventListenerOptions

      Returns void

    • Registers for the UnbluBranchClientAppElement.NAMED_AREA_CHANGE event

      Parameters

      • type: "namedAreaChange"
      • listener: (event: NamedAreaChangeEvent) => void
      • Optionaloptions: boolean | AddEventListenerOptions

      Returns void

    • Registers for the UnbluBranchClientAppElement.AVAILABLE_LANGUAGES_CHANGE event

      Parameters

      Returns void

    • Registers for the UnbluBranchClientAppElement.AVAILABLE_NAMED_AREAS_CHANGE event

      Parameters

      Returns void

    • Deinitializes the app element and destroys all of its containing UI. By changing one of the attributes that trigger a reinitialization (e.g. UnbluBranchClientAppElement.apiKey) the app element will be automatically initialized again (if the value is really changed).

      Note: Calling this method will not remove the element itself out of the DOM.

      Returns Promise<void>

    • Removes a listener registration for the UnbluBranchClientAppElement.STATE_CHANGE event

      Parameters

      Returns void

    • Removes a listener registration for the UnbluBranchClientAppElement.READY event

      Parameters

      • type: "ready"
      • listener: (event: ReadyEvent) => void

      Returns void

    • Removes a listener registration for the UnbluBranchClientAppElement.ERROR event

      Parameters

      • type: "error"
      • listener: (event: ErrorEvent) => void

      Returns void

    • Removes a listener registration for the UnbluBranchClientAppElement.DEINITIALIZING event

      Parameters

      Returns void

    • Removes a listener registration for the UnbluBranchClientAppElement.DEINITIALIZED event

      Parameters

      Returns void

    • Removes a listener registration for the UnbluBranchClientAppElement.ACTIVE_CONVERSATION_CHANGE event

      Parameters

      Returns void

    • Removes a listener registration for the UnbluBranchClientAppElement.FULLSCREEN_CHANGE event

      Parameters

      Returns void

    • Removes a listener registration for the UnbluBranchClientAppElement.LOCALE_CHANGE event

      Parameters

      Returns void

    • Removes a listener registration for the UnbluBranchClientAppElement.NAMED_AREA_CHANGE event

      Parameters

      Returns void

    • Removes a listener registration for the UnbluBranchClientAppElement.AVAILABLE_LANGUAGES_CHANGE event

      Parameters

      Returns void

    • Removes a listener registration for the UnbluBranchClientAppElement.AVAILABLE_NAMED_AREAS_CHANGE event

      Parameters

      Returns void

    Events

    ACTIVE_CONVERSATION_CHANGE: "activeConversationChange" = 'activeConversationChange'

    Event emitted every time one of the conversations accessible to the current user changes or one is added or removed.

    AVAILABLE_LANGUAGES_CHANGE: "availableLanguagesChange" = 'availableLanguagesChange'

    Event emitted every time the available languages change.

    AVAILABLE_NAMED_AREAS_CHANGE: "availableNamedAreasChange" = 'availableNamedAreasChange'

    Event emitted every time the available named areas changed. Beside the named area information, also the agent availability is provided for given named areas.

    DEINITIALIZED: "deinitialized" = 'deinitialized'

    Event emitted when the de-initialization of the API has finished.

    It usually makes sense to use this event if a re-initialization is required after de-init.

    DEINITIALIZING: "deinitializing" = 'deinitializing'

    Event emitted when the de-initialization of the API is started..

    It usually makes sense to use this event to clean up resources and/or unregistering of listeners so they don't try to use the API again until it is initialized again.

    ERROR: "error" = 'error'

    Event emitted if the API initialization fails.

    It usually makes sense to use this event if there is some general action that has to be triggered when the API initialization fails.

    FULLSCREEN_CHANGE: "fullscreenChange" = 'fullscreenChange'

    Event emitted every time the branch-client app switches to fullscreen mode or back.

    LOCALE_CHANGE: "localeChange" = 'localeChange'

    Event emitted every time the available languages change.

    NAMED_AREA_CHANGE: "namedAreaChange" = 'namedAreaChange'

    Event emitted every time the available languages change.

    READY: "ready" = 'ready'

    Event emitted as soon as the API is initialized.

    It usually makes sense to use this event to wait for APIs to be ready. E.g. the UnbluBranchClientApi.getPersonInfo or UnbluBranchClientApi.isAgentAvailable.

    STATE_CHANGE: "stateChange" = 'stateChange'

    Event emitted whenever the API state changes

    Settings

    Member Visibility

    On This Page

    This is a custom element which can be used to integrate Unblu into a webpage at a specific location.
    Constructors
    Properties
    Accessors
    Methods
    Events