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/@rollouthq/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.rollouthq.com/documentation/authenticating-with-rollout
      fetch("/rollout-token").then((response) => {
        const container = document.getElementById("rollout-container");
        const data = response.json();
        const token = data.token;
        window.Rollout.defaultTheme();
        const ro = window.Rollout.init({ token });
        ro.renderAutomationsManager(container);
      });
    </script>
  </body>
</html>

React#

Add to your React project by running the command:

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

@tanstack/react-query is a peer dependency of @rollouthq/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 "@rollouthq/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.rollouthq.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}>
        <AutomationsManager />
      </RolloutConnectProvider>
    </div>
  );
}

Vue JS or other frontend JS frameworks#

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

First install Rollout in your project by running the command:

npm install @rollouthq/connect-react-dist

See the VueJS example below:

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

<script>
import { defaultTheme, initRollout } from "@rollouthq/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.rollouthq.com/documentation/authenticating-with-rollout
    fetch("/rollout-token").then((response) => {
      const data = response.json();
      const { token } = data;
      const ro = initRollout({ token });
      ro.renderAutomationsManager(this.$refs.rollout);
    });
  },
};
</script>