@revertdotdev/revert-vue NPM

@revertdotdev/revert-vue

Overview

Revert is the fastest way to integrate with your customer's tools with a single set of APIs & SDKs.

This package contains the Vue sdk with the RevertConnectVue component.

Getting Started

First, install the Revert npm package:

yarn add @revertdotdev/revert-vue

Usage

Adding the <RevertConnectVue> component will instantly give your app a way for your users to connect their tools by opening our Modal on clicking where they will be a able to choose & connect their 3rd party tool.

<script>
import { RevertConnectVue } from '@revertdotdev/revert-vue'

export default {
  name: 'App',
  components: {
    RevertConnectVue,
  },
  data() {
    return {
      config: {
        revertToken: 'YOUR_TOKEN',
        tenantId: 'CUSTOMER_TENANT_ID',
      },
    };
  },
};
</script>

<template>
  <div class="container">
    <RevertConnect :config="config" />
  </div>
</template>

You can optionally also pass your own values to the buttonStyle and buttonText props:

<script>
import { RevertConnectVue } from '@revertdotdev/revert-vue'

export default {
  name: 'App',
  components: {
    RevertConnectVue,
  },
  data() {
    return {
      config: {
        revertToken: 'YOUR_TOKEN',
        tenantId: 'CUSTOMER_TENANT_ID',
      },
      buttonStyle: {
        padding: '10px',
        outline: 'none',
        background: 'rgb(39, 45, 192)',
        border: '1px solid rgb(39, 45, 192)',
        borderRadius: '5px',
        cursor: 'pointer',
        color: '#fff',
      },
      buttonText: "Connect your tool"
    };
  },
};
</script>

<template>
  <div class="container">
    <RevertConnectVue :config="config" :button-style="buttonStyle" :button-text="buttonText"/>
  </div>
</template>

If you wish to use your own UI for it, you can use the useRevertConnnect hook and call the open() method when appropriate. For example:

<script>
export default {
  setup() {
    const { loading, open, error } = useRevertConnect({ config: configObject });
    return {
      loading,
      error,
      open,
    };
  }
};
</script>
<template>
  <div class="container">
    <button :disabled="loading || Boolean(error)"
    @click="open()"
    id="revert-connect-button"
    :style="{ padding: '10px', outline: 'none', background: 'rgb(39, 45, 192)',
              border: '1px solid rgb(39, 45, 192)', borderRadius: '5px',
              cursor: 'pointer', color: '#fff' }">
      Connect your tool
    </button>
  </div>
</template>

You can also pass in the integrationId inside the open() method above to directly open the integration you are interested in. These are the integration IDs that are currently supported: