Kaleyra video call links can be integrated into an IFrame to make the experience more immersive and branded.
IFrame HTML tags have different capabilities and must be properly configured for all of Kaleyra's tools to work.
You can find the snippet of a complete integration:
<iframe width="100%" height="100% "src="https://sandbox.bandyer.com/connect/call/token"
allowfullscreen mozallowfullscreen webkitallowfullscreen
allow="camera *;microphone *; display-capture *; picture-in-picture *; autoplay *; fullscreen *"
sandbox ="allow-scripts allow-downloads allow-same-origin allow-forms">
Attributes used and their descriptions
| Name | Description |
|---|---|
allowfullscreen, mozallowfullscreen, webkitallowfullscreen | Set to true if the iframe can activate fullscreen mode (legacy, now allow=“fullscreen”). |
allow | Specifies a feature policy for the iframe. The policy defines what features are available to the iframe based on the origin of the request. |
sandbox | Applies extra restrictions or permission to the content in the frame. |
Allow attribute (Feature-Policy)
| Name | Description |
|---|---|
camera | Camera directive controls whether the current document is allowed to use video input devices. |
microphone | Microphone directive controls whether the current document is allowed to use audio input devices. |
display-capture | Display-capture directive controls whether or not the document is permitted to acquire your screen. |
picture-in-picture | Picture-in-picture directive controls whether the current document is allowed to play a video in a Picture-in-Picture mode (only one-to-one and one-to-many). |
autoplay | Allows to automatically reproduce audio and video content without user interaction, otherwise, our page requests a user interaction to play content. |
fullscreen | Set to true if the iframe can activate the fullscreen mode. |
Sandbox attribute
| Name | Description |
|---|---|
allow-forms | Allows the resource to submit forms. If this keyword is not used, form submission is blocked (form is used in sign tools). |
allow-scripts | Let the resource run scripts (but not create popup windows). |
allow-downloads | Allow for downloads to occur with a gesture from the user (required in fileShare and snapshot tools). |
allow-same-origin | If this token is not used, the resource is treated as being from a special origin that always fails the same-origin policy (required for the localstorage used) |
Note:
You can refer to the following links for more details about features and attributes:
Events
When you use our page with an iframe integration or you open a child page, you can attach different listeners to your main page which allows you to control the flow of a call and take some code decisions. For example, avoid the feedback page.
| Event | Description |
|---|---|
bandyer:call:started | Triggered when the session starts (at least two users are in the call). |
bandyer:call:ended | Triggered when a user hangup the call. |