UI Components (Ember)

A set of Ember components for seamlessly integrating Lateral content into your application.

Installation

ember install @lateral-ai/ui-ember
npm install @lateral-ai/telemetry

Initialization

Before using the UI components, you need to initialize both the Telemetry and UI libraries.

Create a service to set up the telemetry client and initialize the UI components:

// app/services/lateral.js
import Service from "@ember/service";
import { initTelemetry } from "@lateral-ai/telemetry";
import { init } from "@lateral-ai/ui-ember/utils/setup";

export default class LateralService extends Service {
  @service session;

  // Initialize telemetry
  const client = initTelemetry({
    apiKey: LATERAL_API_KEY,
    userId: this.session.currentUser.id,
  });

  // Initialize UI
  init(client);
}

// src/app/routes/application.js
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class ApplicationRoute extends Route {
  @service session;
  @service lateralTracking;

  async model() {
    await this.session.initSession();
    this.lateralTracking.initializeTracking();
  }
}

Usage

Once initialized, you can use the components in your Ember application.

Use the LateralUI::Frame component in your templates:

<!-- app/templates/components/your-component.hbs -->
<LateralUI::Frame @lateralLocationId="componentIdConfiguredInLateral">
  <div>
    <h1 data-lateral-field-id="idConfiguredInLateral">My content</h1>
    <p data-lateral-field-id="idConfiguredInLateral">
      Default text if backend is not reachable
    </p>
  </div>
</LateralUI::Frame>

The LateralUI::Frame component allows you to easily integrate the content you've created in Lateral into your application.

Related

• @lateral-ai/telemetry: Telemetry package for Lateral, required for UI initialization.

Support

For any issues or questions, please contact support or open an issue in this repository.