> ## Documentation Index
> Fetch the complete documentation index at: https://hellotars.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Add your agent to a mobile app

> Turn on the mobile bridge, hand the platform snippet to your mobile developer, and set bridge events on gambits.

export const Browser = ({url, children}) => <div className="tars-browser">
    <div className="tars-browser-bar">
      <span className="tars-browser-dots">
        <i />
        <i />
        <i />
      </span>
      {url ? <span className="tars-browser-url">{url}</span> : null}
    </div>
    <div className="tars-browser-view">{children}</div>
  </div>;

export const img = {
  activity: {
    activityTimeline: "/docs/guides/activity/images/activity-timeline.png",
    capturedVariablesPanel: "/docs/guides/activity/images/captured-variables-panel.png",
    dataViewCards: "/docs/guides/activity/images/data-view-cards.png",
    exportDataDialog: "/docs/guides/activity/images/export-data-dialog.png",
    tasksPanelExportReady: "/docs/guides/activity/images/tasks-panel-export-ready.png"
  },
  analytics: {
    analyticsOverview: "/docs/guides/analytics/images/analytics-overview.png",
    exploreGallery: "/docs/guides/analytics/images/explore-gallery.png",
    exploreTab: "/docs/guides/analytics/images/explore-tab.png",
    goalForm: "/docs/guides/analytics/images/goal-form.png",
    goalsTab: "/docs/guides/analytics/images/goals-tab.png",
    improveDiagnostics: "/docs/guides/analytics/images/improve-diagnostics.png",
    improveTab: "/docs/guides/analytics/images/improve-tab.png",
    teamTab: "/docs/guides/analytics/images/team-tab.png"
  },
  billing: {
    billingOverview: "/docs/guides/billing/images/billing-overview.png",
    buyConversationsDialog: "/docs/guides/billing/images/buy-conversations-dialog.png",
    buySeatsDialog: "/docs/guides/billing/images/buy-seats-dialog.png",
    livechatSeatsTab: "/docs/guides/billing/images/livechat-seats-tab.png",
    organizationDeletionLifecycle: "/docs/guides/billing/images/organization-deletion-lifecycle.svg",
    organizationSwitcher: "/docs/guides/billing/images/organization-switcher.png",
    rolesAndAccessMatrix: "/docs/guides/billing/images/roles-and-access-matrix.png"
  },
  building: {
    agentBehaviorGuardrails: "/docs/guides/building/images/agent-behavior-guardrails.png",
    agentCardMenu: "/docs/guides/building/images/agent-card-menu.png",
    agentConfigure: "/docs/guides/building/images/agent-configure.png",
    agentExitRoutesDialog: "/docs/guides/building/images/agent-exit-routes-dialog.png",
    agentLibrary: "/docs/guides/building/images/agent-library.png",
    agentModelParameters: "/docs/guides/building/images/agent-model-parameters.png",
    aiAgentGambitLoop: "/docs/guides/building/images/ai-agent-gambit-loop.svg",
    builderBasics: "/docs/guides/building/images/builder-basics.png",
    builderConnectHandlePanel: "/docs/guides/building/images/builder-connect-handle-panel.png",
    builtInToolsDialog: "/docs/guides/building/images/built-in-tools-dialog.png",
    configureDebugTab: "/docs/guides/building/images/configure-debug-tab.png",
    configureLanguage: "/docs/guides/building/images/configure-language.png",
    configureNotifications: "/docs/guides/building/images/configure-notifications.png",
    createAgentDialog: "/docs/guides/building/images/create-agent-dialog.png",
    draftPublishRollbackPinning: "/docs/guides/building/images/draft-publish-rollback-pinning.svg",
    draftSwitcherChip: "/docs/guides/building/images/draft-switcher-chip.png",
    duplicateAgentDialog: "/docs/guides/building/images/duplicate-agent-dialog.png",
    flowConditions: "/docs/guides/building/images/flow-conditions.png",
    gambitPalette: "/docs/guides/building/images/gambit-palette.png",
    gambits: {
      gambitAiAgent: "/docs/guides/building/gambits/images/gambit-ai-agent.png",
      gambitApiCall: "/docs/guides/building/gambits/images/gambit-api-call.png",
      gambitAutoSuggestion: "/docs/guides/building/gambits/images/gambit-auto-suggestion.png",
      gambitButton: "/docs/guides/building/gambits/images/gambit-button.png",
      gambitCard: "/docs/guides/building/gambits/images/gambit-card.png",
      gambitChannel: "/docs/guides/building/gambits/images/gambit-channel.png",
      gambitCustomCode: "/docs/guides/building/gambits/images/gambit-custom-code.png",
      gambitDateTime: "/docs/guides/building/gambits/images/gambit-date-time.png",
      gambitGeoLocation: "/docs/guides/building/gambits/images/gambit-geo-location.png",
      gambitLanguage: "/docs/guides/building/gambits/images/gambit-language.png",
      gambitLiveChat: "/docs/guides/building/gambits/images/gambit-live-chat.png",
      gambitMediaUpload: "/docs/guides/building/gambits/images/gambit-media-upload.png",
      gambitNoInput: "/docs/guides/building/gambits/images/gambit-no-input.png",
      gambitRedirect: "/docs/guides/building/gambits/images/gambit-redirect.png",
      gambitStarRating: "/docs/guides/building/gambits/images/gambit-star-rating.png",
      gambitStartAndEnd: "/docs/guides/building/gambits/images/gambit-start-and-end.png",
      gambitText: "/docs/guides/building/gambits/images/gambit-text.png",
      gambitTrigger: "/docs/guides/building/gambits/images/gambit-trigger.png"
    },
    languagesTranslateGambit: "/docs/guides/building/images/languages-translate-gambit.png",
    languageSystemMessages: "/docs/guides/building/images/language-system-messages.png",
    newDraftDialog: "/docs/guides/building/images/new-draft-dialog.png",
    outputComponentsGrid: "/docs/guides/building/images/output-components-grid.png",
    publishDialog: "/docs/guides/building/images/publish-dialog.png",
    systemPromptDialog: "/docs/guides/building/images/system-prompt-dialog.png",
    testModeEventLog: "/docs/guides/building/images/test-mode-event-log.png",
    testModePanel: "/docs/guides/building/images/test-mode-panel.png",
    validationProblemsPanel: "/docs/guides/building/images/validation-problems-panel.png",
    variablePickerPanel: "/docs/guides/building/images/variable-picker-panel.png",
    variablePillInserted: "/docs/guides/building/images/variable-pill-inserted.png",
    versionsDraftsPanel: "/docs/guides/building/images/versions-drafts-panel.png"
  },
  campaigns: {
    campaignFlavorsTriggers: "/docs/guides/campaigns/images/campaign-flavors-triggers.svg",
    campaignReplyRouting: "/docs/guides/campaigns/images/campaign-reply-routing.svg",
    campaignSendAnatomy: "/docs/guides/campaigns/images/campaign-send-anatomy.svg",
    createACampaign: "/docs/guides/campaigns/images/create-a-campaign.png",
    walletReserveSettleRefund: "/docs/guides/campaigns/images/wallet-reserve-settle-refund.svg",
    webhookCampaignContractLocking: "/docs/guides/campaigns/images/webhook-campaign-contract-locking.svg",
    webhookCampaignLifecycleStates: "/docs/guides/campaigns/images/webhook-campaign-lifecycle-states.svg",
    webhookCampaignOneCallOneDelivery: "/docs/guides/campaigns/images/webhook-campaign-one-call-one-delivery.svg"
  },
  channels: {
    distributeWhatsappConnect: "/docs/guides/channels/images/distribute-whatsapp-connect.png",
    whatsappConnectDialogWaiting: "/docs/guides/channels/images/whatsapp-connect-dialog-waiting.png",
    whatsappEmptyState: "/docs/guides/channels/images/whatsapp-empty-state.png"
  },
  deploy: {
    bridgeEventGambitSection: "/docs/guides/deploy/images/bridge-event-gambit-section.png",
    deploymentSurfacesAndChannels: "/docs/guides/deploy/images/deployment-surfaces-and-channels.svg",
    designAgentTab: "/docs/guides/deploy/images/design-agent-tab.png",
    designLauncherTab: "/docs/guides/deploy/images/design-launcher-tab.png",
    embedIframeTab: "/docs/guides/deploy/images/embed-iframe-tab.png",
    embedTheWidget: "/docs/guides/deploy/images/embed-the-widget.png",
    mobileAppIntegration: "/docs/guides/deploy/images/mobile-app-integration.png",
    onYourDomain: "/docs/guides/deploy/images/on-your-domain.png",
    shareYourAgentLink: "/docs/guides/deploy/images/share-your-agent-link.png"
  },
  developer: {
    api: {
      channelSendTemplateVsMessage: "/docs/developer/api/images/channel-send-template-vs-message.svg",
      endUsers: {
        endUsersListCursorPagination: "/docs/developer/api/end-users/images/end-users-list-cursor-pagination.svg"
      },
      triggerCallConversationLifecycle: "/docs/developer/api/images/trigger-call-conversation-lifecycle.svg"
    },
    developerSurfacesMap: "/docs/developer/images/developer-surfaces-map.svg",
    embed: {
      embedConfigToWidgetContext: "/docs/developer/embed/images/embed-config-to-widget-context.svg",
      hostPageBridgeFlow: "/docs/developer/embed/images/host-page-bridge-flow.svg",
      identitySigningFlow: "/docs/developer/embed/images/identity-signing-flow.svg",
      scriptVsIframeEmbed: "/docs/developer/embed/images/script-vs-iframe-embed.svg"
    },
    mobile: {
      bridgeMessageProtocol: "/docs/developer/mobile/images/bridge-message-protocol.svg",
      webviewBridgeArchitecture: "/docs/developer/mobile/images/webview-bridge-architecture.svg"
    }
  },
  endUsers: {
    anonymousToIdentifiedProfile: "/docs/guides/end-users/images/anonymous-to-identified-profile.svg",
    bulkActionBar: "/docs/guides/end-users/images/bulk-action-bar.png",
    campaignConsentGate: "/docs/guides/end-users/images/campaign-consent-gate.svg",
    consentPerChannelStates: "/docs/guides/end-users/images/consent-per-channel-states.svg",
    dynamicVsStaticSegments: "/docs/guides/end-users/images/dynamic-vs-static-segments.svg",
    endUserDirectory: "/docs/guides/end-users/images/end-user-directory.png",
    endUserProfileAcrossChannels: "/docs/guides/end-users/images/end-user-profile-across-channels.svg",
    endUserProfilePanes: "/docs/guides/end-users/images/end-user-profile-panes.png",
    profileMergeAndTakeoverProtection: "/docs/guides/end-users/images/profile-merge-and-takeover-protection.svg",
    segmentBuilder: "/docs/guides/end-users/images/segment-builder.png",
    segmentsPage: "/docs/guides/end-users/images/segments-page.png"
  },
  getStarted: {
    agentStates: "/docs/get-started/images/agent-states.svg",
    buildToLivePath: "/docs/get-started/images/build-to-live-path.svg",
    dashboardSidebarMap: "/docs/get-started/images/dashboard-sidebar-map.png",
    organizationOwnershipAndRoles: "/docs/get-started/images/organization-ownership-and-roles.svg",
    quickstart: {
      step1CreateYourAccount: "/docs/get-started/images/quickstart/step-1-create-your-account.png",
      step3ConnectTheAiAgent: "/docs/get-started/images/quickstart/step-3-connect-the-ai-agent.png",
      step4TestMode: "/docs/get-started/images/quickstart/step-4-test-mode.png"
    },
    quickstartCanvas: "/docs/get-started/images/quickstart-canvas.png"
  },
  knowledge: {
    addASource: "/docs/guides/knowledge/images/add-a-source.png",
    addRetrieverPicker: "/docs/guides/knowledge/images/add-retriever-picker.png",
    attachKnowledgeGambit: "/docs/guides/knowledge/images/attach-knowledge-gambit.png",
    configureARetriever: "/docs/guides/knowledge/images/configure-a-retriever.png",
    createKnowledgeBaseDialog: "/docs/guides/knowledge/images/create-knowledge-base-dialog.png",
    customRetrieverDialog: "/docs/guides/knowledge/images/custom-retriever-dialog.png",
    datasetTab: "/docs/guides/knowledge/images/dataset-tab.png",
    documentChangeReindexLifecycle: "/docs/guides/knowledge/images/document-change-reindex-lifecycle.svg",
    documentsTabPreview: "/docs/guides/knowledge/images/documents-tab-preview.png",
    importAWebsite: "/docs/guides/knowledge/images/import-a-website.png",
    kbList: "/docs/guides/knowledge/images/kb-list.png",
    retrieverIndexStates: "/docs/guides/knowledge/images/retriever-index-states.svg",
    retrieverQueryPipeline: "/docs/guides/knowledge/images/retriever-query-pipeline.svg",
    standardVsParentChildChunking: "/docs/guides/knowledge/images/standard-vs-parent-child-chunking.svg",
    syncManagement: "/docs/guides/knowledge/images/sync-management.png",
    testRetriever: "/docs/guides/knowledge/images/test-retriever.png"
  },
  liveChat: {
    agentWorkspace: "/docs/guides/live-chat/images/agent-workspace.png",
    assignedAgentPicker: "/docs/guides/live-chat/images/assigned-agent-picker.png",
    automaticAssignmentRouting: "/docs/guides/live-chat/images/automatic-assignment-routing.svg",
    availabilityDropdown: "/docs/guides/live-chat/images/availability-dropdown.png",
    cannedResponses: "/docs/guides/live-chat/images/canned-responses.png",
    composerPreferences: "/docs/guides/live-chat/images/composer-preferences.png",
    copilotPanel: "/docs/guides/live-chat/images/copilot-panel.png",
    filterConversationsDialog: "/docs/guides/live-chat/images/filter-conversations-dialog.png",
    inboxAnalyticsTab: "/docs/guides/live-chat/images/inbox-analytics-tab.png",
    inboxAvailabilityTab: "/docs/guides/live-chat/images/inbox-availability-tab.png",
    inboxesSettings: "/docs/guides/live-chat/images/inboxes-settings.png",
    inboxRoutingTab: "/docs/guides/live-chat/images/inbox-routing-tab.png",
    labelsSettings: "/docs/guides/live-chat/images/labels-settings.png",
    newAttributeDialog: "/docs/guides/live-chat/images/new-attribute-dialog.png",
    newCannedResponseDialog: "/docs/guides/live-chat/images/new-canned-response-dialog.png",
    notificationPreferences: "/docs/guides/live-chat/images/notification-preferences.png",
    notificationsPage: "/docs/guides/live-chat/images/notifications-page.png",
    pickupTargetCard: "/docs/guides/live-chat/images/pickup-target-card.png",
    resolveMenu: "/docs/guides/live-chat/images/resolve-menu.png",
    searchDialog: "/docs/guides/live-chat/images/search-dialog.png",
    seatGateConversation: "/docs/guides/live-chat/images/seat-gate-conversation.png",
    seatsSettings: "/docs/guides/live-chat/images/seats-settings.png",
    workTheInbox: "/docs/guides/live-chat/images/work-the-inbox.png"
  },
  security: {
    addOpenRouterKeyDialog: "/docs/guides/security/images/add-open-router-key-dialog.png",
    auditChainVerified: "/docs/guides/security/images/audit-chain-verified.png",
    auditEventDrawer: "/docs/guides/security/images/audit-event-drawer.png",
    auditExportDialog: "/docs/guides/security/images/audit-export-dialog.png",
    auditLogViewer: "/docs/guides/security/images/audit-log-viewer.png",
    auditRecordLifecycle: "/docs/guides/security/images/audit-record-lifecycle.svg",
    logPrivacyRedactionEnabled: "/docs/guides/security/images/log-privacy-redaction-enabled.png",
    modelProviderEmptyState: "/docs/guides/security/images/model-provider-empty-state.png",
    privacySettings: "/docs/guides/security/images/privacy-settings.png",
    siemConnectWizard: "/docs/guides/security/images/siem-connect-wizard.png",
    supportActorMasking: "/docs/guides/security/images/support-actor-masking.svg"
  },
  tools: {
    addToolModal: "/docs/guides/tools/images/add-tool-modal.png",
    addToolsPanel: "/docs/guides/tools/images/add-tools-panel.png",
    codekitActionEditor: "/docs/guides/tools/images/codekit-action-editor.png",
    codekitConnectToolkitsDialog: "/docs/guides/tools/images/codekit-connect-toolkits-dialog.png",
    codekitSchemaDialog: "/docs/guides/tools/images/codekit-schema-dialog.png",
    codekitToolkit: "/docs/guides/tools/images/codekit-toolkit.png",
    codekitToolkitAnatomy: "/docs/guides/tools/images/codekit-toolkit-anatomy.svg",
    createActionDialog: "/docs/guides/tools/images/create-action-dialog.png",
    createCodekitDialog: "/docs/guides/tools/images/create-codekit-dialog.png",
    responseFilteringDialog: "/docs/guides/tools/images/response-filtering-dialog.png",
    toolGambitEditorAgentMode: "/docs/guides/tools/images/tool-gambit-editor-agent-mode.png",
    toolGambitEditorWorkflowMode: "/docs/guides/tools/images/tool-gambit-editor-workflow-mode.png",
    toolkitDetail: "/docs/guides/tools/images/toolkit-detail.png",
    toolsConnected: "/docs/guides/tools/images/tools-connected.png",
    toolsDirectory: "/docs/guides/tools/images/tools-directory.png",
    viewActionsModal: "/docs/guides/tools/images/view-actions-modal.png",
    workflowModeResponse: "/docs/guides/tools/images/workflow-mode-response.png"
  }
};

