# WebView Integration

## Overview

Integrating **menta tech** into a mobile application is done by embedding **WebViews** that load URLs provided by menta tech.

This document describes the steps required to implement the integration correctly and ensure a seamless experience for users.

{% callout type="info" title="Prerequisite" %}
Before integrating WebViews, make sure you have configured [User Authentication](/en/guides/auth) so that buy and sell flows work correctly within the WebView.
{% /callout %}

---

## WebView Configuration

menta tech URLs must be loaded directly into the application's WebView. To optimize the visual experience and integrate it with the native environment, you must add the `disableLayout=true` parameter to all menta tech URLs.

This parameter hides the web *header* and *footer*, so the content adapts seamlessly to the native application *layout*.

{% columns gap="2rem" align="center" %}

{% column width="0.5" valign="center" %}

### Parameter

| Parameter | Value | Description |
|-----------|-------|-------------|
| `disableLayout` | `true` | Hides menta tech header and footer for native integration |

{% /column %}

{% column width="0.5" valign="center" %}

### URL Example

```
https://example.menta.com/endpoint?disableLayout=true
```

{% callout type="warning" title="Important" %}
This parameter must be included in **all** menta tech URLs loaded within a WebView. Otherwise, the standard web navigation will be displayed, which is not appropriate for a native experience.
{% /callout %}

{% /column %}

{% /columns %}

---

## Communication between App and WebView

To improve navigation and user experience, bidirectional communication between the application and menta tech must be enabled using `postMessage`.

This allows sending and receiving events between both environments, such as navigation actions or state updates.

{% callout type="info" title="postMessage API" %}
The `postMessage` API is the standard for communication between the WebView and the native application. It allows sending structured JSON messages between both contexts securely.
{% /callout %}

{% conditionaltabs id="tabs-webview-communication" %}
{% tab label="Action: Go Back" %}

### Action: Go Back

To implement the "go back to the previous step" functionality, the application must send a `GoBack` message to menta tech.

Upon receiving this message, menta tech navigates back one step within the corresponding flow.

#### Message from App to menta tech

{% columns gap="2rem" align="center" %}

{% column width="0.5" valign="center" %}

```javascript
webViewRef.current.postMessage(
  JSON.stringify({
    type: "NAVIGATION",
    payload: "goBackStep"
  })
);
```

{% /column %}

{% column width="0.5" valign="center" %}

| Field | Type | Description |
|-------|------|-------------|
| `type` | `string` | Message type. Must be `"NAVIGATION"` |
| `payload` | `string` | Action to execute. Must be `"goBackStep"` |

{% callout type="check" title="Result" %}
menta tech navigates back one step in the active WebView flow.
{% /callout %}

{% /column %}

{% /columns %}

#### When to use it

- When your application has a native "Back" button and you want it to also control navigation within menta tech.
- To provide a consistent navigation experience between the app and the WebView content.

{% /tab %}

{% tab label="Active Step Communication" %}

### Active Step Communication

Throughout the entire flow, menta tech will send messages to the application indicating which step the user is currently on.

This allows updating the application's state or UI in real time.

#### Message from menta tech to App

{% columns gap="2rem" align="center" %}

{% column width="0.5" valign="center" %}

```javascript
// menta tech sends this message to the WebView:
window.ReactNativeWebView.postMessage(
  JSON.stringify({ step })
);
```

{% /column %}

{% column width="0.5" valign="center" %}

| Field | Type | Description |
|-------|------|-------------|
| `step` | `string` | Identifier of the current step in the menta tech flow |

{% callout type="info" title="Recommended usage" %}
Listen for these messages to update the native UI (for example: progress indicators, screen titles, or conditional logic).
{% /callout %}

{% /column %}

{% /columns %}

#### How to listen for messages in React Native

```javascript
<WebView
  onMessage={(event) => {
    const data = JSON.parse(event.nativeEvent.data);
    console.log("Current step:", data.step);
    // Update native UI based on the step
  }}
/>
```

{% /tab %}

{% /conditionaltabs %}

---

## Flow Completion

When a flow in menta tech completes successfully, the URL loaded in the WebView will include the `success` parameter.

The application must monitor URL changes in the WebView to detect this event and close the component, returning to the main application context.

### Completion Detection

{% columns gap="2rem" align="center" %}

{% column width="0.5" valign="center" %}

#### Completion URL

```
https://example.menta.com/success
```

When the URL containing the `success` parameter is detected, the application should automatically close the WebView and restore the main view.

{% /column %}

{% column width="0.5" valign="center" %}

#### React Native Example

```javascript
<WebView
  onNavigationStateChange={(navState) => {
    if (navState.url.includes("/success")) {
      // Close the WebView
      navigation.goBack();
      // Optionally, refresh data
    }
  }}
/>
```

{% /column %}

{% /columns %}

{% callout type="warning" title="Important" %}
Detecting the `success` URL is the only way to know that the flow has completed successfully. Make sure to implement this check to prevent the user from getting stuck in the WebView after completing the operation.
{% /callout %}

---

## Integration Summary

{% table highlight-first=true %}
| Step | Action | Detail |
|------|--------|--------|
| 1. Configure WebView | Add `disableLayout=true` | Hides menta tech header/footer for a native experience |
| 2. App → menta Communication | Implement `postMessage` with `NAVIGATION` type | Allows controlling internal navigation (GoBack) |
| 3. menta → App Communication | Listen for `step` messages | Allows updating native UI based on flow progress |
| 4. Completion | Detect URL with `success` | Close the WebView and return to the main app context |
{% /table %}