The mobile SDKs open the Messenger full screen inside your app. Conversations, help articles, calls and everything you set in Settings → Messenger work the same as on your website, and a customer who writes on your site and in your app sees one history when you identify them.

Preview. The SDKs are available as source code in four flavours. They are not yet in the App Store tooling, Maven Central, npm or pub.dev — ask us for the files. Test them in your app before you release.

How it works

Every SDK opens one page, https://app.shopxare.com/widget/v1/mobile/YOUR_APP_ID, in a web view and talks to it through a small bridge. The user's details travel in the part of the address after #, which is never sent to any server, and the page removes them as soon as it has read them. Because the Messenger itself runs on our side, improvements reach your app without an app update.

Identify your users

Pass your user's id, and the user hash from identity verification. Compute the hash on your server and send it to the app after login — never put the Messenger secret in an app, where anyone could read it.

iOS (Swift)

Add the ShopxareMessenger Swift package (iOS 14+).

import ShopxareMessenger

Shopxare.configure(appId: "YOUR_APP_ID")
Shopxare.identify(ShopxareUser(userId: "42", userHash: hashFromYourServer, email: "[email protected]", name: "Ada"))
Shopxare.present(from: self)                    // or present(from: self, newMessage: "")
Shopxare.trackEvent("order_placed", meta: ["total": 59.9])
Shopxare.addUnreadCountHandler { count in /* badge */ }
Shopxare.logout()                               // on logout

For calls, add NSMicrophoneUsageDescription and NSCameraUsageDescription to your Info.plist.

Android (Kotlin)

Add the shopxare module (minSdk 23).

Shopxare.configure("YOUR_APP_ID")
Shopxare.identify(ShopxareUser(userId = "42", userHash = hashFromYourServer, email = "[email protected]"))
Shopxare.present(context)                       // or present(context, newMessage = "")
Shopxare.trackEvent("order_placed", mapOf("total" to 59.9))
Shopxare.addUnreadCountListener { count -> /* badge */ }
Shopxare.logout()

For calls, declare RECORD_AUDIO (and CAMERA for video) in your manifest; the SDK asks the user when a call starts.

React Native

Needs react-native-webview 13 or later.

import { ShopxareProvider, useShopxare } from '@shopxare/react-native-messenger';

<ShopxareProvider appId="YOUR_APP_ID" user={{ userId: '42', userHash, email: '[email protected]' }} onUnreadCountChange={setBadge}>
  <App />
</ShopxareProvider>

const shopxare = useShopxare();
shopxare.present();
shopxare.trackEvent('order_placed', { total: 59.9 });
shopxare.logout();

Flutter

Needs webview_flutter 4.4+ and url_launcher.

Shopxare.configure('YOUR_APP_ID');
Shopxare.identify(const ShopxareUser(userId: '42', userHash: hashFromYourServer, email: '[email protected]'));
Shopxare.present(context);
Shopxare.trackEvent('order_placed', {'total': 59.9});
Shopxare.unreadCount.addListener(() => setBadge(Shopxare.unreadCount.value));
Shopxare.logout();

In this preview, file uploads and calls inside the Flutter web view need the platform setup of webview_flutter in your app.

What to know

Events you track while the Messenger is closed are sent the next time it opens.
Unread count updates while the Messenger screen exists. Push notifications for new replies are not part of the preview yet: the customer sees new replies when they open the Messenger again.
Links in messages open in the system browser.
Logout makes the next person on the device start a fresh session.

Building your own

Using another framework? Open the page in any web view and follow the bridge: the page sends {"type": "ready" | "unread" | "close" | "open_url"} messages, and your app can call window.ShopxareMobile.command(name, ...args) with show, hide, update, trackEvent, showNewMessage or shutdown.

Mobile SDK (preview)