IFrame Integration

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

allowfullscreen, mozallowfullscreen, webkitallowfullscreenSet to true if the iframe can activate fullscreen mode (legacy, now allow=“fullscreen”).
allowSpecifies a feature policy for the iframe. The policy defines what features are available to the iframe based on the origin of the request.
sandboxApplies extra restrictions or permission to the content in the frame.

Allow attribute (Feature-Policy)

cameraCamera directive controls whether the current document is allowed to use video input devices.
microphoneMicrophone directive controls whether the current document is allowed to use audio input devices.
display-captureDisplay-capture directive controls whether or not the document is permitted to acquire your screen.
picture-in-picturePicture-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).
autoplayAllows to automatically reproduce audio and video content without user interaction, otherwise, our page requests a user interaction to play content.
fullscreenSet to true if the iframe can activate the fullscreen mode.

Sandbox attribute

allow-formsAllows the resource to submit forms. If this keyword is not used, form submission is blocked (form is used in sign tools).
allow-scriptsLet the resource run scripts (but not create popup windows).
allow-downloadsAllow for downloads to occur with a gesture from the user (required in fileShare and snapshot tools).
allow-same-originIf 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)



You can refer to the following links for more details about features and attributes:


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.

bandyer:call:startedTriggered when the session starts (at least two users are in the call).
bandyer:call:endedTriggered when a user hangup the call.