JavaScript SDK

When running the examples you will be asked to sign in with a Circuit sandbox account.

API Documentation GitHub

Example to logon and fetch conversations:

// Create the client with the client_id (aka app key), scope and optionally a redirect_uri
const client = new Circuit.Client({
  client_id: 'your client_id',
  scope: 'READ_USER_PROFILE,READ_CONVERSATIONS'
});

// Logon with OAuth2, then retrieve the logged on user's conversations
client.logon()
  .then(user => console.log('Successfully authenticated as ' + user.displayName))
  .then(client.getConversations)
  .then(conversations => conversations.forEach(c => console.log(c.convId)))
  .catch(console.error);
                        

See OAuth 2.0 for information on how to register an app.

Plunker examples

Short examples demonstrating one or more particular APIs. You can view the source, or fork your own plunker. A sandbox account is required to run the live examples. JS Bin examples use OAuth 2.0.

Live Example Description
Direct call with realtime webrtc stats Initiate a direct audio, video or HD video call. Answer incoming call. Display basic or raw WebRTC stats.
Configure Voicemail Enable/disable voicemail, Set voicemail timeout, Enable/disable custom voicemail greeting, Upload custom greeting file, Get custom greeting url.
Subscribe to user presence Retrieve pages of conversations to get most recent direct conversations, then subscribe to the presence of those users and keep their status up to date.
Mentioning Retrieves the ten most recent conversations, send and receive messages in the selected conversation, mention other users by typing "@" then their name, receive notifications if mentioned by other users in the listed conversations.
Label Management Add new labels, edit existing labels, remove existing labels. Displays a list of your last ten conversations, select a conversation to display all assigned and unassigned labels to the selected conversation, assign labels to the selected conversation, unassign a labels to the selected conversation.

Stackblitz examples

Short examples demonstrating one or more particular APIs. You can view the source, or fork your own stackblitz. A sandbox account is required to run the live examples.

Live Example Description
Export conversations to file vuejs app to export all conversation messages to a file.

JS Bin examples

Short examples demonstrating one or more particular APIs. You can view the source, or clone your own JS Bin using the link at the top right of the live example. A sandbox account is required to run the live examples. JS Bin examples use OAuth 2.0.

Live Example Description
List conversations, threads and comments. Define injectors. Retrieve 25 most recent conversations and display them in the left more list. When selecting a conversation, retrieve their 50 most recent threads and show them in the middle list. When selecting a thread, then show the 20 most recent comments in the right list. Defines conversationInjector and itemInjector.
Moderate & EnableGuestAccess on conversation Retrieve 10 most recent conversations, display them and allow functions on them such as disable guest access, moderate etc...
Get Conversation by a filter (e.g. label) Retrieves the labels and upon selecting a label retrieves the converations using that label.
Moderation Creates a conversation, turns on moderation and grants other user moderator rights.
Update own user profile Update firstname, lastname and email of local user.
Set presence Set different presence states for local user.
Search a favorited user using fuzzy search Search a user by its name using fuse.js for fuzzy search.
Get Favorites Get all favorited conversation IDs, and then filter out the first 5 favorites of direct conversations.
Send post with custom URL Send a post with a link shown different from the actual URL. Use of option "removeMentionHtml".
Direct HD video call & take snapshot Start a direct call with another Circuit user. Toggle own video and ability to enable HD Video. Take a snapshot image of video with two options to download image.
Create conference bridge Create a new conversation for a conference bridge, gets the conference details and waits for participants to join. Once other participants join the audio conference is established. No video in this example.
Upgrade Direct Call to Conference Start a direct call with another Circuit user, then add a 3rd user which automatically creates a group conversation and moves the call to the new conversation.
Select media devices for call Set the mic, camera, headset, etc for the call. Also supports changing the device during the call.
Switch front/back camera Start a direct call with another Circuit user, then switch between different local video inputs (cameras). E.g. front/back on mobile device.
Disable remote audio Lookup active conferences, then join first one and disable the incoming audio stream.
Send user to user message Send a custom message to another user in a specific channel. Message is transparent to Circuit clients. For sending messaging to one of your other clients see API sendAppMessageToClient instead.
Incoming telephony call Demonstrates the telephony APIs. Answer a telephony (ATC/UTC) call, move call to another device, pull call back, listen to telephony events.
Join a conference on a different device Find started conferences in conversations user is a member of and list them. Then allow user to join one of the conferences on another of the user's devices.
Mute mic/speaker of webclient Lookup active call on webclient, then mute mic and speaker for that call on that webclient.
Start a call from Circuit webclient Start a direct call with a user initiated on one of your other devices. Also called Click-2-Call. Opens a new browser tab in case user is not logged on the another web-based client.
Answer a call on different device Answer a direct call on one of your other devices. Opens a new browser tab in case user is not logged on the another web-based client.
Whiteboard Starts direct call and allows enabling the whiteboard. Use whiteboard background image and allow drawing SVG shapes.
Custom OAuth 2.0 redirect_uri Define a custom OAuth 2.0 redirect_uri for faster OAuth redirect. This will allow the OAuth popup to only load that redirect_uri page, and not the whole SDK.
Call Forwarding Set and unset call forwarding on Circuit using the JS SDK.

GitHub examples

The source code of the examples below are on GitHub and are hosted on rawgit.


Circuit-like web-app

Circuit-like app built with vue.js and Circuit JS SDK. Showcases several different APIs. RTC APIs still to be added.

Live example Source
Introduction example

Logon using OAuth2, read most recent conversation. Defines injectors and shows conversation with extended injector attributes. Listens to various events.

Live example Source
Group Call: video and screenshare

This example shows how to start, join or leave a conference call. Also allows to toggle video or screenshare. For screenshare the Circuit SDK Chrome Extension is required.

Live example Source
Complete Messaging Examples (AngularJS)

Shows complete messaging functionality. Allow to select a conversation to send a message to, upload files, or create a new conversation.

Live example Source
Direct Call: audio and video

This example shows how to start an audio/video direct call, or auto accept an incoming call.

Live example Source
Telephony (PSTN) call

Make outgoing phone calls to any regular telephone. Telephony Connector needs to be setup for your tenant.

Live example Source
Add participant to call

Start a conference and dial out either a PSTN number, a Circuit user, or ring all conversation members.

Live example Source
Share HTML5 Canvas

This example shows a schematic in a HTML5 canvas and allows drawing on top of it and shares the combined image in the call. The application can use the new HTMLCanvasElement.captureStream API available in Chrome and Firefox to capture a stream from a canvas. Note that Chrome has an issue with compression which causes WebRTC to reduce the resolution, or not even show the drawing. Use FireFox in the meantime.

Live example Source