FROM CACHE - en_header

What Happened to App Bridge and Toast?

Shopify Expert
4788 56 560

I moved an App from Embedded, to NOT Embedded anymore. So it is just not embedded. OK, fine.

For some reason some code that used to work fine to flash a Toast no longer works anymore. I updated to Polaris 6 and App Bridge 1.29 and now Toasts don't show? What is up? I inspected these parameters and all of them seem to make sense, and so I am wondering what I am doing wrong now. Is this because App Bridge actions do not work unless in an embedded App?



import { Toast } from '@shopify/app-bridge/actions';
import { Context } from '@shopify/app-bridge-react';

const appBridge = useContext(Context);
const statusChangeMessage = {
  message: 'Status Change was Saved',
  isError: false,
const toastNotice = Toast.create(appBridge, statusChangeMessage);



Custom Shopify Apps built just for you!
Replies 2 (2)
Shopify Staff
Shopify Staff
54 8 17

Hi Bill, you are correct. App Bridge is meant for Embedded Apps. Toast, Modal, TitleBar, etc.. all happen outside of the app, facilitated by App Bridge.

If you would like to use these elements in a non-embedded context, you would need to follow the Polaris docs like so:


Hanna | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Shopify Expert
4788 56 560

Thanks! Yes, I am only now realizing everything about App Bridge is just for embedded Apps, and as I move this App from Embedded to non-embedded I have to remove all my code that was dependent on App Bridge. I had no idea so much of my code was tied up in App Bridge!

All better now. My App renders just with outside Shopify with Polaris, and I am now wiring it up to work the same as it was working embedded style.

Custom Shopify Apps built just for you!