export const urls = {
  app: "https://dashboard.hellotars.com",
  site: "https://hellotars.com",
  support: "mailto:support@hellotars.com",
  status: "https://status.hellotars.com"
};

At the end of this page, your mobile developer has the snippet that loads your agent inside your iOS or Android app. Your flow sends bridge events to that app.

<Browser url={urls.app}>
  <img src={img.deploy.mobileAppIntegration} alt="The Mobile App view with Enable Bridge Events on, the React Native, Swift/UIKit, and Kotlin/Android platform tabs, the snippet with its copy button, and the Bridge Events Reference list" />
</Browser>

There is nothing to install. Your app loads the same widget that [Embed the widget](/docs/guides/deploy/embed-the-widget) describes, inside a WebView, and the two exchange messages. For where this surface sits among the other **Distribute** tabs, see [Deployments explained](/docs/guides/deploy/deployments-explained).

## Before you start

Before you start, sign in to <a href={urls.app}>the dashboard</a> and select the organization you want to work in.

* You need a published agent.
* You need the Admin or Member role. The **Enable Bridge Events** switch is read-only for other roles. See [Roles and permissions](/docs/guides/billing/roles-and-permissions).
* You need a mobile developer with a React Native, Swift, or Kotlin project. The snippet is code they paste into the app.

