Tool API
Bambuser product: Video Consultation
/ Live
An API to provide custom User Interface Tools from your app
Replacement of built-in tools
Any tool that the app would like to provide a replacement for must be registered in App manifest using the {hostId}.tools
property, see User Interface Tools for the available types you can replace
Example tool registration in App manifest:
{
"permissions": [
"callsWidget:tool.write",
"callsAgentTool:tool.write"
],
"url": {
"type": "module",
"src": "https://your-app-domain.com/main.js"
},
"callsWidget": {
"tools": [{
"id": "my-custom-vto-session-tool",
"type": "vto-session"
}]
},
"callsAgentTool": {
"tools": [{
"id": "my-custom-vto-session-tool",
"type": "vto-session"
}]
}
}
Methods
createTool()
Permission: callsWidget:tool.write
/ callsAgentTool:tool.write
Context: Main app
Creates a custom tool with the view provided by your app.
Parameters
id
- String for the id associated with the tool, required when creating a built-in tool replacementlabel
- Text string for the title and menu action labelviewUrl
- Url to the tool's view, must have the same origin as the URL to your app's main entrypoint
Return value
A promise whose fulfillment handler will receive an instance of a Tool view.
Example
const { toolApi } = await bambuserAppFramework.getContext();
const tool = await toolApi.createTool({
label: 'My tool',
url: 'https://example.com/tool.html',
});
Events
provide-instance
Permission: callsWidget:tool.write
/ callsAgentTool:tool.write
Context: Main app
When there are one or more built-in tools that the app should replace, this event will be fired so you can provide the replacement tool view(s)
Event properties
id
- The id corresponding to the tool registration in App manifest that should be provided
Event return value
It is expected that the event handler will return a tool view created by createTool()
with the id provided by the event
Example
const { toolApi } = await bambuserAppFramework.getContext();
toolApi.on('provide-instance', async ({ id }) => {
const tool = await toolApi.createTool({
id, // Must match the requested id, corresponds to the id for the tool added in App Manifest
label: 'My tool',
viewUrl: `http://your-app-domain.com/custom-tool/${id}.html`,
});
tool.on('open', () => {
console.log(`Tool ${id} was opened`);
});
tool.on('close', () => {
console.log(`Tool ${id} was closed`);
});
return tool;
});
Tool view
A tool view is a specific tool added via the Tool API and is available from both main app and tool view context.
As a tool runs in a separate context, referred to as the tool view context, communication between the tool view context and main app context can be achieved with a bi-directional message channel, see emit()
/ postMessage()
/ message
. Keep in mind that the tool life cycle is usually dependent upon user interactions, so it can be a good idea to communicate essential UI state with main app context so a tool can be closed and opened into the same state. It's also a good idea to perform long running tasks in main app context as user can at any time decide to look at something else for a while and the tool view will be removed and any ongoing task will be aborted.
Example tool view:
<!DOCTYPE html>
<html lang="en" className="bam-ui">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Custom tool</title>
<link rel="stylesheet" href="https://app-framework.bambuser.com/bam-ui.css" />
</head>
<body>
<h1>Hello world</h1>
<script src="https://app-framework.bambuser.com/runtime.js"></script>
<script src="https://app-framework.bambuser.com/bam-ui.js"></script>
<script type="module">
const { tool } = await bambuserAppFramework.getContext();
// The tool's UI has loaded and may now be presented
tool.setReady()
</script>
</body>
</html>
The page loaded in the tool view context must load the Bambuser App Framework Runtime and at least communicate back when the UI is ready to be presented to the user by using setReady()
, until you do this a loader will be shown to the user
The page loaded in the tool view context must follow our Design Guidelines and make the look and feel to be aligned with other parts of the user interface
Tool view methods
setReady()
Permission: Implicit via Tool API
Context: Tool view
Decide when the tool is ready to be displayed, ex. your page has loaded completely and initial UI can be presented to the user. Before this, a loader will be displayed to the user.
Return value
None.
Example
const { tool } = await bambuserAppFramework.getContext();
// All necessary resources has been loaded and the UI is presentable to the user
// The loader currently showing should be removed and the tool UI presented
tool.setReady();
open()
Permission: Implicit via Tool API
Context: Main app
Open the tool programmatically from main app context