Shopify Inbox with custom storefront

[Chadyka]

As far as I can trace it, Shopify Inbox chat widget is not much more than any other widgets other than lacking documentation and support. Would it be possible to load the chat widget on a custom storefront with some script tags and maybe some HTML or iframe to hook into?

[JacopoKenzo]

Interested in this as well

[nerioslamaj]

Any update on this? It would be great to be able to embed the Shopify Inbox via code snippets

[juanpprieto]

@Chadyka @JacopoKenzo @nerioslamaj

I managed to get Inbox to work with Hydrogen with this workaround. Here are the steps:

1. Install the Shopify Inbox app into your store
2. Make sure it is enabled in your Online Store by going to the app settings.
3. Visit your published liquid theme preview and inspect the DOM via DevTools
4. Search the DOM for a script tag with a src pointing to a shopifyChatV1.js

5. Copy the script's src
6. In your hydrogen's root.tsx add the following script tag

import {Script} from '@shopify/hydrogen'

export default App() {
 return (
   ....
   <Script
     async
     src='YOUR-COPIED-SRC_INC-QUERY-PARAMS'
   />
 )
}

Note: The widget won't fully work in localhost because it is currently not allowed by our bot protection mechanism, but it will work once it is deployed to a qualified domain.

We are hoping to improve this flow by adding a code snippet to the Inbox app settings page

[geoffreybosch]

I'm using the h2 default config with jsx instead of typescript and getting this error when I add that Script element to my root.jsx. Do you have any idea what could be causing this? The chat button appears, but I get this message in the chat box: "Chat is unavailable right now A technical problem occurred. Please wait a few moments and try again."

[geoffreybosch]

I realized that I needed these resources to be added to me ContentSecurityPolicy in 'entry.server.jsx':

connectSrc: [ "'self'", 'cdn.shopify.com', 'monorail-edge.shopifysvc.com', 'shopify-chat.shopifyapps.com', // Shopify Inbox 'https://notify.bugsnag.com/', 'messaging-api.shopifyapps.com', 'pusher.com', '*.pusher.com', '*.hcaptcha.com/', ],

If anyone knows of any other url's that are used by the chat component, feel free to pass them along. I keep finding new ones with every test conversation I do.

[vestimir]

Unfortunately this changed and no longer works for me:

• The chat is loaded with different scripts
• The security exceptions are not working and reporting errors in the browser console

Any suggestions on how to fix it, here's the snippet I've adapted:

in root.jsx

<Script
    async
    src="https://cdn.shopify.com/extensions/bdb6998f-cc8d-49e0-81e2-e024850275f1/inbox-640/assets/inbox-chat-loader.js"
/>
<Script
    id="chat-button-container"
    data-horizontal-position="bottom_right"
    data-vertical-position="lowest"
    data-icon="chat_bubble"
    data-text="chat_with_us"
    data-color="#000000"
    data-secondary-color="#FFFFFF"
    data-ternary-color="#6A6A6A"
    data-domain="ec62b3-ce.myshopify.com"
    data-external-identifier="1Pzw1PeoaTgVb6mQuABVkVl36PmSDw-4qeds1kdTbc8"
/>

in entry.server.jsx:

const {nonce, header, NonceProvider} = createContentSecurityPolicy({
    shop: {
      checkoutDomain: context.env.PUBLIC_CHECKOUT_DOMAIN,
      storeDomain: context.env.PUBLIC_STORE_DOMAIN,
      connectSrc: [ // I added these
        "'self'",
        'cdn.shopify.com',
        'monorail-edge.shopifysvc.com',
        'shopify-chat.shopifyapps.com',
        'messaging-api.shopifyapps.com',
        'pusher.com',
        '*.pusher.com',
        '*.hcaptcha.com/',
      ],
    },
  });

[juanpprieto]

We are looking to release an official component soon.

[countfak]

Hi, is there an ETA, a roadmap, or some documentation about this? It would be huge to have shopify inbox functionality for headless stores.

[contrebande-labs]

It is great to be able to try Shopify Inbox with Hydroen storefronts!

However, I have the same problem as @agoyal118. Same warning in the console and the widget intermitently refuses to show up. Additionnaly, the iframe is white and not transparent as it should be. The widget language also doesn't match the storefront's locale. We followed @juanpprieto 's example to the letter. You can check it live here on our shop: contrebande.co/contact

We would very much love to fix these snags... Thanks!

[contrebande-labs]

Here is a picture for reference of both the warning in the console and the non-transparency of the iframe. I have audited all the css to see if that could have been the problem, but I couldn't find anything. I'm using @juanpprieto 's example component.