Skip to main content
Create an AngularJS controller that mounts Rollout Link into a DOM element that AngularJS owns: 
<div ng-app="rolloutDemo" ng-controller="RolloutController as vm">
  <h1>Your Application</h1>
  <div id="rollout-link-container"></div>
</div>
Fetch your Rollout token from the backend, load the Rollout stylesheet, then mount the UI component into the container: 
<script>
  angular.module("rolloutDemo", []).controller("RolloutController", function RolloutController($http, $scope) {
    var rolloutRoot = null;

    function ensureStylesheet() {
      if (document.querySelector('link[data-rollout-link-styles="true"]')) {
        return;
      }

      var styleLink = document.createElement("link");
      styleLink.rel = "stylesheet";
      styleLink.href = "https://esm.sh/@rollout/link-react@latest/dist/style.css";
      styleLink.setAttribute("data-rollout-link-styles", "true");
      document.head.appendChild(styleLink);
    }

    $http
      .get("/rollout-token")
      .then(function (response) {
        return response.data.token;
      })
      .then(function (token) {
        ensureStylesheet();

        return Promise.all([
          import("https://esm.sh/react@18"),
          import("https://esm.sh/react-dom@18/client"),
          import("https://esm.sh/@rollout/link-react@latest?deps=react@18,react-dom@18")
        ]).then(function ([React, ReactDOM, rollout]) {
          var container = document.getElementById("rollout-link-container");

          rolloutRoot = ReactDOM.createRoot(container);
          rolloutRoot.render(
            React.createElement(
              rollout.RolloutLinkProvider,
              { token: token },
              React.createElement(rollout.CredentialsManager)
            )
          );
        });
      });

    $scope.$on("$destroy", function () {
      if (rolloutRoot) {
        rolloutRoot.unmount();
      }
    });
  });
</script>
Now you should see something that looks like this: A rendering of the Rollout Link UI Component

​
Step 3 (Optional): Handle when a new credential is added

You can pass onCredentialAdded to run custom AngularJS logic after a user connects an integration: 
<script>
  angular.module("rolloutDemo", []).controller("RolloutController", function RolloutController($http, $scope) {
    var rolloutRoot = null;

    function ensureStylesheet() {
      if (document.querySelector('link[data-rollout-link-styles="true"]')) {
        return;
      }

      var styleLink = document.createElement("link");
      styleLink.rel = "stylesheet";
      styleLink.href = "https://esm.sh/@rollout/link-react@latest/dist/style.css";
      styleLink.setAttribute("data-rollout-link-styles", "true");
      document.head.appendChild(styleLink);
    }

    function handleCredentialAdded(payload) {
      console.log("New credential added", payload.id, payload.appKey);

      $scope.$applyAsync(function () {
        $scope.latestCredential = payload;
      });
    }

    $http
      .get("/rollout-token")
      .then(function (response) {
        return response.data.token;
      })
      .then(function (token) {
        ensureStylesheet();

        return Promise.all([
          import("https://esm.sh/react@18"),
          import("https://esm.sh/react-dom@18/client"),
          import("https://esm.sh/@rollout/link-react@latest?deps=react@18,react-dom@18")
        ]).then(function ([React, ReactDOM, rollout]) {
          var container = document.getElementById("rollout-link-container");

          rolloutRoot = ReactDOM.createRoot(container);
          rolloutRoot.render(
            React.createElement(
              rollout.RolloutLinkProvider,
              { token: token },
              React.createElement(rollout.CredentialsManager, {
                onCredentialAdded: handleCredentialAdded
              })
            )
          );
        });
      });

    $scope.$on("$destroy", function () {
      if (rolloutRoot) {
        rolloutRoot.unmount();
      }
    });
  });
</script>

​
Full implementation example

<!doctype html>
<html ng-app="rolloutDemo">
  <head>
    <meta charset="utf-8" />
    <title>Rollout Link with AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
  </head>
  <body ng-controller="RolloutController as vm">
    <h1>Your Application</h1>
    <div id="rollout-link-container"></div>

    <script>
      angular.module("rolloutDemo", []).controller("RolloutController", function RolloutController($http, $scope) {
        var rolloutRoot = null;

        function ensureStylesheet() {
          if (document.querySelector('link[data-rollout-link-styles="true"]')) {
            return;
          }

          var styleLink = document.createElement("link");
          styleLink.rel = "stylesheet";
          styleLink.href = "https://esm.sh/@rollout/link-react@latest/dist/style.css";
          styleLink.setAttribute("data-rollout-link-styles", "true");
          document.head.appendChild(styleLink);
        }

        function handleCredentialAdded(payload) {
          console.log("New credential added", payload.id, payload.appKey);
        }

        $http
          .get("/rollout-token")
          .then(function (response) {
            return response.data.token;
          })
          .then(function (token) {
            ensureStylesheet();

            return Promise.all([
              import("https://esm.sh/react@18"),
              import("https://esm.sh/react-dom@18/client"),
              import("https://esm.sh/@rollout/link-react@latest?deps=react@18,react-dom@18")
            ]).then(function ([React, ReactDOM, rollout]) {
              var container = document.getElementById("rollout-link-container");

              rolloutRoot = ReactDOM.createRoot(container);
              rolloutRoot.render(
                React.createElement(
                  rollout.RolloutLinkProvider,
                  { token: token },
                  React.createElement(rollout.CredentialsManager, {
                    onCredentialAdded: handleCredentialAdded
                  })
                )
              );
            });
          });

        $scope.$on("$destroy", function () {
          if (rolloutRoot) {
            rolloutRoot.unmount();
          }
        });
      });
    </script>
  </body>
</html>
If you want to build your own integration cards or connector-specific auth flows, see Build your own integration UI with Rollout Link components.