SDKs
Connect widget
Install @mycomm/connect, show the connect flow in a popup or inline, and listen for how it ends.
@mycomm/connect is a dependency-free web component that lets your users pair their own phone and connect its SIM without leaving
your page and without a MyComm login. It shows MyComm's hosted connect page in a popup (default) or an inline frame and tells your
page how the flow ended. It never sees an API key: your server creates a short-lived hosted link and gives the browser only
its URL (hosted connect).
Install#
npm install @mycomm/connect
import '@mycomm/connect';
<mycomm-connect url="LINK_URL_FROM_YOUR_SERVER" purpose="connect"></mycomm-connect>
Without a bundler, load an exact version with its integrity hash, listed in the package changelog and on each release:
<script src="https://cdn.jsdelivr.net/npm/@mycomm/connect@1.1.0/dist/mycomm-connect.iife.min.js"
integrity="sha384-8bubOxMkou37YAN3w7Neldo2Ig2auDHoULBqYh6PHZIOtu5sAtSYxh3Va8dubKgp" crossorigin="anonymous"></script>
The classic script also sets window.MyCommConnect.open().
Options#
| Attribute | Meaning |
|---|---|
url |
The session URL from your server. Required. |
mode |
popup (default) shows a button that opens the flow in a popup; inline shows it in a frame on your page. |
label |
Button text in popup mode. |
height |
Frame height in pixels in inline mode (default 640). |
timeout |
Minutes after which an unfinished flow ends in a timeout error. |
How it ends#
Every flow ends in exactly one outcome:
| Event | Detail | Meaning |
|---|---|---|
mycomm-connect:completed |
{sessionId, deviceId, channelId} |
The phone is paired and its SIM connected |
mycomm-connect:ended |
{sessionId, reason} |
The link cannot be used: reason is expired, revoked or completed_elsewhere (unknown for a reason newer than the widget); ask your server for a new session |
mycomm-connect:cancelled |
The person cancelled | |
mycomm-connect:closed |
The popup was closed before an outcome | |
mycomm-connect:error |
{code, message} |
It could not start or finish: missing-url, invalid-url, blocked-popup, invalid-option or timeout |
const widget = document.querySelector('mycomm-connect');
widget.addEventListener('mycomm-connect:completed', (event) => refreshPhoneList(event.detail.sessionId));
widget.addEventListener('mycomm-connect:error', (event) => console.error(event.detail.code, event.detail.message));
A browser event is a signal to refresh, not proof. Confirm on your server with GET /v1/links/{id}, or with the
device.paired and channel.connected webhook events.
From code, open() resolves with the outcome and rejects with a MyCommConnectError only when the flow cannot start or times out. Call
it from a click handler so the browser allows the popup:
import { open } from '@mycomm/connect';
const outcome = await open(sessionUrl, { timeout: 30 }); // { status: 'completed' | 'ended' | 'cancelled' | 'closed', ... }
Content-Security-Policy#
| Directive | Needs | For |
|---|---|---|
frame-src https://mycomm.cogneer.tech |
inline mode | the frame |
script-src https://cdn.jsdelivr.net |
CDN use only | the script tag |
A popup needs no directive. The widget makes no network requests of its own. It works in Chrome 86+, Safari 14+ and Firefox 78+.
Security#
The widget accepts a session URL only if it is https://…/connect/<token>, and messages only from that origin and the window it
opened. Treat the session URL like a password: create one per visit, never log it, never cache it. The package README has React and
Livewire examples and the styling hooks.