How to deploy contact channels: WebRTC Voice, Video on mobile apps

TrueEngage allows you to embed real-time WebRTC Voice and Video contact channels directly inside your mobile application using a WebView component. This provides a smooth, native-like customer experience while maintaining full TrueEngage functionality — including routing, permissions, media handling, and visitor identification.

This guide explains how to embed TrueEngage into your iOS or Android mobile app, how to use the auto-generated mobile configuration from the TrueEngage dashboard, how to assign a custom visitor ID, and how to configure targeting for mobile URLs.

 

---

1. Overview

Embedding TrueEngage inside a mobile app lets you:

• Load the TrueEngage widget with Voice WebRTC or Video WebRTC

• Display the widget in a WebView

• Pass a custom visitorId for user identification

• Keep all routing and call flows managed in Genesys Cloud

Developers can integrate the widget into a mobile app within minutes.

---

2. Configure Targeting for Mobile App URLs

To ensure your mobile app widget displays properly inside the WebView, you must set Targeting rules in the TrueEngage dashboard.

This tells TrueEngage to show the widget when loaded from the mobile application.

Steps to Configure Targeting

1. Open your Mobile App widget in TrueEngage.

2. Navigate to Targeting.

3. Under Page addresses, set:

   • URL matching option: URL starts with

   • Page URL: https://mobile.trueengage.com

 

 

Without this rule, the widget may not appear inside the WebView.

---

 

3. Mobile Widget URL Format

Each mobile app instance loads TrueEngage using a simple URL:

https://mobile.trueengage.com/{ACCOUNT_GUID}/?channel={audio|video}

Where:

• ACCOUNT_GUID is your unique TrueEngage account ID

• channel can be:

   

  • audio for WebRTC Voice

  • video for WebRTC Video

   

This URL is what your mobile app should load inside a WebView.

---

4. Generate the Mobile Embed URL

Inside your TrueEngage Management Panel:

1. Navigate to Account → Mobile App

2. Select the channel you want to use (Voice Webcall, Video Webcall, etc.)

3. The panel will automatically generate a React Native sample code snippet containing the mobile widget URL

This URL can be embedded inside any mobile framework that supports WebViews.

---

5. Assigning a Custom Visitor ID

To help agents identify mobile app users, you can assign your own visitorId (for example, an authenticated user ID, loyalty number, or CRM identifier).

For mobile apps, the recommended method is to inject the visitorId directly into the WebView before the widget loads. This ensures that the ID is applied consistently and securely, without exposing it in the URL.

How It Works

TrueEngage listens for a global object called _cceSettings, which allows the app to pass configuration values — including visitorId — before the widget initializes.

Using React Native, you can inject this configuration into the WebView using the injectedJavaScriptBeforeContentLoaded property.

React Native Example: Injecting visitorId

// Optional: Set user identifier if needed
const USER_ID = 'abc-123-user-id';

// Inject visitorId into the WebView before widget loads
const injectedJavaScript = USER_ID ? `
  (function() {
    window._cceSettings = {
      visitorId: '${USER_ID}'
    };
    true;
  })();
` : undefined;

Then, include it in your WebView:

<WebView
  source=
  injectedJavaScriptBeforeContentLoaded={injectedJavaScript}
  onLoadEnd={() => setLoading(false)}
  mediaPlaybackRequiresUserAction={false}
  allowsInlineMediaPlayback={true}
/>

 

---

6. Mobile App UI Example

Below is the example of TrueEngage embedded inside a mobile app.

The red-outlined area represents the WebView container inside the mobile app. The TrueEngage widget (audio or video interface) is fully rendered within this WebView region.

Voice Call UI

 

---

7. Troubleshooting

Widget not loading

• Confirm the targeting rule is correct

• Ensure the mobile URL matches:

  https://mobile.trueengage.com/{ACCOUNT_GUID}/?channel={audio|video}

   

Camera or microphone not working

Ensure the app has permissions:

iOS (Info.plist):

NSCameraUsageDescription
NSMicrophoneUsageDescription

Android:

android.permission.CAMERA
android.permission.RECORD_AUDIO

---