Embeddable Widget Guides
You can embed Callbridge services in your own web application or native mobile application.
See usage information on our Github wiki - https://github.com/iotum/callbridge-js/tree/main/wiki
Install our NPM package -> https://www.npmjs.com/package/@iotum/callbridge-js
See manual installation instructions here -> https://github.com/iotum/callbridge-js/blob/main/README.md
You can embed many of the pages visible into your web application using our JavaScript SDK. Please contact us beforehand so that we can authorize your domains to host our pages.
You can embed the following components into your own mobile or web application:
- Meeting Room: Used for video meetings and calling
- Secure Team Messaging: Used for offline chat communications
- Drive: Used for storage of recordings and files
- Contacts: Used to manage your address book, and initiate calling or messaging.
Using a conference room url obtained from 8.1 Schedule Conference, 8.2 Create Reservationless Conference or from the Host Account created using 6.1 Create Host Account you can direct your users into a video conference session.
There are two options for integration using our JavaScript SDK:
- Embed the meeting room directly into a container element in your own web application.
- Open conference url in a new browser tab or window.
Picking the best option depends on the user experience you are looking to create for your users.
One advantage of using a new browser tab is that it makes it easier to use the white labeled mobile and desktop applications we can provide for you.
See the full description of our mobile and desktop application experience here
For all Meeting options and usage of our JavaScript SDK see our Github wiki here - https://github.com/iotum/callbridge-js/blob/main/wiki/classes/Meeting.md
Strip layout is an additional optional parameter you can set when creating a new Meeting Widget. Simply set the stripLayout?=True on the Meeting Options when creating a Meeting Widget.
See the Github wiki here - https://github.com/iotum/callbridge-js/blob/main/wiki/README.md#meetingoptions
Other options for gaming include a volume control for meeting widget when participants would like to lower the volume of the audio coming from the widget compared to content they may be watching on screen.
Example, for a watch party display volume control and hide most others:
Most UI controls displayed in the meeting room can be configured to be hidden for specific use cases. For example, a gaming or watch party application may want minimal UI controls presented to users. Watch party and 1 on 1 video chat applications may want a volume control which is normally hidden by default.
The following controls can be hidden or displayed:
- Screen Sharing
- Whiteboard
- Record
- Output volume
- Text Chat
- Participants
- Mute All
- Meeting Info
- Settings
- Full Screen
- Gallery View
- Connection Quality
The following image can be used a key to request which controls you’d like to hide:
You can embed our Team Chat, Drive and Contacts directly into your own web and mobile applications.
See all the details of methods and events emitted here - https://github.com/iotum/callbridge-js/blob/main/wiki/classes/Dashboard.md
See our Github wiki for more all details on widget options - https://github.com/iotum/callbridge-js/blob/main/wiki/README.md#widgetoptions
You can embed team chat directly into your application using our web SDK. The Team Chat widget is very flexible to fit your specific needs. When creating a Dashboard widget use the service parameter “Team” in the constructor of the Dashboard widget.
The layout option can be used to achieve 4 different ways to embed Team Chat. These options allow you to create widgets with different components of the Team Chat pre-built UI:
- Full: includes the full team chat UI sidebar and main chat room
- List: only includes the pre-built UI for the sidebar
- Main: only include the pre-built UI for the chat room
- None: used in a detached element and doesn’t render any UI. Used for use cases where you will create your own UI and use the widget in a programmatic way.
See the github wiki for details - https://github.com/iotum/callbridge-js/blob/main/wiki/enums/LayoutOption.md
See the following wireframes for examples of the Team Chat widget different layout options:
Embed the TeamChat Widget into a tab in your application.
Programmatic Sidebar, Layout None with Full popped out into another window or tab.
Embed the sidebar separately from the chat rooms. Use events from the sidebar widget to insert the specific chat rooms into your own application.
Use the program sidebar with layout None to gather data to render unread message counts for chat rooms. Then use the layout Main to render specific chat rooms embedded into your application.
The diagram below shows how users are structured in the Iotum platform and who can chat with each other. Companies have many hosts and hosts have many contacts. There is a separation between Hosts in different companies and between contacts of different hosts.
Host A can Chat with Host B because they are in the same company but can’t Chat with HostC or HostD.
In the future we would like Hosts to be able to Chat with Contacts. Currently only Hosts from the same company can Chat with each other. When that capability is created Hosts will only be able to chat with their own contacts and not with contacts of other Hosts, even when in the same company. Host A can chat with Contact A and Contact B because those contacts are associated with Host A. Host B can also chat with Contact A because Contact A is also a contact of Host B. However, the ChatRooms used by Host A and Contact A and Host B and Contact A are separate.
Contacts can not chat with each other.
For all live steam player options please see our Github wiki - https://github.com/iotum/callbridge-js/tree/main/wiki
For all methods and events emitted by LiveStream class go our our Github wiki here - https://github.com/iotum/callbridge-js/blob/main/wiki/classes/Livestream.md