Blitzz Embed Developer Guide

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

1. 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.
   
2. 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 provides the default Blitzz UI for Agents to view past sessions.

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>

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.

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)

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.

For iOS native apps, present an SFSafariViewController or open Safari

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

1. 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).
   
   
2. 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.

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)

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:

1. 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,
2. 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:

1. Set the close_tab_on_exit property to true to close the tab automatically when the call is finished.
2. 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