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://usesela.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' | 'top-right' | 'top-left''bottom-right'Corner position of the floating button.
data-primary-colorhex string#6B4F3DMain brand color (e.g., #000000).

Runtime Control

After the script loads, the widget exposes a canonical window.Sela API. The older window.SelaWidget alias still works during migration.

javascript
window.Sela.show();

window.Sela.updateConfig({
  theme: 'dark',
  primaryColor: '#0f766e',
});

window.Sela.hide();