Class UnbluEmbeddedAppElement

This is a custom element which can be used to integrate the agent's embedded app (inbox and conversations) into a webpage at a specific location.

To use the custom element, place a tag named "unblu-embedded-app" somewhere in the web page's body. By default, the element shows the agent's inbox. If a conversation-id attribute is set on the element, it shows that conversation instead.

...
<body>
...
    <div>
        <unblu-embedded-app></unblu-embedded-app>
    </div>
...
</body>
...

The size and positioning depend entirely on the styles applied to it by the website that it's embedded in. The styling within the web component, on the other hand, aren't affected by the website's styles,because it uses a shadow root for its content. Unblu provides numerous configuration properties that let you customize the web component's appearance to suit your organizations requirements.

The example above only adds the embedded app component to the DOM without initializing anything. To initialize and display content, you must create the UnbluAgentEmbeddedApi.

The Unblu UI inside the custom element always fills the whole content of the element irrespective of the size it's given.

Note: It is possible to display as many UnbluEmbeddedAppElement and UnbluConversationElement as one likes with the restriction that one conversation can only be displayed in one of them.

Attributes

conversation-id: ID of the conversation to open in the embedded app. See UnbluEmbeddedAppElement.conversationId.

<unblu-embedded-app conversation-id="<CONVERSATION-ID>"></unblu-embedded-app>

Events

openConversationChanged: fires when the open conversation changes. See UnbluEmbeddedAppElement.OPEN_CONVERSATION_CHANGED.

const embeddedApp = document.querySelector('unblu-embedded-app');
embeddedApp.addEventListener('openConversationChanged', (event) => {
    console.log('Open conversation changed:', event.detail); // conversation ID or null
});

Interceptors

You can register an interceptor to control what happens when a conversation is opened from the embedded app's inbox view. This is useful when you want to open the conversation in a separate <unblu-conversation> component rather than within the embedded app itself.

embeddedApp.registerOpenConversationInterceptor(async (conversationId) => {
    // return { action: 'OPEN' } to let the embedded app open the conversation
    // return { action: 'DISCARD' } to handle it yourself (e.g. open it in a separate <unblu-conversation> element)
    return { action: 'DISCARD' };
});

See

MDN Custom Element

No Inherit Doc

Hierarchy

HTMLElement
- UnbluEmbeddedAppElement

Index

Constructors

constructor

new UnbluEmbeddedAppElement(): UnbluEmbeddedAppElement
Returns UnbluEmbeddedAppElement
Inherited from HTMLElement.constructor
- Defined in node_modules/typescript/lib/lib.dom.d.ts:13847

Properties

`Static` `Readonly`ATTR_CONVERSATION_ID

ATTR_CONVERSATION_ID: "conversation-id" = ...

ID of the conversation currently open in the embedded app. If set, the conversation is opened in the embedded app.

Accessors

conversationId

get conversationId(): string
Returns string
- Defined in agent-embedded-js-api/src/unblu-embedded-app-element.ts:191
set conversationId(conversationId: string): void
Opens the conversation with the given conversation ID.

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

If the conversation doesn't exist, or the user doesn't have permission to access it, a dialog is displayed with the appropriate error message. In such cases, the conversation ID is reset to null.
Parameters
- conversationId: string
  The id of the conversation to open
Returns void
See
UnbluEmbeddedAppElement.ATTR_CONVERSATION_ID to set this as an attribute
- Defined in agent-embedded-js-api/src/unblu-embedded-app-element.ts:182

Methods

addEventListener

addEventListener(
    type: "openConversationChanged",
    listener: (event: EmbeddedAppOpenConversationChangedEvent) => void,
    options?: boolean | AddEventListenerOptions,
): void
Registers for the UnbluEmbeddedAppElement.OPEN_CONVERSATION_CHANGED event
Parameters
- type: "openConversationChanged"
- listener: (event: EmbeddedAppOpenConversationChangedEvent) => void
- Optionaloptions: boolean | AddEventListenerOptions
Returns void
Overrides HTMLElement.addEventListener
- Defined in agent-embedded-js-api/src/unblu-embedded-app-element.ts:136

registerOpenConversationInterceptor

registerOpenConversationInterceptor(
openConversationInterceptor: OpenConversationInterceptor,
): Promise<void>
Registers an open conversation interceptor that's triggered whenever a conversation should be opened from the embedded app's inbox view.
Parameters
- openConversationInterceptor: OpenConversationInterceptor
  The interceptor, which should resolve to an OpenConversationInterceptorResult with action OPEN if the embedded app UI should open the conversation or DISCARD if the embedded app will do nothing and the integrating page must handle the request.
  
  see #unregisterOpenConversationInterceptor to unregister the interceptor
Returns Promise<void>
- Defined in agent-embedded-js-api/src/unblu-embedded-app-element.ts:280

removeEventListener

removeEventListener(
type: "openConversationChanged",
listener: (event: EmbeddedAppOpenConversationChangedEvent) => void,
): void
Removes a listener registration for the UnbluEmbeddedAppElement.OPEN_CONVERSATION_CHANGED event
Parameters
- type: "openConversationChanged"
- listener: (event: EmbeddedAppOpenConversationChangedEvent) => void
Returns void
Overrides HTMLElement.removeEventListener
- Defined in agent-embedded-js-api/src/unblu-embedded-app-element.ts:146

unregisterOpenConversationInterceptor

unregisterOpenConversationInterceptor(
openConversationInterceptor: OpenConversationInterceptor,
): Promise<void>
Unregisters an open conversation interceptor used previously
Parameters
- openConversationInterceptor: OpenConversationInterceptor
  The interceptor to unregister
  
  see #registerOpenConversationInterceptor to register a new interceptor
Returns Promise<void>
- Defined in agent-embedded-js-api/src/unblu-embedded-app-element.ts:293

Events

`Static` `Readonly`OPEN_CONVERSATION_CHANGED

OPEN_CONVERSATION_CHANGED: "openConversationChanged" = ...

Event emitted every time the currently open conversation changes in the embedded app.

See

OpenConversationChangedEvent for the event type
UnbluEmbeddedAppElement.addEventListener for listener registration
UnbluEmbeddedAppElement.removeEventListener to remove a listener openConversationChanged

Class UnbluEmbeddedAppElement

This is a custom element which can be used to integrate the agent's embedded app (inbox and conversations) into a webpage at a specific location.

Attributes

Events

Interceptors

See

No Inherit Doc

Hierarchy

Index

Constructors

Properties

Accessors

Methods

Events

Constructors

constructor

Returns UnbluEmbeddedAppElement

Properties

Static ReadonlyATTR_CONVERSATION_ID

Accessors

conversationId

Returns string

Parameters

Returns void

See

Methods

addEventListener

Parameters

Returns void

registerOpenConversationInterceptor

Parameters

Returns Promise<void>

removeEventListener

Parameters

Returns void

unregisterOpenConversationInterceptor

Parameters

Returns Promise<void>

Events

Static ReadonlyOPEN_CONVERSATION_CHANGED

See

Settings

On This Page

`Static` `Readonly`ATTR_CONVERSATION_ID

`Static` `Readonly`OPEN_CONVERSATION_CHANGED