* `roomSettings` - an optional JSON object configuring the initial room settings. Read also about the possible [VirtualBackgroundOptions](/reference/sdk/methods/configurevirtualbackground) and how to configure custom [virtualBackgrounds](#virtual-backgrounds-configuration) array.
{
// Overrides the room setting when defined
joinScreenEnabled: boolean,
//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: 'label of camera',
audioinput: 'label of microphone',
audiooutput: 'label of speaker device'
},
//Language for the user. Use language code - e.g. en, de-DE, es-ES
appLanguage: string,
//Name of the user on entering the room
username: string,
//Custom initials (max 2 letters) for the user tile
initials: string,
//If 'auto' or 'tiled' layout mode will be used
layoutMode: string,
//If the toolbar will be visible or not
showToolbar: boolean,
//If the topbar will be visible or not
showTopbar: boolean,
//If the captions panel will be visible or not
showCaptions: boolean,
//The virtual background
virtualBackground: VirtualBackgroundOptions,
/*
Allows you to customize the virtual backgrounds available
to users in your application. You can provide your own collection
of backgrounds and optionally replace the default backgrounds
*/
virtualBackgrounds: [
Read below how to configure it
],
// Replace default backgrounds with custom ones (optional)
replaceVirtualBackgrounds: false,
//If the frame will be muted on join for the local user
muteFrame: boolean,
//If a confirmation modal will be shown when you remove (kick) another user
requireRemoveUserConfirmation: boolean,
/*
An optional base domain to use when generating invitation links
This is useful if you are a integrator where the invitation links
are not on your main domain where the meeting UI is loaded.
*/
baseDomain: string //For example 'your.domain.com',
/*
An optional url to use when generating invitation links
in the advanced invitation modal
This is useful if you are a integrator where the invitation links
are not on your main domain where the meeting UI is loaded.
*/
publicRoomUrl: string //For example https://your.domain.com/meeting/ABCDEF
}
',
"position": "last"
});
}
});
```
{% hint style="info" %}
This method is often used in conjunction with [removeCustomTile()](/reference/sdk/methods/removecustomtile) and [sendMessageToCustomTile()](/reference/sdk/methods/sendmessagetocustomtile).
{% endhint %}
# removeCustomTile()
removeCustomTile(name: string)
Removes a previously added custom tile.
```javascript
sambaFrame.on('userJoined', (event) => {
const data = event.data;
if (data.type === 'local') {
sambaFrame.addCustomTile({
"name": "AI",
"html": '',
"position": "last"
});
}
});
//Later at some point
sambaFrame.removeCustomTile("AI");
```
{% hint style="info" %}
This method is used in conjunction with the [addCustomTile()](/reference/sdk/methods/addcustomtile) method.
{% endhint %}
# addFrameEventListener()
addFrameEventListener(eventName, target, listener)
Adds a JavaScript event listener to the iframe of the room. This is useful for listening to raw JS events - e.g. keyup or click. You can attach the listener either to the window or to the document.
```javascript
const keyUpEventListener = (payload) => {
console.log('keyup', payload)
};
sambaFrame.addFrameEventListener('keyup', 'window', keyUpEventListener);
const clickEventListener = (payload) => {
console.log('click', payload)
};
sambaFrame.addFrameEventListener('click', 'document', clickEventListener);
```
**Sample use case**: \
You may want to end the call if user presses double-space or some other custom key combination.
{% hint style="info" %}
**addFrameEventListener** is often used in conjunction with the [removeFrameEventListener](/reference/sdk/methods/removeframeeventlistener) method.
{% endhint %}
# addImageToWhiteboard()
addImageToWhiteboard(options?: AddImageToWhiteboardOptions)
Adds an image to an already opened whiteboard.
```typescript
AddImageToWhiteboardOptions = {
base64?: string;
url?: string;
position?: {
x: number;
y: number;
};
};
```
You can choose between the **base64** representation of the image or an external **url**. Note if you use an external URL, then the external server must have **CORS** properly enabled, otherwise the image won't be downloaded by the browser.
You can optionally set the (x,y) coordinates relative to the upper-left corner. If you don't set any coordinates the image will be automatically centered.
{% code overflow="wrap" %}
```javascript
//Adds a base64 image
sambaFrame.addImageToWhiteboard({
base64: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAIAAADTED8xAAADMElEQVR4nOzVwQnAIBQFQYXff81RUkQCOyDj1YOPnbXWPmeTRef+/3O/OyBjzh3CD95BfqICMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMO0TAAD//2Anhf4QtqobAAAAAElFTkSuQmCC'
});
```
{% endcode %}
**Sample use case**: \
You may have a functionality in your application to add images to the whiteboard on the fly.
# addRecordingBookmark()
addRecordingBookmark(bookmark: string)
Adds a bookmark to the recording in progress, marking the current moment with the label you provide. It works exactly like the **Add bookmark** option in the room's recording menu.
```javascript
sambaFrame.addRecordingBookmark('Q&A starts');
```
Leading and trailing whitespace is trimmed from the label, which must then be 1 to 255 characters long.
{% hint style="info" %}
The bookmark is added only while a recording is in progress, recording bookmarks are enabled in the room settings, and the participant has the **recording** permission. Otherwise the call is refused and an [appError](/reference/sdk/events/apperror) is emitted (`not-allowed`, `forbidden-action` or `add-recording-bookmark`). Wait for the [recordingStarted](/reference/sdk/events/recordingstarted) event before calling this method.
{% endhint %}
{% hint style="info" %}
Available starting from `v0.0.58` of `@digitalsamba/embedded-sdk`.
{% endhint %}
**Sample use cases**:
* Mark agenda points as your application moves through them, such as the next topic, a new slide, or the start of Q\&A, so they are easy to find in the recording.
{% hint style="info" %}
**addRecordingBookmark** is often used together with the [startRecording](/reference/sdk/methods/startrecording) and [stopRecording](/reference/sdk/methods/stoprecording) methods.
{% endhint %}
# addTileAction()
addTileAction(name: string, properties: TileActionProperties, listener: function)
Adds a custom action to the 3-dots menu of the tiles. When the user clicks that custom menu item, then the callback listener function will be invoked.
{% hint style="info" %}
The first parameter "**name**" is just an internal identifier so you can remove the custom action later with the [removeTileAction()](/reference/sdk/methods/removetileaction) method if it is needed.
{% endhint %}
{% hint style="info" %}
Valid tile scopes are '**remote**', '**local**', '**custom**', '**screenshare-local**' and '**screenshare-remote**'. Remote means tiles of other (remote) users, while local means tile of local user. Custom is for custom tiles - see [addCustomTile()](/reference/sdk/methods/addcustomtile) method.
{% endhint %}
In the below example a send email action is added to all remote tiles.
const onSendEmailClicked = () => {
console.log('Send Email callback called');
};
sambaFrame.addTileAction(
'sendEmail',
{"label": 'Send Email', scope: 'remote'},
onSendEmailClicked
);
const leaveSessionCallback = () => {
console.log('Custom leave session logic called');
if (confirm('Are you sure you want to leave the session?')) {
sambaFrame.leaveSession();
}
};
sambaFrame.addUICallback('leaveSession', leaveSessionCallback);
let users = sambaFrame.listUsers();
console.log('There are', users.length, 'users inside the room:');
console.log(users);
/*Here is how the array looks like:
[
{
"id": "08c82f56-c670-4d36-bfe3-87a8cd0f7f29",
"name": "John",
"avatarColor": "#90c695",
"role": "moderator",
"kind": "local"
},
{
"id": "15a0b10d-5f0f-47a9-9889-1d92651aa6d8",
"name": "Lucas",
"avatarColor": "#3498db",
"role": "moderator",
"deviceType": "desktop",
"kind": "remote"
}
]*/
//Maximizes the media tile of the user
sambaFrame.maximizeUser('9efc7798-a1a4-44bd-9d8d-532fe0feea9d');
//Maximizes the screenshare tile of the user
sambaFrame.maximizeUser('9efc7798-a1a4-44bd-9d8d-532fe0feea9d', 'screenshare');
sambaFrame.minimizeContent();
sambaFrame.minimizeUser();
sambaFrame.on('userJoined', (event) => {
const data = event.data;
if (data.type === 'local') {
console.log('You have joined the room');
} else {
console.log(data.user.name, 'has joined the room');
}
});
sambaFrame.once('audioEnabled', (event) => {
console.log('This will be printed only once even if user enables audio 5 times');
});
//Pins the media tile of the user
sambaFrame.pinUser('9efc7798-a1a4-44bd-9d8d-532fe0feea9d');
//Pins the screenshare tile of the user
sambaFrame.pinUser('9efc7798-a1a4-44bd-9d8d-532fe0feea9d', 'screenshare');
const actionName = 'sendEmail';
const customCallback = () => {
console.log('Custom logic called');
};
sambaFrame.addTileAction(
actionName,
{"label": 'Send Email', scope: ''},
customCallback
);
//At some point later
sambaFrame.removeTileAction(actionName);
const leaveSessionCallback = () => {
console.log('Custom leave session logic called');
if (confirm('Are you sure you want to leave the session?')) {
sambaFrame.leaveSession();
}
};
sambaFrame.addUICallback('leaveSession', leaveSessionCallback);
//At some point later:
sambaFrame.removeUICallback('leaveSession', leaveSessionCallback);
sambaFrame.unpinUser();