# Embedding Blings MP5 Videos in Mobile Apps

### Overview

Blings MP5 videos are most commonly shared via email, SMS, and web links, using a simple URL that opens a personalized video page in the browser.

In some cases, companies also need a way to embed the same MP5 video experience directly inside their mobile apps (Android or iOS), without rebuilding the video logic or hosting custom pages.

To support this, Blings provides a ready-made hosted video page (for example: `https://account.mp5.live/video`).

This hosted page already includes the Blings Web SDK and all required setup.<br>

Alternatively, you can host your own HTML page with the Blings SDK and follow the same integration logic inside your native apps.<br>

Once you have a video page (hosted by Blings or your own), you only need to:

* Open it inside a WebView
* Pass personalization data using URL query parameters

This article explains how to do exactly that.

***

### Two ways to use Blings MP5 videos

#### Option 1: Use the Blings-hosted page (recommended)

Blings provides a hosted video page on mp5.live that you can use out of the box.

Benefits

* No HTML or SDK setup required
* Same link works for email, SMS, web, and mobile apps
* Fastest way to embed MP5 videos in mobile apps<br>

Example:

`https://{`**`brand name`**`}.mp5.live/{`**`video name`**`}?{`**`personalization tokens`**`}`

***

#### Option 2: Build your own HTML page with the Blings SDK<br>

If you need full control over layout, routing, or branding, you can host your own HTML page and embed the Blings SDK yourself.<br>

Follow the official SDK documentation:

[Getting Started with Blings.io Dynamic Video SDK](/developers/getting-started/getting-started-with-blings.io-dynamic-video-sdk.md)

***

### Passing personalization data using query parameters

The Blings-hosted page supports URL query parameters for personalization.

Each query parameter maps to a dynamic data field defined in your Blings project.

#### Example fields

* name → viewer name
* points → loyalty points

#### Example URL

`https://account.mp5.live/video?`**`name=John`**`&`**`points=90`**

When the page loads, Blings automatically injects these values into the MP5 video.

***

### Android: Loading an MP5 video in a WebView

Android’s WebView allows you to load the Blings-hosted page directly inside your app.

#### Kotlin example

```kotlin
import android.annotation.SuppressLint
import android.net.Uri
import android.os.Bundle
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.appcompat.app.AppCompatActivity

class BlingsVideoActivity : AppCompatActivity() {

    @SuppressLint("SetJavaScriptEnabled")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val webView = WebView(this)
        setContentView(webView)

        // Required for the Blings hosted page
        webView.settings.javaScriptEnabled = true
        webView.settings.domStorageEnabled = true
        webView.webViewClient = WebViewClient()

        val baseUrl = "https://account.mp5.live/video"

        val url = Uri.parse(baseUrl).buildUpon()
            .appendQueryParameter("name", "John")
            .appendQueryParameter("points", "90")
            .build()
            .toString()

        webView.loadUrl(url)
    }
}
```

***

### iOS: Loading an MP5 video in a WKWebView

On iOS, use WKWebView to display the Blings-hosted page.

#### Swift example

```swift
import UIKit
import WebKit

final class BlingsVideoViewController: UIViewController {

    private var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let config = WKWebViewConfiguration()
        config.allowsInlineMediaPlayback = true

        webView = WKWebView(frame: .zero, configuration: config)
        view = webView

        var components = URLComponents(string: "https://account.mp5.live/video")!
        components.queryItems = [
            URLQueryItem(name: "name", value: "John"),
            URLQueryItem(name: "points", value: "90")
        ]

        let request = URLRequest(url: components.url!)
        webView.load(request)
    }
}
```

***

## Two-way communication between the video and the native app (Advanced)

In some use cases, it’s not enough to only pass data into the video.

You may also want the video to send events or data back to the native app, for example:

* Notify the app when the video starts or ends
* React to a button or CTA clicked inside the video
* Trigger native navigation after a specific scene
* Pass custom data from the video back to the app<br>

Blings supports this by allowing you to call global JavaScript functions directly from the video timeline (configured in Blings Studio).

### How it works (high level)

1. You define a global JavaScript function on the page (window or document)
2. You reference and call this function from the video using Blings Studio
3. The function forwards the message to the native WebView bridge
4. The native app receives the message and handles it<br>

This approach works for both:

* Blings-hosted pages (mp5.live)
* Custom HTML pages using the Blings SDK

***

### Example: Global function called from the video

#### JavaScript function (web side)

```html
<script>
  window.sendMessageToApp = function (payload) {
    // iOS (WKWebView)
    if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.blings) {
      window.webkit.messageHandlers.blings.postMessage(payload);
      return;
    }

    // Android (WebView + addJavascriptInterface)
    if (window.AndroidBridge && typeof window.AndroidBridge.postMessage === "function") {
      window.AndroidBridge.postMessage(JSON.stringify(payload));
      return;
    }

    // Fallback (browser / debugging)
    console.log("Message from video:", payload);
  };
</script>
```

This function becomes callable from inside the video.

### Calling the function from Blings Studio

In Blings Studio, you can configure an interaction (for example on a scene, button, or timeline event) to execute JavaScript.

Example call:

```javascript
window.sendMessageToApp({
  type: "video_event",
  action: "cta_clicked",
  scene: "loyalty_reward"
});
```

When this code runs:

* The video calls the global function
* The function forwards the message to the native app
* The app receives the message and can respond accordingly

### Where to define the function

#### If you use a custom HTML page with the Blings SDK

Simply add the function:

* In a \<script> tag in your HTML
* Or in your main JavaScript bundle

As long as the function exists on window, the video can call it.

#### If you use the Blings-hosted video page

You can still add custom JavaScript.

1. Open your project in the Blings Platform
2. Go to the Integration page
3. Open the Advanced section
4. Open the code editor
5. Add the global function there

The function will be injected into the hosted page and available to the video

***

### Receiving messages in the native app

#### Android (example)

```kotlin
class AndroidBridge {
    @JavascriptInterface
    fun postMessage(message: String) {
        // Parse the message and act on it
        // Example: navigate, track analytics, close WebView, etc.
    }
}
```

#### iOS (example)

```swift
func userContentController(_ userContentController: WKUserContentController,
                           didReceive message: WKScriptMessage) {
    // message.body contains the payload sent from the video
}
```

### Notes & best practices

* Query parameter names must match the data fields defined in your Blings project.
* Test the URL in a mobile browser first, then embed it in a WebView.
* Use a single bridge function and route logic in native code

***

### Related documentation

* [How to connect my data to the video](/developers/getting-started/how-to-connect-my-data-to-the-sdk.md)
* [Getting Started with Blings.io Dynamic Video SDK](/developers/getting-started/getting-started-with-blings.io-dynamic-video-sdk.md)
* [CRM data integration](/developers/getting-started/how-to-connect-my-data-to-the-sdk/crm-data-integration.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.blings.io/developers/getting-started/advanced-topics/webview-integration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.