--- title: "How to deploy contact channels: WebRTC Voice, Video on mobile apps" description: Learn how to embed TrueEngage WebRTC Voice and Video channels into your mobile app using a WebView. Includes setup steps, targeting rules, React Native code examples, and how to pass a custom visitorId for user identification. --- [![](https://kb.trueengage.com/hubfs/raw_assets/public/Web%20TE%203_0/assets/logoSvg.svg) ![](https://kb.trueengage.com/hubfs/raw_assets/public/Web%20TE%203_0/assets/logoText.svg)](https://kb.trueengage.com/?hsLang=en) [Home](https://trueengage.com/?hsLang=en) [Docs](https://kb.trueengage.com/genesys-cloud?hsLang=en) [Pricing](https://trueengage.com/genesys-cloud/pricing?hsLang=en) [Sign In](https://management.trueengage.com/login) [Install from AppFoundry](https://appfoundry.genesys.com/filter/genesyscloud/listing/d3d5011e-668b-411c-bc8d-512e3023b359) [Book a Demo](https://trueengage.com/genesys-cloud/demo?hsLang=en) ![](https://kb.trueengage.com/hubfs/raw_assets/public/Web%20TE%203_0/assets/hamburgerOpen.svg) ![](https://kb.trueengage.com/hubfs/raw_assets/public/Web%20TE%203_0/assets/hamburgerClose.svg) [Home](https://trueengage.com/?hsLang=en) [Docs](https://kb.trueengage.com/genesys-cloud?hsLang=en) [Pricing](https://trueengage.com/genesys-cloud/pricing?hsLang=en) [Sign In](https://management.trueengage.com/login) [Install from AppFoundry](https://appfoundry.genesys.com/filter/genesyscloud/listing/d3d5011e-668b-411c-bc8d-512e3023b359) [Book a Demo](https://trueengage.com/genesys-cloud/demo?hsLang=en) [Skip to content](https://kb.trueengage.com/genesys-cloud/how-to-deploy-webrtc-voice-or-video-on-mobile#main-content) - [Tickets](https://support.trueengage.com/tickets-view) - [Sign out](https://support.trueengage.com/_hcms/mem/logout) Open main navigation Close main navigation - [Tickets](https://support.trueengage.com/tickets-view) - [Sign out](https://support.trueengage.com/_hcms/mem/logout) How can we help you? - There are no suggestions because the search field is empty. 1. [Knowledge Base](https://kb.trueengage.com/genesys-cloud?hsLang=en) 2. [Installation & Setup](https://kb.trueengage.com/genesys-cloud/installation-setup?hsLang=en) # 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**   [![](https://kb.trueengage.com/hs-fs/hubfs/image-png-Nov-17-2025-02-03-30-3652-PM.png?width=670&height=208&name=image-png-Nov-17-2025-02-03-30-3652-PM.png)](https://kb.trueengage.com/hubfs/image-png-Nov-17-2025-02-03-30-3652-PM.png?hsLang=en)   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** ![](https://kb.trueengage.com/hs-fs/hubfs/image-png-Nov-17-2025-02-06-41-5696-PM.png?width=670&height=399&name=image-png-Nov-17-2025-02-06-41-5696-PM.png) 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 neededconst USER_ID = 'abc-123-user-id';// Inject visitorId into the WebView before widget loadsconst injectedJavaScript = USER_ID ? `  (function() {    window._cceSettings = {      visitorId: '${USER_ID}'    };    true;  })();` : undefined; ``` Then, include it in your WebView: ``` 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** [![](https://kb.trueengage.com/hs-fs/hubfs/image-png-Nov-17-2025-02-01-39-2084-PM.png?width=208&height=450&name=image-png-Nov-17-2025-02-01-39-2084-PM.png)](https://kb.trueengage.com/hubfs/image-png-Nov-17-2025-02-01-39-2084-PM.png?hsLang=en)   --- ### **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):** ``` NSCameraUsageDescriptionNSMicrophoneUsageDescription ``` ##### **Android:** ``` android.permission.CAMERAandroid.permission.RECORD_AUDIO ``` ---     - [Getting Started](https://kb.trueengage.com/genesys-cloud/getting-started?hsLang=en) - [Installation & Setup](https://kb.trueengage.com/genesys-cloud/installation-setup?hsLang=en) - [User Guide](https://kb.trueengage.com/genesys-cloud/user-guide?hsLang=en#main-content) - [Contact Channels](https://kb.trueengage.com/genesys-cloud/user-guide?hsLang=en#contact-channels) - [Features](https://kb.trueengage.com/genesys-cloud/features?hsLang=en) - [FAQs](https://kb.trueengage.com/genesys-cloud/faqs?hsLang=en) - [Troubleshooting](https://kb.trueengage.com/genesys-cloud/troubleshooting?hsLang=en) - [Administration & Billing](https://kb.trueengage.com/genesys-cloud/administration-billing?hsLang=en) - [Integrations & API's](https://kb.trueengage.com/genesys-cloud/integrations-apis?hsLang=en) - [Architecture & Security](https://kb.trueengage.com/genesys-cloud/architecture-security?hsLang=en) - [Legal](https://kb.trueengage.com/genesys-cloud/legal?hsLang=en) - [Interaction Routing & Availability](https://kb.trueengage.com/genesys-cloud/interaction-routing-availability?hsLang=en) [![logo (3) copy](https://kb.trueengage.com/hs-fs/hubfs/logo%20(3)%20copy.png?width=440&height=36&name=logo%20(3)%20copy.png "logo (3) copy")](https://www.trueengage.com?hsLang=en) [mailto:email@email.com](mailto:email@email.com)