Comment on page
DigitalSambaEmbedded class

This is the main class of the SDK. Your journey always starts by initializing this class and then calling its methods to control your integration. There are also various events to subscribe to with callbacks.
There are two approaches to initializing: 
Using the constructor which will load immediately the specified room based on the InitOptions and the optional InstanceProperties.

//instanceProperties is an optional param
const sambaFrame = new DigitalSambaEmbedded(initOptions, instanceProperties);
Using the createControl factory method. Later you can load the room by calling the load method. That way creation of the DigitalSambaEmbedded class is decoupled from the actual loading of the room which gives you more control during initialization.

// notice `createControl` vs constructor call
const sambaFrame = DigitalSambaEmbedded.createControl(initOptions);
​
// ...
// when necessary, load the room in the frame
// instanceProperties is optional
sambaFrame.load(instanceProperties);
InitOptions - look also at the code examples​
root - HTMLElement. If specified, target frame will be created as a child tag of root. Otherwise the created iframe will be appended to the body tag of the page
frame - HTMLIFrameElement to be wrapped. This is useful if you want the room to be loaded in an iframe element which already exists. If frame is not specified, then an iframe element will be created automatically by the SDK
url - full room URL to be applied as the iframe src attribute. Must include https protocol.
https://[teamNameHere].digitalsamba.com/[roomNameHere]
team - team name (string) - used if you do not want to specify the url manually
room - room name (string) - used if you do not want to specify the url manually
token - optional JWT string token for authentication, mainly for private rooms
roomSettings - an optional JSON object configuring the initial room settings. Read also about the possible VirtualBackgroundOptions.
{
  //Configures if user's video device will be enabled on entering the room
  videoEnabled: boolean,
  
  //Configures if user's audio device will be enabled on entering the room
  audioEnabled: boolean,
  
  //Configures initial video and audio devices to use on entering the room
  mediaDevices: {
    videoinput: 'id of camera',
    audioinput: 'id of microphone',
    audiooutput: 'id of speaker device'
  },
  
  //Language for the user. Use language code - e.g. en, de, es
  appLanguage: string,
  
  //Configures name of the user on entering the room
  username: string,
  
  //Configures custom initials (max 2 letters) for the user tile
  initials: string,
  
  //Configures if 'auto' or 'tiled' layout mode will be used
  layoutMode: string,
  
  //Configures if the toolbar will be visible or not
  showToolbar: boolean,
  
  //Configures if the captions panel will be visible or not
  showCaptions: boolean,
  
  //Configures the virtual background
  virtualBackground: VirtualBackgroundOptions,
  
  //Configures if the frame will be muted on join for the local user
  muteFrame: boolean
}
The following combinations of fields are valid for initOptions (token and roomSettings can be used with any of them):
url - will create a frame as a child of the body tag and load the room url
url + root - will create a frame as a child of root element and load the room url
url + frame - will load the room url in the provided existing frame
team + room - will create a frame as a child of the body tag and load the specified room
team + room + root - will create a frame inside root element and load the specified room
team + room + frame - will load the specified room in the provided existing frame
frame - will attach to the specified existing frame (assuming you've manually set correct room url as the iframe src)
InstanceProperties - look also at the code example​
frameAttributes - list of attributes to be applied to the target iframe
reportErrors - boolean, false by default. Whether to report misconfiguration or runtime errors to the browser console
Code examples of the possible initOptions combinations:
1
//SDK will create a frame as a child of the body tag and load the room url
2
import DigitalSambaEmbedded from '@digitalsamba/embedded-sdk';
3
const roomUrl = 'https://[TEAM_NAME_HERE].digitalsamba.com/[ROOM_NAME_HERE]';
4
const sambaFrame = DigitalSambaEmbedded.createControl({ 
5
    url: roomUrl,
6
    //Optional room settings
7
    /*roomSettings: {
8
        username: 'John Smith'
9
        layoutMode: 'auto',
10
        virtualBackground: { blur: 'balanced' },
11
        .....................
12
    },*/
13
    //token: TOKEN_HERE_IF_YOU_ARE_USING_IT
14
});
15
sambaFrame.load();
1
//SDK will create a frame as a child of the parent element and load the room url
2
import DigitalSambaEmbedded from '@digitalsamba/embedded-sdk';
3
const parentElement = document.querySelector('USE_CSS_SELECTOR_HERE');
4
const roomUrl = 'https://[TEAM_NAME_HERE].digitalsamba.com/[ROOM_NAME_HERE]';
5
const sambaFrame = DigitalSambaEmbedded.createControl({ 
6
    url: roomUrl, 
7
    root: parentElement,
8
    //token: TOKEN_HERE_IF_YOU_ARE_USING_IT
9
});
10
sambaFrame.load();
1
//SDK will load the room url in the specified existing iframe
2
import DigitalSambaEmbedded from '@digitalsamba/embedded-sdk';
3
const existingIFrame = document.querySelector('USE_CSS_SELECTOR_HERE');
4
const roomUrl = 'https://[TEAM_NAME_HERE].digitalsamba.com/[ROOM_NAME_HERE]';
5
const sambaFrame = DigitalSambaEmbedded.createControl({ 
6
    url: roomUrl, 
7
    frame: existingIFrame,
8
    //token: TOKEN_HERE_IF_YOU_ARE_USING_IT
9
});
10
sambaFrame.load();
1
//SDK will create a frame as a child of the body tag and load the specified room
2
import DigitalSambaEmbedded from '@digitalsamba/embedded-sdk';
3
const teamName = 'TEAM_NAME_HERE';
4
const roomName = 'ROOM_NAME_HERE';
5
const sambaFrame = DigitalSambaEmbedded.createControl({ 
6
    team: teamName, 
7
    room: roomName,
8
    //token: TOKEN_HERE_IF_YOU_ARE_USING_IT
9
});
10
sambaFrame.load();
1
//SDK will create a frame as a child of the parent element and load the room
2
import DigitalSambaEmbedded from '@digitalsamba/embedded-sdk';
3
const parentElement = document.querySelector('USE_CSS_SELECTOR_HERE');
4
const teamName = 'TEAM_NAME_HERE';
5
const roomName = 'ROOM_NAME_HERE';
6
const sambaFrame = DigitalSambaEmbedded.createControl({ 
7
     team: teamName, 
8
     room: roomName,
9
     root: parentElement,
10
     //token: TOKEN_HERE_IF_YOU_ARE_USING_IT
11
});
12
sambaFrame.load();
1
//SDK will load the room in the specified existing frame
2
import DigitalSambaEmbedded from '@digitalsamba/embedded-sdk';
3
const existingIFrame = document.querySelector('USE_CSS_SELECTOR_HERE');
4
const teamName = 'TEAM_NAME_HERE';
5
const roomName = 'ROOM_NAME_HERE';
6
const sambaFrame = DigitalSambaEmbedded.createControl({ 
7
     team: teamName, 
8
     room: roomName,
9
     frame: existingIFrame,
10
     //token: TOKEN_HERE_IF_YOU_ARE_USING_IT
11
});
12
sambaFrame.load();
1
//SDK will attach to the specified existing frame
2
//Assuming you've manually preset correct room url as the iframe src
3
import DigitalSambaEmbedded from '@digitalsamba/embedded-sdk';
4
const existingIFrame = document.querySelector('USE_CSS_SELECTOR_HERE');
5
const sambaFrame = DigitalSambaEmbedded.createControl({ 
6
     frame: existingIFrame,
7
     //token: TOKEN_HERE_IF_YOU_ARE_USING_IT
8
});
9
sambaFrame.load();
Sample usage of the optional instanceProperties to set a red border and also report errors:
Note that you can use any initOptions combination from the previous examples.
1
import DigitalSambaEmbedded from '@digitalsamba/embedded-sdk';
2
const roomUrl = 'https://[TEAM_NAME_HERE].digitalsamba.com/[ROOM_NAME_HERE]';
3
const sambaFrame = DigitalSambaEmbedded.createControl({ url: roomUrl });
4
​
5
//SDK will put a 5px solid red border around the iframe
6
const instanceProps = { 
7
   frameAttributes: {style: "border: 5px solid red"}, 
8
   reportErrors: true 
9
};
10
sambaFrame.load(instanceProps);
SDK
Methods
Last modified 2mo ago
DigitalSambaEmbedded class

There are two approaches to initializing:

InitOptions - look also at the code examples​

InstanceProperties - look also at the code example​

Code examples of the possible initOptions combinations:

Sample usage of the optional instanceProperties to set a red border and also report errors:

InitOptions - look also at the code examples

InstanceProperties - look also at the code example