## Turn on the bridge and copy the snippet

<Steps>
  <Step title="Open the Mobile App view">
    In the builder sidebar, select **Distribute**, then **Mobile App** under the **Web** group. The **Mobile App Integration** card opens.
  </Step>

  <Step title="Turn on Enable Bridge Events">
    The platform tabs, the snippet, and the **Bridge Events Reference** appear below the switch. The switch applies to this agent only.
  </Step>

  <Step title="Select the platform tab">
    The tabs are **React Native**, **Swift/UIKit**, and **Kotlin/Android**. **React Native** is selected first.
  </Step>

  <Step title="Copy the snippet">
    Select the copy button in the top right corner of the snippet. Your agent's widget URL and region are already filled in.
  </Step>

  <Step title="Send the snippet to your mobile developer">
    Point them to the [WebView bridge](/docs/developer/mobile/webview-bridge) page for the full message contract and per-platform pages.
  </Step>
</Steps>

## What the developer receives

Each snippet opens your agent's widget URL in a WebView and handles the messages that flow between the app and the agent. The **Bridge Events Reference** below the snippet lists every message with its direction, and the [Bridge events reference](/docs/developer/mobile/bridge-events) page documents each field.

Your developer decides what the app does when the agent asks it to navigate, hands over captured data, or asks to close. Your job in the dashboard is to choose which gambits send those messages.

