Mounting

This section explains the mounting process in detail and provides a technical example to illustrate how you can attach the EmbeddableView to your DOM element.

Mounting Options

The only required mounting options is the `route`-property. The rest can be set after initialization. By omitting the `container`-property—the Embeddable will only be initialized when calling the `embeddable.mount`-method instead of when created.

Basic example

import { Embeddable, Routes } from 'embeddables';
import { getEmbedToken } from './your-token-retrieval-script';

// Create the embeddable instance without specifying the container immediately.
const embeddable = new Embeddable({
  embedToken: getEmbedToken(),
})

const view = embeddable.createView({
  // By omitting the `container`-property we need to call the 
  // `view.mount`-method at a later time.
  // See Handling the Embed Token section for more information
  route: Routes.ACCOUNTS, 
});

// We manually mount the embeddable to the DOM
view.mount('#embeddable');

Mounting container

The embeddable can be mounted in two ways:

Using a CSS Query Selector:
Pass a string that identifies the container element (e.g., '#embeddable').
Using an HTML Element:
Provide the actual DOM element reference (e.g., document.getElementById('embeddable')).

// Using a query selector:
view.mount('#embeddable');

// Or mount using a HTMLElement reference:
view.mount(document.getElementById('embeddable')!);

Updating state before mount

Pre-Mount Configuration

Before mounting, you can safely queue configuration commands. These commands include updating settings, batching multiple updates, and even navigating to a specific route. All these messages are stored and will be executed in the correct order once the component is mounted. This design allows you to configure the component without immediately rendering it.

Code Example

Below is an example that demonstrates creating the embeddable, queuing pre-mount messages, and finally mounting it:

import { Embeddable, Routes } from 'embeddables';
import { getEmbedToken } from './your-token-retrieval-script';

const embeddable = new Embeddable({
  embedToken: getEmbedToken(),
})

// Create the embeddable instance without specifying the container immediately.
const view = embeddable.createView({
  route: Routes.ACCOUNTS, 
});

// Since these state-changes happens before the EmbeddableView is mounted, they
// will be batched and sent in one message once the EmbeddableView is mounted.
view.state.updateSettings({
  showInvalidTokenError: true,
});

// Navigating to a different route before mounting will have the same 
// effect as setting the route in `createView`-method
view.state.navigate(Routes.PAYOUTS);

// Finally, mount the embeddable to the DOM
view.mount('#embeddable');

Before token is set

If the token is not set when creating the EmbeddableView, a loading screen will be shown until set.

Batching messages

If needed you can also create a batch to send multiple messages at the same time, ensuring that theres no delay between the changes.

// Batch multiple updates to ensure they are sent in one message.
view.state.createBatch((sender) => {
  sender.updateSettings({
    showInvalidTokenError: true,
  });
  sender.updateSettings({
    showInvalidTokenError: false,
  });
  sender.updateSettings({
    showInvalidTokenError: true,
  });
});