Initializing the View

This section details how to initialize a View-component. We offer a variety of initialization methods giving you the freedom and control you need to easily integrate Views into your project

Creating the EmbeddableView Instance

Begin by importing the necessary modules and creating an EmbeddableView-instance using the createView method of the Embeddable object. During creation, you configure essential properties such as the initial route, and any initial settings.

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

// Create the embeddable instance with initial configuration.
const embeddable = new Embeddable({
  embedToken: getEmbedToken()   // Secure token used to authenticate and fetch data.
})

const view = embeddable.createView({
  // Container is optional here and can be provided later. See 'Mounting'-section.
  container: '#embeddable'      // Container to mount the iframe in.
  route: Routes.ACCOUNTS,       // Sets the initial route (e.g., accounts view).
  settings: {                   // Initial settings
    navbar: true
    // ...other settings
  }
});

Mounting section

Mounting

Once you've created and configured your embeddable instance, the next step is to mount it onto your webpage. This section explains the mounting process in detail and provides a technical example to illustrate how you can attach the embeddable to your DOM element.

Routes section:

Routes

Embeddable settings section:

Embeddable settings

The settings offer an option for configuring the Embeddable to satisfy your use-cases