Add integrations to your product with drop-in UI components

Rollout is the only product where you connect your API once and then drop-in UI components to embed every integration within your app

Get started

Intuitive integrations in minutes

Add pre-built components for a variety of use cases. Customize to match your app.

import {
  RolloutConnectProvider,
  BlueprintsManager,
  defaultTheme,
} from "@rollouthq/connect-react";

const APP_KEY = "YOUR_ROLLOUT_APP_KEY";

const blueprint = {
  blueprintKey: "salesforce-oneclick",
  name: "Salesforce",
  renderFields: {
    trigger: false,
    action: ({ ActionCredentialIdField }) => <ActionCredentialIdField />,
  },
  prefilled: {
    trigger: {
      appKey: APP_KEY,
      triggerKey: "newEvent",
    },
    action: {
      appKey: "salesforce",
      actionKey: "addNewContact",
    },
  },
};

const blueprints = [blueprint];

defaultTheme();

function App() {
  return (
    <RolloutConnectProvider token="YOUR_TOKEN">
      <BlueprintsManager
        showSearchbar={false}
        blueprints={blueprints}
      />
    </RolloutConnectProvider>
  );
}
<div id="rollout-container"></div>
<script src="https://unpkg.com/@rollouthq/connect-react-dist@latest"></script>

<script>
  initRolloutComponent();

  function initRolloutComponent() {
    const APP_KEY = "YOUR_ROLLOUT_APP_KEY";
    const container = document.getElementById("rollout-container");
    const { init, createElement, defaultTheme } = window.Rollout;
    const ro = init({ token: "YOUR_ROLLOUT_TOKEN" });
    defaultTheme();

    const blueprint = {
      blueprintKey: "salesforce-oneclick",
      name: "Salesforce",
      renderFields: {
        trigger: false,
        action: ({ ActionCredentialIdField }) =>
          createElement(ActionCredentialIdField),
      },
      prefilled: {
        trigger: {
          appKey: APP_KEY,
          triggerKey: "newEvent",
        },
        action: {
          appKey: "salesforce",
          actionKey: "addNewContact",
        },
      },
    };

    ro.renderBlueprintsManager(container, {
      showSearchbar: false,
      blueprints: [blueprint],
    });
  }
</script>
import {
  RolloutConnectProvider,
  BlueprintsManager,
  defaultTheme,
} from "@rollouthq/connect-react";

const APP_KEY = "YOUR_ROLLOUT_APP_KEY";

const trigger = {
  appKey: APP_KEY,
  triggerKey: "newEvent",
};

const renderFields = {
  trigger: false,
  action: {
    appKey: ({ ActionAppKeyField }) => <ActionAppKeyField disabled />,
    actionKey: ({ ActionKeyField }) => <ActionKeyField disabled />,
  },
};

const blueprints = [
  {
    blueprintKey: "slack",
    name: "Slack",
    renderFields,
    prefilled: {
      trigger,
      action: { appKey: "slack", actionKey: "sendDirectMessage" },
    },
  },
  {
    blueprintKey: "msTeams",
    name: "Microsoft Teams",
    renderFields,
    prefilled: {
      trigger,
      action: { appKey: "msTeams", actionKey: "sendChatMessage" },
    },
  },
  // ...rest of the integrations
];

defaultTheme();

function App() {
  return (
    <RolloutConnectProvider token="YOUR_TOKEN">
      <BlueprintsManager blueprints={blueprints} />
    </RolloutConnectProvider>
  );
}
<div id="rollout-container"></div>
<script src="https://unpkg.com/@rollouthq/connect-react-dist@latest"></script>

<script>
  initRolloutComponent();

  function initRolloutComponent() {
    const APP_KEY = "YOUR_ROLLOUT_APP_KEY";
    const container = document.getElementById("rollout-container");
    const { init, createElement, defaultTheme } = window.Rollout;
    const ro = init({ token: "YOUR_ROLLOUT_TOKEN" });
    defaultTheme();

    const trigger = {
      appKey: APP_KEY,
      triggerKey: "newEvent",
    };

    const renderFields = {
      trigger: false,
      action: {
        appKey: ({ ActionAppKeyField }) =>
          createElement(ActionAppKeyField, { disabled: true }),
        actionKey: ({ ActionKeyField }) =>
          createElement(ActionKeyField, { disabled: true }),
      },
    };

    const blueprints = [
      {
        blueprintKey: "slack",
        name: "Slack",
        renderFields,
        prefilled: {
          trigger,
          action: { appKey: "slack", actionKey: "sendDirectMessage" },
        },
      },
      {
        blueprintKey: "msTeams",
        name: "Microsoft Teams",
        renderFields,
        prefilled: {
          trigger,
          action: { appKey: "msTeams", actionKey: "sendChatMessage" },
        },
      },
      // ...rest of the integrations
    ];

    ro.renderBlueprintsManager(container, { blueprints });
  }
</script>
import {
  RolloutConnectProvider,
  AutomationsManager,
  defaultTheme,
} from "@rollouthq/connect-react";

const APP_KEY = "YOUR_ROLLOUT_APP_KEY";

defaultTheme();

function App() {
  return (
    <RolloutConnectProvider token="YOUR_TOKEN">
      <AutomationsManager
        prefilled={{
          trigger: { appKey: APP_KEY },
        }}
        renderFields={{
          trigger: {
            appKey: ({ TriggerAppKeyField }) => <TriggerAppKeyField disabled />,
          },
        }}
      />
    </RolloutConnectProvider>
  );
}
<div id="rollout-container"></div>
<script src="https://unpkg.com/@rollouthq/connect-react-dist@latest"></script>

