Configuring the PLuG Widget

You can easily configure various style properties and callbacks while initializing the widget. Please refer to the table below for more details.


Configuration options:#

Auth:#

Configuration optionTypeRequiredDefault valueDescription
sessionTokenstringYesnullSession Token of the Rev user

Style:#

Configuration optionTypeRequiredDefault valueDescription
alignmentstringNoleftChoose the side of the screen you want the widget to show on. Possible values: left/ right
horizontalOffsetstringNo1.5remSpecify the horizontal distance from the left/right corner of the screen. All CSS units are accepted.
verticalOffsetstringNo1.5remSpecify the vertical distance from the bottom of the screen. All CSS units are accepted.
hideFloatingToggleButtonbooleanNofalseHide the default floating toggle button (DevRev logo).
This can be used to create a custom trigger which uses the open/close methods directly.
themestringNosystemChoose the theme of the widget. Possible values: light dark
logo stringNoCustomize the display logo of the widget. A 20x20 image is preferred.

How to configure the PLuG widget#

const config = {
  auth: {
    sessionToken: '<REV_SESSION_TOKEN>'
  },
  style: {
    alignment: 'right',
    hideFloatingToggleButton: false,
    horizontalOffset: '20px',
    verticalOffset: '20px',
    theme: 'dark',
    logo: 'https://app.devrev.ai/static/profile-circle-black.png'
  }
};

const callbacks = {
  onReady: () => {
    console.log('widget is ready!');
  },
  onOpen: () => {
    console.log('widget opened');
  },
  onClose: () => {
    console.log('widget closed');
  }
}
const widget = new window.Plug(config, callbacks);

Interface:#

interface DevRevSDKConfig {
  auth: {
    sessionToken: string;
  },
  style?: {
    hideFloatingToggleButton?: boolean;
    alignment?: 'left' | 'right';
    horizontalOffset?: string;
    verticalOffset?: string;
  }
}

interface DevRevSDKCallbacks {
  onReady?(): void;
  onOpen?(): void;
  onClose?(): void;
}