AngularJS

Step 1: Add a container for Rollout Link

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>

Step 2: Initialize Rollout Link from AngularJS

Fetch your Rollout token from the backend, load the Rollout stylesheet, then mount the UI component into the container:

Choose what data to sync

An entity is a type of data, such as people, notes, or tasks. People sync automatically where supported. The examples below enable optional notes and tasks with entitiesToSync; choose the types your app needs. Alternatively, omit this prop to use the defaults you choose in dashboard Settings. An explicit selection in code takes precedence over those defaults. This configures new connections. For other types or accounts that are already connected, see Choose what data to sync.

<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, {
                entitiesToSync: { notes: true, tasks: true }
              })
            )
          );
        });
      });

    $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, {
                entitiesToSync: { notes: true, tasks: true },
                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, {
                    entitiesToSync: { notes: true, tasks: true },
                    onCredentialAdded: handleCredentialAdded
                  })
                )
              );
            });
          });

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

Next step: custom Link UIs

If you want to build your own integration cards or connector-specific auth flows, see Build your own integration UI with Rollout Link components.

Overview

Getting Started

Features

Customization

Advanced

Troubleshooting

Security & Legal

Step 1: Add a container for Rollout Link

Step 2: Initialize Rollout Link from AngularJS

Choose what data to sync

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

Full implementation example

Next step: custom Link UIs

​Step 1: Add a container for Rollout Link

​Step 2: Initialize Rollout Link from AngularJS

​Choose what data to sync

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

​Full implementation example

​Next step: custom Link UIs

Step 1: Add a container for Rollout Link

Step 2: Initialize Rollout Link from AngularJS

Choose what data to sync

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

Full implementation example

Next step: custom Link UIs