<script>
  initRolloutComponent();

  function initRolloutComponent() {
    const APP_KEY = "YOUR_ROLLOUT_APP_KEY";
    const container = document.getElementById("rollout-container");
    const { init, createElement, defaultTheme } = window.Rollout;
    const ro = init({ token: "YOUR_ROLLOUT_TOKEN" });
    defaultTheme();

    ro.renderAutomationCreator(container, {
      prefilled: {
        trigger: { appKey: APP_KEY },
      },
      renderFields: {
        trigger: {
          appKey: ({ TriggerAppKeyField }) =>
            createElement(TriggerAppKeyField, { disabled: true }),
        },
      },
    });
  }
</script>
import {
  AutomationsManager,
  RolloutConnectProvider,
} from "@rollouthq/connect-react";

import "./rollout-custom-theme.css";

const APP_KEY = "YOUR_ROLLOUT_APP_KEY";

function App() {
  return (
    <RolloutConnectProvider token="YOUR_TOKEN">
      <AutomationsManager
        prefilled={{
          trigger: { appKey: APP_KEY },
        }}
        renderFields={{
          trigger: ({ Card, TriggerKeyField }) => (
            <Card>
              <div style={{ fontWeight: "bold" }}>
                When this happens
              </div>
              <TriggerKeyField />
            </Card>
          ),
          action: ({
            Card,
            ActionAppKeyField,
            ActionKeyField,
            ActionCredentialIdField,
            ActionInputFields,
          }) => (
            <Card>
              <div style={{ fontWeight: "bold" }}>
                Do this
              </div>
              <ActionAppKeyField />
              <ActionKeyField />
              <ActionCredentialIdField />
              {ActionInputFields && <ActionInputFields />}                   .
            </Card>
          ),
        }}
      />
    </RolloutConnectProvider>
  );
}
<div id="rollout-container"></div>
<script src="https://unpkg.com/@rollouthq/connect-react-dist@latest"></script>

<script>
  initRolloutComponent();

  function initRolloutComponent() {
    const APP_KEY = "YOUR_ROLLOUT_APP_KEY";
    const container = document.getElementById("rollout-container");
    const { init, createElement, defaultTheme } = window.Rollout;
    const ro = init({ token: "YOUR_ROLLOUT_TOKEN" });
    defaultTheme();

    ro.renderAutomationCreator(container, {
      prefilled: {
        trigger: { appKey: APP_KEY },
      },
      renderFields: {
        trigger: ({ Card, TriggerKeyField }) =>
          createElement(
            Card,
            null,
            createElement(
              "div",
              { style: { fontWeight: "bold" } },
              "When this happens"
            ),
            createElement(TriggerKeyField)
          ),
        action: ({
          Card,
          ActionAppKeyField,
          ActionKeyField,
          ActionCredentialIdField,
          ActionInputFields,
        }) =>
          createElement(
            Card,
            null,
            createElement(
              "div",
              { style: { fontWeight: "bold" } },
              "Do this"
            ),
            createElement(ActionAppKeyField),
            createElement(ActionKeyField),
            createElement(ActionCredentialIdField),
            ActionInputFields && createElement(ActionInputFields)
          ),
      },
    });
  }
</script>

<style>/* custom theme overrides */</style>

How it works

Why your customers will love Rollout

Rollout makes it easy for your customers to configure how your app integrates with all their others without running into issues

Visual data mapping

Users can choose how to map data between apps. They can reference variables & format outputs.

Custom fields

Rollout fetches custom fields & data from other apps so users can intuitively customize their integrations.

Built in testing

Enable users to test their integrations while setting them up to avoid errors.

Made for ease of use

Rollout understands user intent and intelligently transforms data.

Intuitive integrations in minutes

Add pre-built components for a variety of use cases. Customize to match your app.

Interactive embed - 1-click integrations

Code preview - 1 click integrations

Interactive embed - Marketplace

Code preview - Marketplace

Interactive embed - Workflows

Code preview - Workflows

Interactive embed - Customised

Code preview - Customised

Why your customers will love Rollout

Rollout makes it easy for your customers to configure how your app integrates with all their others without running into issues

Visual data mapping

Users can choose how to map data between apps. They can reference variables & format outputs.

Custom fields

Rollout fetches custom fields & data from other apps so users can intuitively customize their integrations.

Built in testing

Enable users to test their integrations while setting them up to avoid errors.

Made for ease of use

Rollout understands user intent and intelligently transforms data.

Works with all frontends

Compatible with React, Vue & other JS frameworks or any HTML or server-side rendered page

Integration APIs & SDKs

Use a single API or SDK to get trigger events & call actions in third-party apps

Batteries included

Built in functionality for OAuth refresh, webhook subscriptions, event de-duplication & more.

Slack support

Customers can add a Slack connect channel to get implementation and ongoing support

Secure & Private

SOC2 & GDPR compliant.  DPAs available for customers.

Fully white-labeled

Customize every interaction to match your app and remove any Rollout branding.

New integration delivery

Need an unsupported integration? Integrations requests are fulfilled in weeks.

Scalable

Run a few or millions of automated tasks in parallel without worrying about their execution.

Zapier export

Have an existing Zapier integration? Reuse your existing API endpoints to get setup in an hour

What can you build?

Rollout’s simple components can be used to build powerful product experiences

Get connected with Rollout

Get started
Embedded Zapier

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Embedded Zapier

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Embedded Zapier

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Embedded Zapier

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.