Widget Configuration

Customize the widget's appearance and behavior via data attributes or props.

HTML Attributes

You can configure the widget directly in the script tag using data- attributes.

html
<script 
  src="https://sela.oyaps.com/widget.js" 
  data-org-id="YOUR_ORG_ID"
  data-theme="dark"
  data-position="bottom-left"
></script>

Configuration Options

AttributeTypeDefaultDescription
data-org-idstring-Required. Your unique organization ID.
data-theme'light' | 'dark' | 'auto''auto'Color theme of the widget. 'auto' respects system preference.
data-position'bottom-right' | 'bottom-left''bottom-right'Corner position of the floating button.
data-primary-colorhex string#6B4F3DMain brand color (e.g., #000000).

React Component

If you are using React, you can integrate the widget with a lightweight wrapper component pattern.

tsx
import { SelaWidget } from '@sela/react';

export default function App() {
  return (
    <SelaWidget 
        orgId="YOUR_ORG_ID" 
        theme="dark" 
        position="bottom-right" 
    />
  );
}