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.

1-click
Marketplace
Workflows
Customized
React
HTML
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>
React
HTML
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>
React
HTML
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>
React
HTML
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

Define your triggers & actions

Describe events and actions in your application as webhooks or API endpoints. Configure inputs, setup dropdowns and anything else in our dashboard.

Add UI code

Decide on your use case and drop in the right UI components like <AutomationEditor/> or <BlueprintsManager/> for 1-click integrations. Customize the UI/UX for the ideal experience.

Rollout integrations & monitor usage

Your users can now connect triggers & actions in your app to triggers & actions in all the other apps we support (which grows every week). We’ll send you usage data and notify you of any issues.

Define Triggers and Actions
Add UI Code to your app
Rollout integrations

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.

1-click
Marketplace
Workflows
Customized

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.

Fully white-labeled

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

Scalable

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

Secure & Private

SOC2 & GDPR compliant.  DPAs available for customers.

New integration delivery

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

Slack support

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

Zapier import

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

One-click integrations
Embedded Zapier
Two-way Sync
Mobile
Map Custom Fields

Get connected with Rollout

Get started
Embedded Zapier
Embedded Zapier
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.

Resources
Legal
© 2023 Playbook Software Inc.