Blitzz Embed : Blitzz Help Center

Introduction

Our customers do millions of minutes of video calls each month across our supported platforms: Chrome on Android and Safari on iOS, desktop Chrome, Safari, Edge, and Firefox.

When people are getting started using our API, one of the most frequent questions we hear is, "how do I add video calls to my mobile app?" This post is an in-depth answer to that question!

Also, feel free to check out our API calls demo from your phone or tablet.

To use the Embedded API you need to be on our Enterprise Edition with API Access, and you’ll need an API key. To request an API Key, please contact our support team.

Nothing to download, no libraries to bundle

Blitzz calls work inside web browsers. Users never need to download anything to join a call. And, as a mobile developer, you don't need to integrate a new library into your app to get started with Blitzz today.

Native mobile SDK for Blitzz calls are on our roadmap, but for now your best bet is to leverage our web offerings. By doing so, you'll have the most up-to-date video calling implementation available on each of our supported platforms, every time you start a video call. We take care of adding support for new platform features, working around bugs, and managing differences between platform versions.

Step 1: Create a Blitzz Session

To create a Blitzz Session, use the REST API to authenticate a user and create a New Session.

{
  "SessionType": {},
  "Reference": "string",
  "ExperienceId": 0,
  "StartAt": "string",
  "EndAt": "string"
}

A successful response contains an AgentURL and a GuestURL. You can use the AgentURL for the Host and open the link for them to join the call. The GuestURL will need to be sent to the Guest Participants.

Step 2: Invite a Guest User

After you have created a session, you will want to invite your Guest Participants. There are a few ways you can do this:

Send an SMS, Email or WhatsApp Invite: Use our Session invitation API to send an SMS using the SessionID from your previous step. The "InvitationType": identifies whether you are using SMS, WhatsApp or Email Invite and we handle the delivery side of things.
"1" = SMS
"2" = WhatsApp
"3" = Email
Use the Blitzz Agent Portal to configure your Call Experience and the Invitation Template.
Send a Push Notification or Call Notification
To send a push notification to one of your existing App Users, we recommend building this within your App. If you need help or guidance, our support team will be happy to assist you.

Step 3: Embed Blitzz Video call in your App (Web, iOS, Android)

Embed in Web App

If you are developing a mobile or desktop web app, you can:

Open a Blitzz meeting link like you would any other web page. This is an easy way to implement basic video call user flows, and to test that your meeting links are working.
Embed the video call directly in your app UI. Embedding calls lets you use video calls in single-page applications (SPAs) or other situations where you need to completely control the user flow.
Embed Blitzz iFrame for Agent portal using the iFrame Widget. iFrame provide the default Blitzz UI for Agents to view past sessions.

Opening a Blitzz Video Call link directly

To open a Video Call link for testing and prototyping, just make a simple <a> tag that points to one of your Blitzz Active Sessions:

<iframe width="1000" height="800" src="https://blitzz.blitzz.co/j/#/204289488?m=0&c=1&s=1" title="Blitzz video"></iframe>

Embed a Video Call

Embedding a meeting into a service or app requires using an iframe with the src attribute specified as the roomUrl. Read the Allowed domains section to learn how to allow your website’s domain so that browsers don’t block the iframe.

iFrame Widget

Follow these steps to embed the Agent portal as an iFrame. To simplify authentication and provide a seamless experience for End users, we recommend integrating with SSO/SAML or use Token Based authentication logging the user automatically. Please contact our support team to set this up for you. (blitzz.co/ticket)

Embed in Android

For Android native apps, just open a WebView

Blitzz video calls work great from within Android native WebView. Your options here are the same as from a web app: you can either use a Blitzz Session link directly or build and host your own call page embedding a Blitzz call.

If you're an experienced Android developer, you've probably used WebViews to display HTML content. Here are the Android developer docs.

If you're just getting started with Android development, and want to build a native app experience using web technologies, here's a nice tutorial about building WebView-based Applications.

Embed in iOS

For iOS native apps, present an SFSafariViewController or open Safari

From your iOS app, you have two options to join a Blitzz video call:

Present an SFSafariViewController displaying your call page. This is the approach that will make the call feel most "native" to your app, but will only work on iOS 13 and above (WebRTC wasn't supported in SFSafariViewController before then).
Link to your call page and let Safari open it. This will always work, but is a rougher user experience since it requires opening another app as well as implementing some web code to jump back to your app when the call is over (more on that later).

Note that, in either case, you once again have the option of directly using a Blitzz Video link or building and hosting a custom call page that embeds a Blitzz Video call.

Presenting an SFSafariViewController

The following Swift code runs in a view controller and creates, customizes, and presents an SFSafariViewController. Note that customization options are quite limited.

// callURL is the URL to your call page, whether a Blitzz meeting link or your custom call page
let callViewController = SFSafariViewController(url: callURL)
callViewController.dismissButtonStyle = .close
callViewController.preferredBarTintColor = .orange
callViewController.preferredControlTintColor = .white
present(callViewController, animated: true, completion: nil)

Opening a link in Safari

Here's Swift code to open your call page in Safari:

UIApplication.shared.open(callURL)

To redirect back to your app after a call, your call page will either:

Close the tab when the call is finished. In most cases, this will return the user back to your app. (The exception is if the user has switched to a different application during the call, then back to the call.) Or,
Redirect back to your app using a Custom URL Scheme or Universal Links.

If you're using a standard Blitzz meeting link as your call page, you can set properties on your meeting token to achieve either of the above:

Set the close_tab_on_exit property to true to close the tab automatically when the call is finished.
Set the redirect_URL property to your app's URL to redirect back to your app when the call is finished. This also allows you to customize the text of the button.

https://domain.blitzz.co/j/#/code?id=agentID&m=0&s=1&redirect_url=redirectURL&platform=My-App

Blitzz Embed