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.
Plain JavaScript
Anchor link to section titled "Plain JavaScript"Using CDN-hosted App Bridge
Anchor link to section titled "Using 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:
Use:
All other example code should function as-is.
Simple actions
Anchor link to section titled "Simple actions"Both hosts, such as the Shopify admin or Shopify POS, and apps can dispatch actions.
Example code
Anchor link to section titled "Example 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.
Action sets
Anchor link to section titled "Action 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.
Example code
Anchor link to section titled "Example code"This example demostrates the use of a Toast action set.
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.
Example code
Anchor link to section titled "Example 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 API key and host, then pass that object into the Provider.
Using App Bridge React with Polaris
Anchor link to section titled "Using App Bridge React with Polaris"App Bridge React is fully compatible with Polaris. While App Bridge provides access to features outside of your app, Polaris provides components to build within your app. To use both together, wrap your app in both Polaris’s <AppProvider> component as well as App Bridge React’s <Provider> component.