Installation

HTML Script Tag#

The simplest and fastest way to render the UI component is to use an HTML Script Tag. This approach works great for all web applications.

Below is an example of how to import the library and render it to a div within your HTML page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Rollout demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>

  <body>
    <div id="rollout-container"></div>

    <script src="https://unpkg.com/@rollout/connect-react-dist@latest"></script>
    <script>
      // We generate the token on the server in order to keep
      // the ROLLOUT_CLIENT_SECRET secure.
      // See https://docs.rollout.com/documentation/authenticating-with-rollout
      fetch("/rollout-token").then(async (response) => {
        const container = document.getElementById("rollout-container");
        const data = await response.json();
        const token = data.token;
        // This can be found in the API section of Rollout dashboard
        const apiBaseUrl = "https://my-app.rolloutapp.com/api";
        window.Rollout.defaultTheme();
        const ro = window.Rollout.init({ token, apiBaseUrl });
        ro.renderAutomationsManager(container);
      });
    </script>
  </body>
</html>

HTML Script Tag API#

Upon loading the Rollout script, the Rollout object will be available on the global window. The Rollout object contains the init function, which is used to initialize Rollout instance by passing it the JWT token and the API base URL:

const { Rollout } = window;
const ro = Rollout.init({ token, apiBaseUrl });

The object returned from the init() call contains methods for rendering various Rollout components. All render methods are prefixed with render, followed by name of the component and take 2 arguments:

container (DOM element)
props (object, can be omitted when no props need to be passed in)

For example, to render BlueprintsManager, use the renderBlueprintsManager() method:

const container = document.getElementById("rollout-container");
// See https://docs.rollout.com/components/blueprints-manager/props
const props = {
  blueprints: [],
  showSearchbar: false,
};
ro.renderBlueprintsManager(container, props);

React#

Add to your React project by running the command:

npm install @rollout/connect-react @tanstack/react-query

@tanstack/react-query is a peer dependency of @rollout/connect-react, so it needs to be installed as well, if it's not already installed in your project.

In your app, you can simply import and render a component as follows:

import React, { useState, useEffect } from "react";

import {
  AutomationsManager,
  RolloutConnectProvider,
  defaultTheme,
} from "@rollout/connect-react";

// Optional: Apply the default theme
defaultTheme();

function fetchRolloutToken() {
  // We generate the token on the server in order to keep
  // the ROLLOUT_CLIENT_SECRET secure.
  // See https://docs.rollout.com/documentation/authenticating-with-rollout
  return fetch("/rollout-token")
    .then((resp) => resp.json())
    .then((data) => data.token);
}

export function App() {
  return (
    <div id="app">
      <RolloutConnectProvider 
        token={fetchRolloutToken}
        apiBaseUrl="https://my-app.rolloutapp.com/api"
      >
        <AutomationsManager />
      </RolloutConnectProvider>
    </div>
  );
}

Vue JS or other frontend JS frameworks#

If you're using a different framework, you can use the @rollout/connect-react-dist package which has no dependencies.

First install Rollout in your project by running the command:

npm install @rollout/connect-react-dist

See the VueJS example below:

<template>
  <div ref="rollout" />
</template>

<script>
import { defaultTheme, initRollout } from "@rollout/connect-react-dist";

// Optional: Apply the default theme
defaultTheme();

export default {
  name: "AutomationsManager",
  mounted() {
    // We generate the token on the server in order to keep
    // the ROLLOUT_CLIENT_SECRET secure.
    // See https://docs.rollout.com/documentation/authenticating-with-rollout
    fetch("/rollout-token").then((response) => {
      const data = response.json();
      const { token } = data;
      const apiBaseUrl = "https://my-app.rolloutapp.com/api"
      const ro = initRollout({ token, apiBaseUrl });
      ro.renderAutomationsManager(this.$refs.rollout);
    });
  },
};
</script>