Installation

Add Superfone Web Dialler to any website with a single script tag.

Script Tag

Place this before the closing </body> tag of your HTML page:

<script
  src="https://cdn.superfone.co.in/widgets/phoenix/phoenix-widget.js"
  data-api-key="USER_WEB_DIALLER_TOKEN"
></script>

Replace USER_WEB_DIALLER_TOKEN with your user-specific token provided by Superfone. Each user gets their own unique token.

info

Don't have a Web Dialler Token? Contact Superfone customer support at hello@superfone.in to get one provisioned for your user.

What Happens on Load

1. The widget script loads and initializes automatically
2. A floating phone button appears at the bottom-right corner of the page
3. The widget connects to the Superfone calling infrastructure
4. Your team can start making and receiving calls immediately

Requirements

Requirement	Details
Protocol	HTTPS (required for microphone access)
Browsers	Chrome 80+, Edge 80+, Firefox 78+, Safari 14+
Permissions	Microphone access (browser will prompt the user)
Network	Outbound WebSocket and WebRTC connectivity

HTTPS Required

The widget requires microphone access, which browsers only allow on HTTPS pages. It will not work on plain HTTP (except localhost for development).

Single-Page Applications (SPA)

If your app is a single-page application (React, Vue, Angular, etc.), you can load the widget dynamically:

function loadWebDialler(token) {
  const script = document.createElement('script');
  script.src = 'https://cdn.superfone.co.in/widgets/phoenix/phoenix-widget.js';
  script.dataset.apiKey = token;
  document.body.appendChild(script);
}

// Call when your app is ready
loadWebDialler('USER_WEB_DIALLER_TOKEN');

Multiple Pages

Add the same script tag to every page where you want the dialler available. The widget handles multi-tab coordination automatically — only one tab will actively handle calls at a time, preventing conflicts.

Content Security Policy (CSP)

If your site uses a Content Security Policy, add the following directives:

script-src https://cdn.superfone.co.in;
connect-src wss://*.superfone.co.in;
media-src blob:;

Verifying the Installation

After adding the script tag, verify the widget is working:

1. Open your page in a supported browser
2. Look for the floating phone button at the bottom-right corner
3. Click the button to open the dialler
4. Grant microphone permission when prompted
5. The widget should show a connected status

If the button doesn't appear, check your browser console for errors.

Troubleshooting

Issue	Solution
Widget doesn't appear	Check that your Web Dialler Token in data-api-key is set correctly. Look for errors in the browser console.
"Microphone access denied"	Ensure your site is on HTTPS and the user has granted microphone permission.
Connection issues	Check your network allows WebSocket connections. Verify your CSP settings.
Widget conflicts with page	The widget uses Shadow DOM for style isolation. If you still see issues, contact support.

For all other issues, reach out to Superfone customer support at hello@superfone.in.