Widget Implementation Instruction

Usage

Add the following script to the head tag of your HTML page.

<script src="https://effectssdk.com/sdk/web/widget.js"></script>

The next step is to initialize the widget.
Add the following script to the head section then add button to your layout that will toggle widget:

<script>
    EffectsSDKWidget.init("SDK_ID", {
        buttonId: "button-effects",
    });
</script>

...

<button id="button-effects" type="button">Show Effects SDK widget!</button>

Replace SDK_ID with the real ID and set the ID of the button that will be used to open the widget. You're all set!

Options

You can customize Widget on init using options.

EffectsSDKWidget.init("SDK_ID", options: Options);

interface Options {

  /** Target button id. */
  buttonId?: string;

  /** Class, applied to button, when widget is open.
   * "active" by default. */
  buttonActiveClass?: string;

  /** Enables widget drag.
   * true by default.
   * false by default when {@link buttonId} is defined. */
  draggable?: boolean | "x" | "y";

  /** Widget initial visibility.
   * true by default.
   * false by default when {@link buttonId} is defined. */
  hidden?: boolean;

  /** Widget panel visibility.
   * true by default.
   * false by default when {@link buttonId} is defined.*/
  alwaysOpen?: boolean;

  /** Close widget button visibility.
   * false by default. */
  showCloseButton?: boolean;

  /** Toggle on/off state button visibility.
   * false by default. */
  showOnOffButton?: boolean;

  /** Initial x coordinate of widget position. */
  x?: number;

  /** Initial y coordinate of widget position. */
  y?: number;

  /** Default panel placement when open.
   * "left" by default. */
  panelPlacement?: "left" | "right";

  /** Callback called when widget is ready. */
  onReady?: Function;
}

Styling

You can customize styles of Widget using the following CSS variables:

--vbsdk--bg-color: #ffffff;
--vbsdk--section-bg-color: #f3f3f3;
--vbsdk--icon-color: #807a86;
--vbsdk--icon-bg-color: transparent;
--vbsdk--icon-color-active: #0090fd;
--vbsdk--icon-bg-color-active: #0090fd1a;
--vbsdk--icon-color-enabled: #0090fd;
--vbsdk--icon-bg-color-enabled: #ffffff;
--vbsdk--icon-color-danger: #d42b00;
--vbsdk--icon-bg-color-danger: #ffffff;
--vbsdk--icon-size: 1.25rem;
--vbsdk--border-radius: 0.25rem;
--vbsdk--section-padding: 0.375rem;
--vbsdk--font-family: inherit;
--vbsdk--font-size: inherit;