Using Omnichannel widget in a Native app beta

Omnichannel widget is a web-based application, but it can be embedded into a mobile app as a web view.

Step 1

You will need to have a active widget. If you do not have a widget yet, please navigate to the installation guide and create one.

Step 2

Create a webpage that embeds your Omnichannel widget. The webpage should host your widget snippet. Make sure the webpage domain is added to Authorized domains section in General tab in Widget settings.

Adding authorized domains

Step 3

Configure your widget settings to open on load and it's in native app mode

var MessageBirdChatWidgetSettings = {
widgetId: <widget-id>,
initializeOnLoad: true,
nativeMode: true,
};
Notification icon

Please make sure to swap out the values in the settings with the widget ID which can be found on settings page.

Code snippets:

React native app

import { WebView } from 'react-native-webview';
const App = () => (
<WebView
cacheEnabled={false}
source={{uri: 'https://<your-hosted-widget-url>'}}
/>
);

iOS application

import UIKit
import WebKit
class ViewController: UIViewController, WKUIDelegate {
var webView: WKWebView!
override func loadView() {
let webConfiguration = WKWebViewConfiguration()
webView = WKWebView(frame: .zero, configuration: webConfiguration)
webView.uiDelegate = self
view = webView
}
override func viewDidLoad() {
super.viewDidLoad()
let myURL = URL(string:"https://<your-hosted-widget-url>")
let myRequest = URLRequest(url: myURL!)
webView.load(myRequest)
}
}

Questions?

We’re always happy to help with code or other doubts you might have! Check out our Quickstarts, API Reference, Tutorials, SDKs, or contact our Support team.

Cookie Settings