Embedded code installation

With this installation method, you embed the build files within your project. The build files can be integrated into any frontend framework.

If you use the embedded method, you can include additional functionality using React.

Prerequisites

Before you install the component in your project, regardless of framework, first prepare the build:

  1. Download the zip file of our source code for resusable components.
  2. Open the downloaded package on your favorite IDE (Integrated development environment)
  3. Open a terminal from the downloaded folder
  4. Run npm install

  5. Build the reusable components:

    • US:

      • To build the component with a Storybook page, run npm run build:prod2, or
      • To build the component independently, run npm run build-minimal:prod2

    • EMEA:

      • To build the component with a Storybook page, run npm run build:prod2de, or
      • To build the component independently, run npm run build-minimal:prod2de

    A new folder WWW is created in the project. This folder contains all the build files needed for integration.

  6. Copy the WWW folder and paste it in your project.

  7. Install based on the framework:

Vanilla JS installation

This section describes how to embed the reusable component when your project uses the Vanilla JS framework. Before starting, make sure you’ve fulfilled the prerequisites.

Installation steps

  1. Import www/build/cloud-ui-components.esm.js into your HTML.

  2. Add this to all HTML files that will include the component.

    image5

  3. Use the relevant component in your HTML.

    image6

  4. Next steps: configure and customize the component

    Note

    It's important to configure the required parameters, and any optional parameters that you want to customzie. Make sure you read the documentation for the specific component you're integrating before implementing.

    Lytx regularly updates the component-specific documentation as we continue to develop and improve related parameters and other functionality.

You’re there!

React installation

This section describes how to embed the reusable component when your project uses the React framework. Before starting, make sure you’ve fulfilled the prerequisites.

Installation steps

  1. Import www/build/cloud-ui-components.esm.js into your HTML for all HTML pages in your app that you want to integrate.

    Example

    image7

  2. Add the component in all relevant places within your app. For example: src/app/app.component.html

    Example

    image8

  3. Next steps: configure and customize the component

    Note

    It's important to configure the required parameters, and any optional parameters that you want to customzie. Make sure you read the documentation for the specific component you're integrating before implementing.

    Lytx regularly updates the component-specific documentation as we continue to develop and improve related parameters and other functionality.

You’re there!

Angular installation

This section describes how to embed the reusable component when your project uses the Angular framework. Before starting, make sure you’ve fulfilled the prerequisites.

Installation steps

  1. Import www/build/cloud-ui-components.esm.js into your HTML for all HTML pages in your app that you want to integrate.

    Example

    angular include

  2. Add the component in all relevant places within your app. For example: src/app/app.component.html

    Example

    image21

  3. In src/app/app.module.ts make sure you have the following:

    Copy
    Copied
    import { NgModule, CUSTOM\-ELEMENTS\-SCHEMA } from '@angular/core';
@NgModule({schemas: [ CUSTOM\-ELEMENTS\-SCHEMA ]})

    Example

    image10

    Example

    image11

  4. Next steps: configure and customize the component

    Note

    It's important to configure the required parameters, and any optional parameters that you want to customzie. Make sure you read the documentation for the specific component you're integrating before implementing.

    Lytx regularly updates the component-specific documentation as we continue to develop and improve related parameters and other functionality.

You’re there!

Vue JS installation

This section describes how to embed the reusable component when your project uses the Vue JS framework. Before starting, make sure you’ve fulfilled the prerequisites.

Installation steps

  1. Import www/build/cloud-ui-components.esm.js into your HTML for all HTML pages in your app that you want to integrate.

    Example

    image12

  2. Add the component in all relevant places within your app. For example: src/App.vue

    Example

    image13

  3. Next steps: configure and customize the component

    Note

    It's important to configure the required parameters, and any optional parameters that you want to customzie. Make sure you read the documentation for the specific component you're integrating before implementing.

    Lytx regularly updates the component-specific documentation as we continue to develop and improve related parameters and other functionality.

You’re there!