Custom implementation of PLuG widget

PLuG has a completely no-code way of changing the look and interaction of your widget. In case you wish to make your PLuG widget more interactive and customized to how your app is structured, you can use these customization properties to set up your widget.

All of these properties have to be passed as parameters while initializing the PLuG widget using plugSDK.init(). For details, refer to the PLuG SDK methods documentation.

Code sandbox

Properties

PLuG launcher

Customize the widget launcher to best fit your website or app; or show or hide the default PLuG widget launcher.

To customize your PLuG launcher styles, specify the CSS selector in the custom_launcher_selector property. This CSS selector is the reference based on which your PLuG widget opens. This property accepts a string value. The selector can also be configured through the plug settings on app.devrev.ai.

1
custom_launcher_selector?: '#my-plug-widget'

Use the enable_default_launcher property only if you are not using the custom launcher selector.

1
enable_default_launcher?: boolean;

The default value is true.

Widget alignment

Align the widget to be placed on the left or right of the launcher.

The widget can be set to open to the left or to the right of the custom launcher.

1
widget_alignment?: 'left' | 'right';

The default value is right.

Spacing

Adjust spacing of the PLuG widget.

Two properties are available to apply spacing.

• The bottom property determines the padding from the bottom of the launcher.

  The default value is 10px.

• The side property determines the spacing of the widget from the launcher icon.

  The default value is 0px.

1
spacing?:{
2
    bottom?: '10px',
3
    side?:'10px',
4
}

Light/dark theme

Set the theme of the PLuG widget.

1
theme?: 'dark' | 'light';

The default value is light.