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

# JavaScript Bridge for On-Site Messaging and Landing Pages

> Use the MoEngage JavaScript bridge to track events, clicks, dismissals, and form submissions from on-site messaging campaigns and landing pages.

On-Site Messaging (OSM) campaigns and Landing Pages support a JavaScript bridge interface that lets your web templates interact with the MoEngage SDK.

The bridges contain a set of APIs that you can access using the global variables `MoeOsm` for on-site messaging and `Moengage.landingPages` for landing pages.

The following sections list all the JS bridge methods available for OSM and landing pages, and explain each API in detail.

## On-site messaging (OSM)

The following table lists all the JS bridge methods available for on-site messaging campaigns.

| Method name                               | Description                                                                                                                                                                |
| ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `MoeOsm.trackEvent(eventName, eventAttr)` | Tracks a custom event from the OSM template. `eventName` is the name of the tracked event. `eventAttr` is the event attributes tracked along with the event.               |
| `MoeOsm.trackClick(widgetId)`             | Tracks clicks for campaign performance measurement. `widgetId` is the identifier of the widget being clicked. Helpful when multiple CTAs are present in a single template. |
| `MoeOsm.trackDismiss()`                   | Tracks dismiss stats for campaign performance measurement.                                                                                                                 |
| `MoeOsm.dismissMessage()`                 | Attach this method on your template to close the OSM message on a button click or any other click.                                                                         |

<Info>
  **JS methods for OSM**

  Integrate the JS methods below with your OSM template to execute on-click actions like message close, and to track data such as events, clicks, and dismissals.
</Info>

### Track event

To track a custom event from your OSM template, use the `MoeOsm.trackEvent(eventName, eventAttr)` API.

<CodeGroup>
  ```javascript JavaScript theme={null}
  onclick="MoeOsm.trackEvent('add to cart', {price: 300})"
  ```
</CodeGroup>

### Track click

To track widget click events, use the `MoeOsm.trackClick(widgetId)` API.

<CodeGroup>
  ```javascript JavaScript theme={null}
  onclick="MoeOsm.trackClick('1')"
  ```
</CodeGroup>

### Track dismiss

To track dismiss events from your OSM template, use the `MoeOsm.trackDismiss()` API.

<CodeGroup>
  ```javascript JavaScript theme={null}
  MoeOsm.trackDismiss();
  ```
</CodeGroup>

### Dismiss message

To dismiss the OSM message on a button click or any other click, use the `MoeOsm.dismissMessage()` API.

<CodeGroup>
  ```javascript JavaScript theme={null}
  MoeOsm.dismissMessage();
  ```
</CodeGroup>

## Landing page

The following table lists all the JS bridge methods available for landing pages.

| Method name                                                                      | Description                                                                                                            |
| -------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| `Moengage.landingPages.trackClick(lp_context, <widget_id>)`                      | Tracks clicks on the landing page. All elements with a valid `href` have this click tracking added by default.         |
| `Moengage.landingPages.trackFormSubmit(lp_context, <attribute_object>)`          | Tracks form submissions. This event is also tracked by default whenever a form element is present on the landing page. |
| `Moengage.landingPages.trackEvent(<event_name>, lp_context, <event_attributes>)` | Tracks a custom event from the landing page.                                                                           |

<Info>
  **JS methods for landing pages**

  Integrate the JS methods below with your landing page template to track clicks on page elements, capture form submissions, and track custom events.
</Info>

### Track click

To track clicks on elements within your landing page, use the `Moengage.landingPages.trackClick(lp_context, <widget_id>)` API.

<Note>
  All elements with a valid `href` attribute have this click tracking added by default.
</Note>

<CodeGroup>
  ```javascript JavaScript theme={null}
  onclick="Moengage.landingPages.trackClick(lp_context, 'Register_Now')"
  ```
</CodeGroup>

### Track form submit

To track form submissions on your landing page, use the `Moengage.landingPages.trackFormSubmit(lp_context, <attribute_object>)` API.

<Note>
  This event is tracked by default whenever a form element is present on the landing page.
</Note>

<CodeGroup>
  ```javascript JavaScript theme={null}
  const attributeObj = {
    name: document.getElementById("name").value.trim(),
    email: document.getElementById("email").value.trim(),
    mobile: document.getElementById("mobile").value.trim(),
    consent: document.getElementById("consent").checked ? "yes" : "no"
  };
  Moengage.landingPages.trackFormSubmit(lp_context, attributeObj);
  ```
</CodeGroup>

### Track event

To track a custom event from your landing page, use the `Moengage.landingPages.trackEvent(<event_name>, lp_context, <event_attributes>)` API.

<CodeGroup>
  ```javascript JavaScript theme={null}
  Moengage.landingPages.trackEvent('Event name', lp_context, 'widgetId');
  ```
</CodeGroup>