Integrating Flexmonster

Get started with Flexmonster CLI — the most convenient way to work with Flexmonster:

Step 1.1. Install Flexmonster CLI from npm:

npm install -g flexmonster-cli

Step 1.2. Get Flexmonster by running the following command inside your project:

flexmonster add js-flexmonster

This command downloads the flexmonster npm package to node_modules/ and adds it as a dependency to package.json. Check out the structure of the flexmonster package.

Add Flexmonster to your project by including the files directly from our CDN:

• Use the latest version of the component:

  <script src="https://cdn.flexmonster.com/flexmonster.js"></script>

• Use a specific version of the component:

  <script src="https://cdn.flexmonster.com/2.9.45/flexmonster.js"></script>

Note We recommend using a specific Flexmonster version to avoid unexpected component updates.

Add Flexmonster to your project by running the npm install command:

• Install the latest version of the component:

  npm install flexmonster --save-exact

• Install a specific version of the component:

  npm install flexmonster@2.9.45 --save-exact

Note We recommend installing Flexmonster with the --save-exact flag to avoid unexpected component updates.

Check out the structure of the flexmonster npm package.

Download a ZIP archive to use Flexmonster as a local package:

Step 1.1. Download the .zip package with Flexmonster:

Check out the structure of the downloaded package.

Step 1.2. Unarchive the package and copy the flexmonster/ folder into your project.

If you have a JVM-based web application, you can include Flexmonster in it using WebJars:

Step 1.1. Go to WebJars and search for Flexmonster using the Search input field.

Step 1.2. In the Build Tool column, select the tab with the build tool used in your project (e.g., Maven).

Step 1.3. Include Flexmonster in your configuration file using the code snippet provided in the Build Tool column. For example, Maven’s pom.xml configuration file should look similar to the following:

<dependencies>
  ...
  <dependency>
    <groupId>org.webjars</groupId>
    <artifactId>flexmonster</artifactId>
    <version>2.9.0</version>
  </dependency>
  ...
</dependencies>

Flexmonster can now be used in your JVM-based project.

Step 2.1. In your HTML, add a <div> container for Flexmonster:

<div id="pivotContainer">The component will appear here</div>

Note The created <div> must have an id attribute (e.g., pivotContainer). It will be used to initialize Flexmonster.

Step 2.2. Create a Flexmonster instance using the new Flexmonster() API call:

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="pivotContainer">The component will appear here</div>
 
<script>
  const pivot = new Flexmonster({
    // container is the id of the <div> created in step 2.1
    container: "pivotContainer",
    componentFolder: "https://cdn.flexmonster.com/",
    toolbar: true
  });
</script>

Notice the componentFolder parameter — it should point to the folder with Flexmonster files. Since Flexmonster is included from our CDN, the componentFolder should be defined as https://cdn.flexmonster.com/ (or https://cdn.flexmonster.com/<version>/ if you are using a specific Flexmonster version).

This step mentions only some of Flexmonster's initialization parameters. See the full list of available parameters in the API reference: Flexmonster().

Step 2.1. Import flexmonster.js:

<script src="flexmonster/flexmonster.js"></script>

Step 2.2. In your HTML, add a <div> container for Flexmonster:

<div id="pivotContainer">The component will appear here</div>

Note The created <div> must have an id attribute (e.g., pivotContainer). It will be used to initialize Flexmonster.

Step 2.3. Create a Flexmonster instance using the new Flexmonster() API call:

<script src="flexmonster/flexmonster.js"></script>
<div id="pivotContainer">The component will appear here</div>
 
<script>
  const pivot = new Flexmonster({
    // container is the id of the <div> created in step 2.2
    container: "pivotContainer",
    componentFolder: "flexmonster/",
    toolbar: true
  });
</script>

Notice the componentFolder parameter — it should point to the folder with Flexmonster files. If this folder is located in the root of your project, the componentFolder should be set to "flexmonster/". Otherwise, adjust the componentFolder according to the flexmonster/ folder's location in your project.

Note To use a trial version of Flexmonster from the ZIP package, you need to set a trial key. It can be found in the TrialKey.txt file inside the package you have downloaded. Copy the contents of the file and set the trial key using the licenseKey initialization parameter:

const pivot = new Flexmonster({
  container: "pivotContainer",
  // ...
  licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
});

This step mentions only some of Flexmonster's initialization parameters. See the full list of available parameters in the API reference: Flexmonster().