About actions

Shopify App Bridge introduces a new concept of actions. An action provides a way for applications and hosts to trigger events with a payload.

Use the actions with plain JavaScript or take advantage of the App Bridge React library. This page provides an overview of both approaches.

Anchor to Plain JavaScriptPlain JavaScript

Anchor to Using CDN-hosted App BridgeUsing CDN-hosted App Bridge

The code examples in this section assume you’re using modular JavaScript patterns. If you're using the CDN-hosted version of Shopify App Bridge, then you can achieve the same results by replacing imports with objects on the window['app-bridge'] global.

Instead of:

import { TitleBar } from '@shopify/app-bridge/actions';

Use:

var AppBridge = window['app-bridge'];

var actions = AppBridge.actions;

var TitleBar = actions.TitleBar;

All other example code should function as-is.

Anchor to Simple actionsSimple actions

Both hosts, such as the Shopify admin or Shopify POS, and apps can dispatch actions.

Anchor to Example codeExample code

This example demonstrates the app setup and dispatching a Redirect action.

Import the createApp function from @shopify/app-bridge and the Redirect from @shopify/app-bridge/actions. Then use the createApp function to create an app.

Note

In the following example, config is a valid App Bridge configuration object. Learn more about configuring App Bridge.

import createApp from '@shopify/app-bridge';

import { Redirect } from '@shopify/app-bridge/actions';

const app = createApp({

apiKey: '12345',

host: host

});

// App dispatches a remote redirect action

app.dispatch(

Redirect.toRemote({

url: 'http://example.com'

})

);

Anchor to Action setsAction sets

Action sets group simple actions. Each instance of an action set has a unique ID that makes it possible for apps to subscribe to them. Think of action sets as a persisted set of actions that the app can dispatch or subscribe to at any time.

Anchor to Example codeExample code

This example demostrates the use of a Toast action set.

const toastNotice = Toast.create(app, toastOptions);

toastNotice.subscribe(Toast.Action.SHOW, data => {

// Do something with the show action

});

toastNotice.subscribe(Toast.Action.CLEAR, data => {

// Do something with the clear action

});

// Dispatch the show Toast action, using the toastOptions above

toastNotice.dispatch(Toast.Action.SHOW);

Anchor to ReactReact

Shopify App Bridge offers React component wrappers for some actions. This is a great option if you are already using React and want to follow familiar patterns.

Like App Bridge itself, the App Bridge React component library is available as a JavaScript module on npm.

You can access the App Bridge client app inside App Bridge React using the React Context API. See the <Provider> component for more information.

Anchor to Example codeExample code

This example demonstrates the app setup with React and using the React TitleBar component.

Import the Provider and TitleBar from @shopify/app-bridge-react. Create a configuration object with your client ID and host, then pass that object into the Provider.

Note

When using the App Bridge React library, you need to wrap all of your App Bridge React code inside of a single App Bridge Provider.

import React from 'react';

import ReactDOM from 'react-dom';

import {Provider, TitleBar} from '@shopify/app-bridge-react';

function MyApp() {

const config = {

// The client ID provided for your application in the Partner Dashboard.

apiKey: "api_key",

// The host of the specific shop that's embedding your app. This value is provided by Shopify as a URL query parameter that's appended to your application URL when your app is loaded inside the Shopify admin.

host: "example.myshopify.com"

};

return (

</Provider>

);

}

const root = document.createElement('div');

document.body.appendChild(root);

ReactDOM.createRoot(root).render(<MyApp />);

Anchor to Using App Bridge React with Polaris ReactUsing App Bridge React with Polaris React

App Bridge React is fully compatible with Polaris React. While App Bridge provides access to features outside of your app, Polaris React provides components to build within your app. To use both together, wrap your app in both Polaris React’s <AppProvider> component as well as App Bridge React’s <Provider> component.

See the <Provider> component for more information.

Was this page helpful?