---
title: Methods
description: Learn more about methods available in Shopify App Bridge.
api_name: app-bridge
source_url:
  html: 'https://shopify.dev/docs/api/app-bridge/previous-versions/methods'
  md: 'https://shopify.dev/docs/api/app-bridge/previous-versions/methods.md'
---

ExpandOn this page

* [Initialization methods](https://shopify.dev/docs/api/app-bridge/previous-versions/methods.md#initialization-methods)
* [App object methods](https://shopify.dev/docs/api/app-bridge/previous-versions/methods.md#app-object-methods)
* [Platform methods](https://shopify.dev/docs/api/app-bridge/previous-versions/methods.md#platform-methods)

# Methods

Note

Most of Shopify App Bridge's functionality relies on actions. See the [Actions](https://shopify.dev/docs/api/app-bridge/previous-versions/actions) section to learn more about how to use these.

***

## Initialization methods

### `createApp(config)`

Returns an `app` object. Used to [initialize your app instance](https://shopify.dev/docs/api/app-bridge/previous-versions/app-bridge-from-npm/app-setup#initialize-shopify-app-bridge-in-your-app).

The config object should contain the following keys:

| Key | Type | Description |
| - | - | - |
| `apiKey` | string | The client ID provided for your application in the Partner Dashboard. |
| `host` | string | The base64-encoded origin/domain of the Shopify shop, which is provided by Shopify as a query parameter on the initial load of your app in the Shopify Admin. The host is set dynamically and should be stored in the session from the initial load. |

Note

In the following example, `config` is a valid App Bridge configuration object. Learn more about [configuring App Bridge](https://shopify.dev/docs/api/app-bridge/previous-versions/app-bridge-from-npm/app-setup#initialize-shopify-app-bridge-in-your-app).

```js
import createApp from '@shopify/app-bridge';
const app = createApp(config);
```

```js
var AppBridge = window['app-bridge'];
var createApp = AppBridge.createApp;
const app = createApp(config);
```

##### Modular JavaScript

```
import createApp from '@shopify/app-bridge';
const app = createApp(config);
```

##### CDN-hosted

```
var AppBridge = window['app-bridge'];
var createApp = AppBridge.createApp;
const app = createApp(config);
```

***

## App object methods

### `app.dispatch(action)`

Dispatches an action to Shopify App Bridge. Hosts (like Shopify Admin and Shopify Mobile) can subscribe to actions to listen for these dispatches.

| Key | Type | Description |
| - | - | - |
| `action` | Action | One of Shopify App Bridge's included [actions](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/). |

```js
app.dispatch(
  Redirect.toRemote({
    url: 'http://example.com',
  }),
);
```

### `app.error(callback)`

Subscribe to all errors, including those that are caused by actions. Returns a method you can use to unsubscribe from all errors.

| Key | Type | Description |
| - | - | - |
| `callback` | function | The function you want to execute when an error occurs. |

```js
const unsubscribeFromErrors = app.error((data) => {
  const {
    type,    // the error type
    action,  // the original action including its id
    message, // additional hints on how to fix the error
  } = data;


  // Handle all errors here


  switch(type) {
    case Error.Action.INVALID_PAYLOAD:
    // Do something with the error
    break;
  }
});


// Unsubscribe from all errors
unsubscribeFromErrors();
```

### `app.getState()`

Returns a Promise which, when resolved, returns information about your app's current state, including the currently logged in staff member.

```js
app.getState().then((data) => {
  const {
    appInfo,
    loading,
    modal,
    navigation,
    pos,
    resourcePicker,
    staffMember,
    titleBar,
    toast
  } = data;
});
```

### `app.subscribe(callback, id?)`

Subscribe to all actions. Returns a method you can use to unsubscribe.

Arguments:

| Key | Type | Description |
| - | - | - |
| `callback` | function | The function you want to execute when an action is dispatched. |
| `id` | int | The ID of a particular action set instance to subscribe to (optional). |

```js
const unsubscribeFromAll = app.subscribe((data) => {
  // Handle all actions here
  console.log(data);
});


// Unsubscribe from all actions
unsubscribeFromAll();
```

### `app.subscribe(eventNameSpace, callback, id?)`

When `eventNameSpace` or `id` are provided, this method subscribes to actions of the provided type.

Arguments:

| Key | Type | Description |
| - | - | - |
| `eventNameSpace` | string | Include this to subscribe only to actions of a particular type: for example, `Modal.Action.OPEN`. (optional) |
| `callback` | function | The function you want to execute when an action is dispatched. |
| `id` | int | The ID of a particular action set instance to subscribe to (optional). |

```js
const unsubscribeModalOpen = app.subscribe(Modal.Action.OPEN, (data) => {
  // Do something whenever a Modal open action is dispatched
});


// Unsubscribe from Modal open actions
unsubscribeModalOpen();
```

***

## Platform methods

The following utility methods, available in the [`app-bridge` package](https://www.npmjs.com/package/@shopify/app-bridge), return `true` or `false` depending on which platform an embedded app is running on:

* `isShopifyMobile`: Returns `true` if the app is running on [Shopify Mobile](https://help.shopify.com/manual/shopify-admin/shopify-app).
* `isShopifyPOS`: Returns `true` if the app is running on [Shopify POS](https://help.shopify.com/manual/sell-in-person/shopify-pos).
* `isShopifyPing`: Returns `true` if the app is running on [Shopify Ping](https://help.shopify.com/manual/ping).
* `isMobile`: Returns true if any of the conditions above are true.
* `isShopifyEmbedded`: Returns `true` if the app is running as an [embedded app](https://shopify.dev/docs/api/app-bridge/previous-versions/app-bridge-from-npm/app-setup).

```js
import {isMobile, isShopifyEmbedded} from '@shopify/app-bridge/utilities';


if (isShopifyEmbedded()){
  if (isMobile()) {
    // app is running as an embedded on mobile
  } else {
    // app is running as an embedded app in a desktop web browser
  }
} else {
  // app is not running as an embedded app
}
```

***

* [Initialization methods](https://shopify.dev/docs/api/app-bridge/previous-versions/methods.md#initialization-methods)
* [App object methods](https://shopify.dev/docs/api/app-bridge/previous-versions/methods.md#app-object-methods)
* [Platform methods](https://shopify.dev/docs/api/app-bridge/previous-versions/methods.md#platform-methods)