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

Add integrations to your product with drop-in UI components

Intuitive integrations in minutes

How it works

Define your triggers & actions

Drop-in UI code

Rollout integrations & monitor usage

Why your customers will love Rollout

Visual data mapping

Custom fields

Built in testing

Made for ease of use

Intuitive integrations in minutes

Why your customers will love Rollout

Visual data mapping

Custom fields

Built in testing

Made for ease of use

Works with all frontends

Integration APIs & SDKs

Batteries included

Slack support

Secure & Private

Fully white-labeled

New integration delivery

Scalable

Zapier export

What can you build?

Embedded Zapier

One-click integrations

Two-way sync

Works on Mobile

Map Custom Fields

Get connected with Rollout

Embedded Zapier

Embedded Zapier

Embedded Zapier

Embedded Zapier

Embedded Zapier

Embedded Zapier