Angle Web SDK

Angle Audio
Search…
Angle Audio
Angle Audio - Documentation & Tutorials
SDK Documentation
Angle Web SDK
Help & Tutorials
User roles
Angle Web SDK
Use the Angle Web SDK to embed Angle in your website or web view.
Getting Started
Integrating the Angle Web SDK in your website is really easy. Simply use the following snipped to get started:
1
<!-- this is the container where Angle will be inserted into -->
2
<div id="angle"></div>
3
​
4
<!-- load the latest angle script -->
5
<script src="//unpkg.com/@angle-technologies/[email protected]/dist/angle-sdk-web.umd.js" charset="utf-8"></script>
6
​
7
<script>
8
// Initialize Angle
9
AngleSDK.init('#angle', {
10
    height: '600px',
11
    name: 'Happy Hippo'
12
})
13
</script>
Copied!
That's it! The Angle conversation will now start in the #angle div.
Demo
Check out our demo to see the Angle SDK in action: https://angle-audio.gitlab.io/angle-sdk-web/​
Create your own Iframe or WebView
The init function of the Angle SDK creates an Iframe and loads the Angle experience inside of it. You can also create your own Iframe or a WebView by generating the join link with the Angle SDK and load it in an Iframe or WebView.
1
const href = AngleSDK.getHref({
2
    id: 'aa3156e0-4ec0-45ae-87c2-5a76a37cc0d1',
3
    name: 'Happy Hippo'
4
})
5
​
6
console.log(href) // https://app.angle.audio/join/aa3156e0-4ec0-45ae-87c2-5a76a37cc0d1?name=Happy%20Hippo&embedded=true
Copied!
Please note that if you use the getHref method to generate a join link a topic ID must be provided. 
The generated link can then be used eg. as the src of an iframe
1
<iframe 
2
    style="width: 100%; height: 600px; border: none;"
3
    allow="camera *;microphone *;"
4
    src="https://app.angle.audio/join/aa3156e0-4ec0-45ae-87c2-5a76a37cc0d1?name=Happy%20Hippo&embedded=true">
5
</iframe>
Copied!
The allow="camera *;microphone *;" is required to allow the iframe to access the camera and microphone. If your application does not require camera sharing, you can omit the camera permission and set the attribute toallow="microphone *;" .
​
Import in Your Project
You can also install the AngleSDK as a dependency and import it:
1
import * as AngleSDK from '@angle-technologies/web-sdk'
2
​
3
// initialize a conversation
4
AngleSDK.init('#angle', {
5
    height: '600px',
6
    name: 'Happy Hippo'
7
})
Copied!
Container
The first parameter of the init function specifies the container of the Angle conversation. It can be any CSS selector or a DOM element.

Examples:
1
// initialize Angle with a DOM element
2
const el = document.querySelector('#my-angle-container')
3
AngleSDK.init(el, {
4
 //...
5
})
6
​
7
// initialize Angle with a CSS selector
8
AngleSDK.init('#my-angle-container', {
9
 //...
10
})
Copied!
Options
The second parameter of the init function are the options. The following options can be passed to the init function
Parameter
Required
Description
Default Value
id
optional
The topic id. The ID must be a valid UUID v4 id. The ID is used to connect different users to the same conversation. If no ID is provided a new one is generated.
-
height
required
The height of the container. Can be any CSS string or a number. 
​
Example: 600px or 600 or 30rem
-
avatar
optional
The avatar of the joining user. Must be an URL to a valid image. Valid image formats are PNG, JPG or GIF.
-
userId
optional
The user id of the user who is joining the room. If no id is provided a random one will be generated. The id must be a valid UUID v4 id. This is useful if you want to track individual users, eg. if you want to track which user joined a specific room.
-
sharingLink
optional
A sharing link that leads to the conversation. When this sharing link is set, a "Share" button will be displayed in the conversation where users can copy and share this link.
-
hideLeaveButton
optional
If set to true the leave button will not be shown.
false
showSoundOffButton
optional
If set to true a "sound off" button will be shown to mute the remote audio
false
allowAnonymousParticipation
optional
If set to true users that are not authenticated can participate in a conversation.
false
infiniteRoom
optional
if set to true the room will be open indefinitely and never close
false
keepOpenIfEmpty
optional
If set totrue the conversation will stay open even if there are no participants. When set to false the conversation will be closed if no one is in the conversation for a few minutes.
false
alwaysShowRoomDetailsFirst
optional
If set to true the room details will always be shown first, even if the room is live.
false
Mobile Integration
You can easily embed the Angle Web SDK in your website or web app and load the web app inside a WebView in your Android or iOS app.
To allow conversation participants to hear the other participants and speak in a conversation, you need to grant the following permissions on app level before opening the WebView.
Android Permissions
Add the following permissions and features to your AndroidManifest.xml:
1
<uses-permission android:name="android.permission.CAMERA" />
2
<uses-permission android:name="android.permission.INTERNET" />
3
<uses-permission android:name="android.permission.RECORD_AUDIO" />
4
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
5
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
6
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
7
<uses-permission android:name="android.permission.BLUETOOTH" />
8
​
9
<uses-feature android:name="android.hardware.audio.pro" />
10
<uses-feature android:name="android.hardware.microphone"/>
Copied!
Allow WebView to grant mic permission:
1
webView.setWebChromeClient(new WebChromeClient(){
2
    @Override
3
    public void onPermissionRequest(PermissionRequest request){
4
        request.grant(request.getResources());
5
    }
6
})
Copied!
iOS Permissions
Enable the following Capabilities in the Background Modes of your iOS project:
Audio, AirPlay, and Picture in Picture
Uses Bluetooth LE accessories
Background fetch
Add the following Permission strings to your app's info.plist:
1
	<key>NSCameraUsageDescription</key>
2
	<string>Share your camera in an Angle conversation</string>
3
	<key>NSMicrophoneUsageDescription</key>
4
	<string>Speak in an Angle conversation</string>
Copied!
In the current version, you also need to ask the user manually for the mic permission before joining the conversation:
1
AVAudioSession.sharedInstance().requestRecordPermission
Copied!
Otherwise, the user will not be able to unmute. This will be improved in the next version of the SDK.
Example WebView setup in Swift
1
func makeUIView(context: Context) -> WKWebView {
2
    // Enable javascript in WKWebView
3
    let preferences = WKPreferences()
4
    preferences.javaScriptEnabled = true
5
    
6
    let configuration = WKWebViewConfiguration()
7
    configuration.userContentController.add(self.makeCoordinator(), name: "iOSNative")
8
    configuration.preferences = preferences
9
    configuration.allowsInlineMediaPlayback = true
10
    
11
    let webView = WKWebView(frame: CGRect.zero, configuration: configuration)
12
    webView.navigationDelegate = context.coordinator
13
    webView.allowsBackForwardNavigationGestures = true
14
    webView.scrollView.isScrollEnabled = true
15
    
16
    
17
    if let url = URL(string: "https://app.angle.audio/join/aa3156e0-4ec0-45ae-87c2-5a76a37cc0d1?name=Happy%20Hippo&embedded=true") {
18
        webView.load(URLRequest(url: url))
19
    }
20
    
21
   return webView
22
}
Copied!
Angle Audio - Documentation & Tutorials
User roles
Last modified 3mo ago
Copy link
Contents
Getting Started
Demo
Create your own Iframe or WebView
Import in Your Project