> Caution:
> This documentation covers App Bridge versions 3 and prior, which are installed from npm. You may want to view documentation for the current CDN version of [App Bridge](/docs/api/app-bridge-library).

If you created your app with [Shopify CLI](/docs/apps/build/cli-for-apps) 3.x or higher, then your app is already set up so it can be embedded in the Shopify admin. Otherwise, you need to perform a few steps to configure your app so it can be embedded.

## Turn on embedding in the Partner Dashboard

By default, all new apps are embedded in the Shopify admin. You can embed an existing app with the following steps:

 1. From your [Partner Dashboard](https://partners.shopify.com/organizations), click **Apps**.
 1. Click the name of your app.
 1. Click **Configuration**.
 1. In the **Embedded in Shopify admin** section, set the value for **Embed app in Shopify admin** to **True**.
 1. If you plan to [embed your app in Shopify POS](/docs/api/app-bridge/previous-versions/actions/pos), then, in the **POS** section, set the value for **Embed app in Shopify POS** to **True**.
 1. Click **Save and release**.

> Caution:
> If you enable this feature for an existing app that isn't designed to use Shopify App Bridge, then users will no longer be able to use the app.

## Serve your app over HTTPS

You must serve your embedded applications over HTTPS.

The Shopify admin uses HTTPS for all pages. Failure to serve an embedded app over HTTPS will cause errors in web browsers, due to [mixed content restrictions](https://developer.mozilla.org/en-US/docs/Security/MixedContent).

Learn more about [serving your app over HTTPS](/docs/apps/build/security/encrypt-with-tls).

 > Tip:
 > To simplify local development, use Shopify [CLI](/docs/apps/build/cli-for-apps).

## Set the frame-ancestors directive

The Content Security Policy `frame-ancestors` directive controls where the app can be framed. You must ensure your app is only frameable by the authenticated shop domain and the admin domain to avoid clickjacking attacks.

You can do this with the Content Security Policy `frame-ancestors` directive:

```
Content-Security-Policy: frame-ancestors https://example.myshopify.com https://admin.shopify.com;
```

Learn more about the [`frame-ancestors` directive and app security](/docs/apps/build/security/set-up-iframe-protection).

> Note:
> The `frame-ancestors` directive replaces the obsolete `X-Frame-Options` response header.


## Authorize with OAuth

Embedded apps should use [token exchange](/docs/apps/build/authentication-authorization/access-tokens/token-exchange) to obtain an access token. Depending on your needs, you can request an [online](/docs/apps/build/authentication-authorization/access-tokens/online-access-tokens) or [offline](/docs/apps/build/authentication-authorization/access-tokens/offline-access-tokens) access token.

## Set up Shopify App Bridge 3 in your app

Shopify App Bridge 3 is available as [a JavaScript module on npm](https://www.npmjs.com/package/@shopify/app-bridge). You can install it in your app using [npm](https://www.npmjs.com/get-npm) or [yarn](https://yarnpkg.com/en/).

> Tip:
> We recommend installing the latest version of [App Bridge](https://shopify.dev.com/docs/api/app-bridge-library) for an improved experience and to future proof your app.

<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>


<script type="text/plain" data-language="bash" data-title="npm">
RAW_MD_CONTENTnpm install --save @shopify/app-bridge
END_RAW_MD_CONTENT</script>
<script type="text/plain" data-language="bash" data-title="yarn">
RAW_MD_CONTENTyarn add @shopify/app-bridge
END_RAW_MD_CONTENT</script>

</div>
</p>


## Initialize Shopify App Bridge in your app

To keep your embedded apps secure, you need to specify the following configuration values, when intializing App Bridge:

 - `apiKey` - The client ID provided for your application in the [Partner Dashboard](https://partners.shopify.com/organizations).
 - `host` - 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.
 - `forceRedirect` (Optional) - If set to `true`, then App Bridge detects when your app is loaded outside of the Shopify admin, and automatically redirects the user to the Shopify admin page that embeds your app.

> Caution:
> To ensure that you're configuring App Bridge correctly, you must always use the `host` that's provided by Shopify.
>
> Shopify is [consolidating its admin domains](https://www.shopify.com/partners/blog/september-product-updates-for-partners-and-developers). During the rollout period, the store loading your app might use the old `myshopify.com` domain, or the new `admin.shopify.com` domain. This impacts the value returned in the `host` parameter. to The `host` parameter value can also differ depending on whether your app runs in web, mobile, or POS.
>
> If you initialize App Bridge with an incorrect host, then your app won't work as expected.

<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>


<script type="text/plain" data-language="js" data-title="Modular JavaScript">
RAW_MD_CONTENTimport createApp from '@shopify/app-bridge';

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: new URLSearchParams(location.search).get("host"),
    forceRedirect: true
};

const app = createApp(config);
END_RAW_MD_CONTENT</script>

</div>
</p>


> Note:
> You should re-use the same App Bridge instance because the `host` parameter is only guaranteed on initial load of your app.
>
> If your app isn't a [single-page application](https://developer.mozilla.org/en-US/docs/Glossary/SPA), then your server needs to persist the `host` value during the initial page load. On subsequent page loads, you should use the persisted `host` value to configure App Bridge.

## Make your first App Bridge call

The following example uses [`ResourcePicker`](/docs/api/app-bridge/previous-versions/actions/resourcepicker) to open a UI component that enables users to browse, find, and select products from their store using a familiar experience.

<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>


<script type="text/plain" data-language="js" data-title="Modular JavaScript">
RAW_MD_CONTENTimport { ResourcePicker }  from '@shopify/app-bridge/actions';


const picker = ResourcePicker.create(app, {
  resourceType: ResourcePicker.ResourceType.Product
});

picker.subscribe(ResourcePicker.Action.SELECT, (payload) => {
  console.log(payload.selection);
});

picker.dispatch(ResourcePicker.Action.OPEN);
END_RAW_MD_CONTENT</script>

</div>
</p>


## Next steps

> Note:
> If you need help using Shopify App Bridge please visit the [.dev Community](https://community.shopify.dev/c/app-bridge/19). It's the best place to discuss libraries and get support.
> If you have a specific bug report or feature request for App Bridge, please visit the [App Bridge issue tracker on GitHub](https://github.com/Shopify/shopify-app-bridge/issues).


Now that you've initialized your app, you can use any [Shopify App Bridge actions](/docs/api/app-bridge/previous-versions/actions/).

You can also [debug your app with Shopify App Bridge](/docs/api/app-bridge/previous-versions/debugging).