Docs/Build with AI

Connect Widget

TL;DR

React: npm install @repull/connect-widget, render <RepullConnect>. Non-React: embed via script tag. Handles OAuth and API key flows for all 50+ PMS platforms.

A drop-in UI component that lets your users connect their PMS in 30 seconds. The widget handles the full OAuth flow, PMS selection, and credential validation — you just listen for the success callback.

React

Install the React package and render the widget in your app:

npm install @repull/connect-widget

import { ConnectWidget } from '@repull/connect-widget'

function ConnectPage() {
  return (
    <ConnectWidget
      apiKey="sk_live_YOUR_KEY"
      workspaceId="YOUR_WORKSPACE_ID"
      onSuccess={(connection) => {
        console.log('Connected:', connection.accountId)
        console.log('PMS:', connection.platform)
        // Save connection.accountId to your database
      }}
      onError={(error) => {
        console.error('Connection failed:', error.message)
      }}
      onClose={() => {
        console.log('Widget closed')
      }}
    />
  )
}

Script Tag Embed

For non-React apps, embed the widget via a script tag. It mounts into any DOM element:

<div id="repull-connect"></div>

<script src="https://cdn.repull.dev/connect-widget.js"></script>
<script>
  RepullConnect.mount('#repull-connect', {
    apiKey: 'sk_live_YOUR_KEY',
    workspaceId: 'YOUR_WORKSPACE_ID',
    onSuccess: function(connection) {
      console.log('Connected:', connection.accountId)
    },
    onError: function(error) {
      console.error('Failed:', error.message)
    },
  })
</script>

Theming

Customize the widget appearance to match your brand:

<ConnectWidget
  apiKey="sk_live_YOUR_KEY"
  workspaceId="YOUR_WORKSPACE_ID"
  theme="dark"
  appearance={{
    accentColor: '#6366f1',
    borderRadius: '12px',
    fontFamily: 'Inter, sans-serif',
  }}
  logo="https://your-app.com/logo.svg"
  title="Connect your property manager"
  description="We'll sync your properties and reservations automatically."
  onSuccess={(connection) => console.log(connection)}
/>

Options Reference

Prop	Type	Description
`apiKey`	string	Your Repull API key (required)
`workspaceId`	string	Your workspace ID (required)
`onSuccess`	function	Called with connection details on successful auth
`onError`	function	Called when connection fails
`onClose`	function	Called when user closes the widget
`theme`	"light" \| "dark"	Color scheme (default: "light")
`appearance`	object	Custom accentColor, borderRadius, fontFamily
`logo`	string	URL to your logo image
`title`	string	Custom heading text
`description`	string	Custom description text
`platforms`	string[]	Filter to specific PMS platforms

Filter platforms

Use the platforms prop to show only relevant PMS options. For example, platforms={['guesty', 'hostaway', 'lodgify']} limits the list to three providers.

Previous← SDKs NextAI Operations →