Configuration

Customize the Web Dialler's appearance and behavior using data-* attributes on the script tag or the JavaScript API.

Script Tag Attributes

Attribute	Values	Default	Description
data-api-key	string	—	Required. Your user-specific Web Dialler Token provided by Superfone.
data-position	bottom-right, bottom-left	bottom-right	Position of the floating call button.
data-theme	light, dark	light	Widget color theme.
data-auto-connect	true, false	true	Whether to connect automatically on page load.

Example

<script
  src="https://cdn.superfone.co.in/widgets/phoenix/phoenix-widget.js"
  data-api-key="USER_WEB_DIALLER_TOKEN"
  data-position="bottom-left"
  data-theme="dark"
  data-auto-connect="true"
></script>

JavaScript Configuration

For more control, configure the widget using the global PhoenixWidget object before the script loads:

<script>
  window.PhoenixWidget = {
    config: {
      apiKey: 'USER_WEB_DIALLER_TOKEN',
      position: 'bottom-left',
      theme: 'dark',
      autoConnect: true,
      onReady: function () {
        console.log('Web Dialler is ready');
      },
      onError: function (error) {
        console.error('Web Dialler error:', error.message);
      },
      onCallStart: function (number) {
        console.log('Call started to:', number);
      },
      onCallEnd: function (number) {
        console.log('Call ended with:', number);
      },
    },
  };
</script>
<script src="https://cdn.superfone.co.in/widgets/phoenix/phoenix-widget.js"></script>

tip

When using JavaScript configuration, you don't need the data-api-key attribute on the script tag — the apiKey field in config takes its place.

Configuration Options

Option	Type	Default	Description
apiKey	string	—	Required. Your user-specific Web Dialler Token.
position	string	'bottom-right'	Floating button position: 'bottom-right' or 'bottom-left'.
theme	string	'light'	Color theme: 'light' or 'dark'.
autoConnect	boolean	true	Connect to calling infrastructure on load. Set to false to connect manually.

Callback Options

Use callbacks to integrate the widget with your application logic — update your CRM, log activity, show notifications, etc.

Callback	Arguments	Description
onReady	—	Fired when the widget is fully initialized and ready.
onError	error: Error	Fired when an error occurs during initialization or operation.
onCallStart	number: string	Fired when an outbound call begins.
onCallEnd	number: string	Fired when a call ends (outbound or inbound).

Example: CRM Integration

window.PhoenixWidget = {
  config: {
    apiKey: 'USER_WEB_DIALLER_TOKEN',
    onCallStart: function (number) {
      // Log the call in your CRM
      fetch('/api/crm/log-call', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          phone: number,
          direction: 'outbound',
          startedAt: new Date().toISOString(),
        }),
      });
    },
    onCallEnd: function (number) {
      // Update call status in your CRM
      fetch('/api/crm/update-call', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          phone: number,
          endedAt: new Date().toISOString(),
        }),
      });
    },
  },
};

Configuration Priority

When both data-* attributes and JavaScript config are provided, the priority is:

1. data-* attributes (highest priority)
2. window.PhoenixWidget.config
3. Defaults (lowest priority)

Need Help?

For questions about configuration options or to request additional customization, contact Superfone customer support at hello@superfone.in.