## Set a bridge event on a gambit

Bridge events fire when the conversation reaches the gambit inside a native app WebView. The **Bridge Event** section shows in the gambit editor only while **Enable Bridge Events** is on for the agent.

<Steps>
  <Step title="Open the gambit in the builder">
    Select the gambit and expand the **Bridge Event** section in the gambit editor.
  </Step>

  <Step title="Select the Event Type">
    The options are **None**, **Navigate**, **Send Data**, and **Close Agent**.
  </Step>

  <Step title="If you selected Navigate, fill in the Route and Parameters">
    **Route** is the app screen to open, for example `/screen/detail`. Select **Add Parameter** for each key and value the screen needs.
  </Step>
</Steps>

<Frame>
  <img src={img.deploy.bridgeEventGambitSection} alt="The Bridge Event section in the gambit editor with Event Type set to Navigate, showing the Route field and one key and value row under Parameters" />
</Frame>

**Route** and each parameter value accept variables such as `{{response.VarName}}`. The app can then open a screen for the item the end user picked.

The other event types need no fields:

* **Send Data** sends all captured conversation variables to the app when the gambit is reached.
* **Close Agent** tells the app to dismiss the agent screen.
* **None** removes the bridge event from the gambit.

## Verify

Ask your mobile developer to run the app and open the screen that hosts the WebView. The conversation loads. When the conversation reaches a gambit with a bridge event, the app receives that event and reacts the way the developer wired it.

## Related pages

* [WebView bridge](/docs/developer/mobile/webview-bridge)
* [Bridge events reference](/docs/developer/mobile/bridge-events)
* [Embed the widget](/docs/guides/deploy/embed-the-widget)
* [Deployments explained](/docs/guides/deploy/deployments-explained)