> ## 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.
# The WebView bridge
> How native mobile apps embed a Tars agent through a WebView and a postMessage protocol.
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"
}
};
After this page you understand how a native app embeds an agent: a WebView plus a message protocol, with nothing to install.
## Architecture
There is no native library to add to your app. Your app opens a WebView pointing at the agent's widget URL.
```text theme={null}
https://YOUR_WIDGET_HOST/widget/YOUR_AGENT_ID?region=YOUR_REGION
```
The **Distribute** → **Mobile App** panel generates this URL with your region already set. Without `region`, the widget uses the default region, which loads the wrong backend for an organization in any other region. An unknown `region` value stops the widget from loading.
The app and the widget then exchange JSON messages. Every message is an object with a `type` field prefixed `tars:`, so foreign messages are ignored.
| Direction | Messages |
| ------------ | -------------------------------------------------------- |
| App → widget | `tars:init`, `tars:inject`, `tars:command` |
| Widget → app | `tars:ready`, `tars:navigate`, `tars:data`, `tars:close` |
The full field-level contract is in the [bridge events reference](/docs/developer/mobile/bridge-events).
## How each direction travels
App to widget messages are posted into the page with `window.postMessage`, which every platform snippet does through its script injection call.
Widget to app messages take a different path. The widget sends them with `window.parent.postMessage`, the same call it uses inside the web embed iframe. In a top-level WebView `window.parent` is the page itself, so the message stays in the page. Your app must listen for `message` on `window` and relay every `tars:`-prefixed message to its own native channel.
## Enabling the bridge
The bridge is gated per agent. Open **Distribute** → **Mobile App** on the agent and turn on **Enable Bridge Events**. The toggle also reveals ready-made snippets for React Native, Swift/UIKit, and Kotlin/Android, plus a bridge events reference. With the toggle on, gambit editors gain bridge event configuration.
## The capabilities handshake
The widget posts `tars:ready` twice, and the two messages mean different things. The widget page posts a bare `tars:ready` as soon as it mounts, with no other fields. That message only says the page is loaded and listening.
The app starts the session by posting `tars:init`, carrying its platform, chrome preferences, and optional end user data. The bridge answers with a second `tars:ready`, declaring its protocol version and capabilities: `navigate`, `data`, and `close`. Only the first `tars:init` takes effect, later ones are ignored.
The widget answers only a `tars:init` that arrives after it mounts. An init posted before that is dropped and never answered. Post `tars:init` when the bare `tars:ready` arrives, or resend it until a `tars:ready` with `capabilities` comes back. A repeat init after the handshake is ignored, so a resend is safe.
After the handshake, the widget emits events as the conversation reaches gambits with configured bridge events, and the app can inject data or send commands at any time.
## Chrome control
`tars:init` can hide parts of the widget chrome so the conversation sits flush inside a native screen. `showHeader` and `showCloseButton` both default to `true`.
## What the bridge is for
The bridge turns a conversation into a native flow step. A flow can hand captured variables to the app, ask the app to navigate to a native route, or close the chat screen. The app can push the signed-in end user's data into the conversation instead of asking again.
## Related pages
* [React Native integration](/docs/developer/mobile/react-native)
* [Swift integration](/docs/developer/mobile/swift)
* [Kotlin integration](/docs/developer/mobile/kotlin)
* [Bridge events reference](/docs/developer/mobile/bridge-events)